0byt3m1n1-V2

Path: /app/zebraweb/zebraweb/ [ Home ]
File: availability.html
<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8" />
        <title>Availability</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
        <meta content="Coderthemes" name="author" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="../assets/images/favicon.ico">

        <!-- Plugins css -->
        <link href="../assets/libs/flatpickr/flatpickr.min.css" rel="stylesheet" type="text/css" />
        <link href="../assets/libs/selectize/css/selectize.bootstrap3.css" rel="stylesheet" type="text/css" />

          <!-- third party css -->
          <link href="../assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
          <link href="../assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
          <link href="../assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
          <link href="../assets/libs/datatables.net-select-bs4/css//select.bootstrap4.min.css" rel="stylesheet" type="text/css" />
          <link href="../assets/libs/mohithg-switchery/switchery.min.css" rel="stylesheet" type="text/css" /> 

          <link href="../assets/libs/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
          <link href="../assets/libs/mmenu-js/mmenu.css" rel="stylesheet" />
          <link href="../assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" />

          <link rel="stylesheet" href="../assets/libs/mmenu-js/core/offcanvas/mmenu.offcanvas.css?v=1.1" /> 
        <!-- icons -->
        <link href="../assets/css/icons.min.css" rel="stylesheet" type="text/css" />

        <!-- App css -->
        <link href="../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bs-default-stylesheet" />
        <link href="../assets/css/app.min.css" rel="stylesheet" type="text/css" id="app-default-stylesheet" />

        <link href="../assets/css/bootstrap-dark.min.css" rel="stylesheet" type="text/css" id="bs-dark-stylesheet" />
        <link href="../assets/css/app-dark.min.css" rel="stylesheet" type="text/css" id="app-dark-stylesheet" />



    </head>

    <body class="loading" data-layout='{"mode": "light", "width": "fluid", "menuPosition": "fixed", "sidebar": { "color": "light", "size": "default", "showuser": false}, "topbar": {"color": "dark"}, "showRightSidebarOnPageLoad": true}'>

        <!-- Begin page --> 
        <div id="wrapper">

            <!-- Topbar Start -->
            <div class="navbar-custom">
              <div class="container-fluid">


                <div class="topbar">
                    <ul class="list-unstyled topnav-menu topnav-menu--settings float-right mb-0">
          
                      <!-- Association Picker -->
                      <li class="dropdown association-dropdown topbar-dropdown">
                          <a
                          class="nav-link dropdown-toggle nav-user mr-0 waves-effect waves-light"
                          data-toggle="dropdown"
                          href="#"
                          role="button"
                          aria-haspopup="false"
                          aria-expanded="false"
                        >
                          <img
                            src="../assets/images/zebraweb/icons/icon.assoication-placeholder.svg"
                            alt="user-image"
                            class="rounded-circle p-1 association-dropdown--avatar" 
                            style="background: #fff;"
                          /> <span class="association-dropdown--label ml-2">New Jersey State Interscholastic Athle…</span> 
                          <div class="arrow-down"></div>

                        </a>

                        <div class="dropdown-menu dropdown-menu-right profile-dropdown">

                          <div class="picker__body">

                            <h1 class="picker-heading primary text-center">
                              Switch Assocation
                            </h1> 

                          <input type="text" class="form-control input-search" placeholder="Search Assocation">

                            <div class="picker__section">

                                <div class="picker-item">
                                    <div class="picker-item__avatar">
                                        <div class="avatar"></div> 
                                    </div>
                                    <div class="picker-item__title">Delaware Interscholastic Athletic Association</div>
                                </div>
                                <div class="picker-item">
                                    <div class="picker-item__avatar">
                                        <div class="avatar"></div>
                                    </div>
                                    <div class="picker-item__title">Delaware Interscholastic Athletic Association</div>
                                </div>
                                <div class="picker-item">
                                    <div class="picker-item__avatar"> 
                                        <div class="avatar"></div>
                                    </div>
                                    <div class="picker-item__title">Delaware Interscholastic Athletic Association</div>
                                </div>
                                <div class="picker-item">
                                    <div class="picker-item__avatar">
                                        <div class="avatar"></div>
                                    </div> 
                                    <div class="picker-item__title">Delaware Interscholastic Athletic Association</div>
                                </div>
                                <div class="picker-item">
                                    <div class="picker-item__avatar">
                                        <div class="avatar"></div>
                                    </div>
                                    <div class="picker-item__title">Delaware Interscholastic Athletic Association</div>
                                </div>
                                <div class="picker-item">
                                    <div class="picker-item__avatar">
                                        <div class="avatar"></div>
                                    </div>
                                    <div class="picker-item__title">Delaware Interscholastic Athletic Association</div>
                                </div>

                            </div>

                        </div>

                        </div>
                      </li>
                       <!-- /End Association Picker -->
        
                      <li class="dropdown notification-list topbar-dropdown">
                        <a
                          class="nav-link dropdown-toggle nav-user mr-0 waves-effect waves-light"
                          data-toggle="dropdown"
                          href="#"
                          role="button"
                          aria-haspopup="false"
                          aria-expanded="false"
                        >
                          <img
                            src="../assets/images/zebraweb/avatar/avatar-placeholder.png"
                            alt="user-image"
                            class="rounded-circle p-1"
                            style="background: #fddc32"
                          />
                        </a>
                        <div class="dropdown-menu dropdown-menu-right profile-dropdown">
                          <!-- item-->
                          <div class="dropdown-header noti-title">
                            <h6 class="text-overflow m-0">Welcome !</h6>
                          </div>
    
                          <!-- item-->
                          <a href="javascript:void(0);" class="dropdown-item notify-item">
                            <i class="fe-user"></i>
                            <span>My Account</span>
                          </a>
    
                          <!-- item-->
                          <a href="javascript:void(0);" class="dropdown-item notify-item">
                            <i class="fe-settings"></i>
                            <span>Settings</span>
                          </a>
    
                          <div class="dropdown-divider"></div>
    
                          <!-- item-->
                          <a href="javascript:void(0);" class="dropdown-item notify-item">
                            <i class="fe-lock"></i>
                            <span>Switch to Classic View</span>
                          </a>
    
                          <div class="dropdown-divider"></div>
    
                          <!-- item-->
                          <a href="javascript:void(0);" class="dropdown-item notify-item">
                            <i class="fe-log-out"></i>
                            <span>Logout</span>
                          </a>
                        </div>
                      </li>
                    </ul>
       
    
                    <!-- LOGO -->
                    <div class="logo-box">
                      <ul class="list-unstyled topnav-menu topnav-menu-left m-0">
                        <li>
                          <button class="button-menu-mobile waves-effect waves-light">
                            <i class="fe-menu"></i>
                          </button>
                        </li>
      
                        <li>
                          <a class="navbar-toggle nav-link">
                            <div class="lines">
                              <span></span> 
                              <span></span>
                              <span></span>
                            </div>
                          </a>
                        </li>
                      </ul>

                      <a href="index.html" class="logo logo-dark">
                        <span class="logo-sm">
                          <img src="../assets/images/zebraweb/logo-zebraweb.png" alt="" />
                          <!-- <span class="logo-lg-text-light">UBold</span> -->
                        </span>
                        <span class="logo-lg">
                          <img src="../assets/images/zebraweb/logo-zebraweb.png" alt="" />
                          <!-- <span class="logo-lg-text-light">U</span> -->
                        </span>
                      </a>
    
                      <a href="index.html" class="logo logo-light">
                        <span class="logo-sm">
                          <img
                            src="../assets/images/zebraweb/logos/logo-zebraweb.png"
                            alt=""
                            height="22"
                          />
                        </span>
                        <span class="logo-lg">
                          <img
                            src="../assets/images/zebraweb/logos/logo-zebraweb.png"
                            alt=""
                            height="45"
                          />
                        </span>
                      </a>
                    </div>
                </div>

                <div class="topbar--nav">
                  <ul class="list-unstyled topnav-menu  topnav-menu-left m-0">

                      <li>
                        <a
                          class="nav-link mr-0 waves-effect waves-light"
            
                          href="#"
                          role="button"
                          aria-haspopup="false"
                          aria-expanded="false"
              
                        >
                          DASHBOARD
                        </a>
                      </li>

                      <li>
                        <a
                          class="nav-link dropdown mr-0 waves-effect waves-light"
            
                          href="./schedule - assignor.html"
                          role="button"
                          aria-haspopup="false"
                          aria-expanded="false"
                          data-target="soas-schedule"
                        >
                          SCHEDULE <i aria-hidden="true" class="fas fa-caret-down"></i>
                        </a>
                      </li>

                      <li>
                        <a
                          class="nav-link dropdown mr-0 waves-effect waves-light"
            
                          href="availability.html"
                          role="button"
                          aria-haspopup="false"
                          aria-expanded="false"
                          data-target="soas-availability"
                        >
                          AVAILABILITY <i aria-hidden="true" class="fas fa-caret-down"></i>
                        </a>
                      </li>

                      <li>
                        <a
                          class="nav-link dropdown mr-0 waves-effect waves-light"
            
                          href="./soas-team-view-table.html"
                          role="button"
                          aria-haspopup="false"
                          aria-expanded="false"
                          data-target="soas-assets"
                        >
                          ASSETS <i aria-hidden="true" class="fas fa-caret-down"></i>
                        </a>
                      </li>

                      <li>
                        <a
                          class="nav-link dropdown mr-0 waves-effect waves-light"
            
                          href="./soas-reporting.html"
                          role="button"
                          aria-haspopup="false"
                          aria-expanded="false" 
                          data-target="soas-reports"
                        >
                          REPORTS  <i aria-hidden="true" class="fas fa-caret-down"></i>
                        </a> 
                      </li>

                      <li>
                        <a
                          class="nav-link dropdown mr-0 waves-effect waves-light"
            
                          href="./soas-user-profile.html"
                          role="button"
                          aria-haspopup="false"
                          aria-expanded="false"
                          data-target="soas-settings"
                        >
                          SETTINGS <i aria-hidden="true" class="fas fa-caret-down"></i> 
                        </a>
                      </li>


                  </ul>

                </div>


    

                <div class="clearfix"></div>
              </div>

              <!-- Submenu Bars-->

                <!-- Schedule Submenu-->
                <nav id="soas-schedule" class="sub-menu sub-menu--zebraweb">
                    <ul>
                        <li><a href="#">Express Assign</a></li>
                        <li><a href="#">Auto Assign</a></li>
                        <li><a href="#">Self Assign</a></li>
                    </ul>
                </nav>

                <!-- Availability Submenu-->
                <nav id="soas-availability" class="sub-menu sub-menu--zebraweb">
                    <ul>
                        <li><a href="#">Officials Blocks</a></li>
                        <li><a href="#">Team Blocks</a></li>
                        <li><a href="#">Team Affiliation</a></li>
                    </ul>
                </nav>

                <!-- Assets Submenu-->
                <nav id="soas-assets" class="sub-menu sub-menu--zebraweb">
                    <ul>
                        <li><a href="#">Teams</a></li>
                        <li><a href="#">Locations</a></li>
                        <li><a href="#">Crew</a></li>
                        <li><a href="#">Game Type/League</a></li>
                        <li><a href="#">Users</a></li>
                        <li><a href="#">Position Mask</a></li>
                        <li><a href="#">Levels</a></li>
                    </ul>
                </nav>

                <!-- Reports Submenu-->
                <nav id="soas-reports" class="sub-menu sub-menu--zebraweb">
                    <ul>
                        <li><a href="#">General Reports</a></li>
                        <li><a href="#">Commissioners Reports</a></li>
                        <li><a href="#">Team Contracts</a></li>
                        <li><a href="#">Officials Ratings & Forms</a></li>
                    </ul>
                </nav>

                <!-- Settings Submenu-->
                <nav id="soas-settings" class="sub-menu sub-menu--zebraweb">
                    <ul>
                        <li><a href="#">General</a></li>
                        <li><a href="#">Welcome Announcement</a></li>
                        <li><a href="#">Email Settings</a></li>
                    </ul>
                </nav>

            </div>
            <!-- end Topbar -->




            <!-- Mobile Navigation -->
            <nav id="zw-mobile">
              <ul>
                  <li><a href="/">DASHBOARD</a></li>
                  <li><span>SCHEDULE</span>
                      <ul>
                        <li><a href="#">Express Assign</a></li>
                        <li><a href="#">Auto Assign</a></li>
                        <li><a href="#">Self Assign</a></li>
                    </ul>
                  </li>
                  <li><span>AVAILABILITY</span>
                    <ul>
                        <li><a href="#">Officials Blocks</a></li>
                        <li><a href="#">Team Blocks</a></li>
                        <li><a href="#">Team Affiliation</a></li>
                    </ul>
        
                  </li>
                  <li>
                    <span>ASSETS</span>
                    <ul>
                      <li><a href="#">Teams</a></li>
                      <li><a href="#">Locations</a></li>
                      <li><a href="#">Crew</a></li>
                      <li><a href="#">Game Type/League</a></li>
                      <li><a href="#">Users</a></li>
                      <li><a href="#">Position Mask</a></li>
                      <li><a href="#">Levels</a></li>
                  </ul>
      
      
                  </li>
                  <li>
                    <span>REPORTS</span>
                    <ul>
                      <li><a href="#">General Reports</a></li>
                      <li><a href="#">Commissioners Reports</a></li>
                      <li><a href="#">Team Contracts</a></li>
                      <li><a href="#">Officials Ratings & Forms</a></li>
                    </ul>
      
      
                  </li>
                  <li><span>SETTINGS</span>
                    <ul>
                      <li><a href="#">General</a></li>
                      <li><a href="#">Welcome Announcement</a></li>
                      <li><a href="#">Email Settings</a></li>
                  </ul>
                  </li>
              </ul>
            </nav>


        
            <!-- ============================================================== -->
            <!-- Start Page Content here -->
            <!-- ============================================================== -->

            <div id="left-modal" class="modal fade" tabindex="-1" role="dialog" aria-modal="true">
                <div class="slideout-modal modal-dialog modal-xl modal-left">
                    <div class="modal-content slideout-modal__content">
                        <div class="modal-header slideout-modal__header slideout-modal__header--small border-0">
                            <!-- Slideout Modal Top Nav -->
                            <div class="slideout-modal__top-nav">
                                <div class="float-right">
                                    <button class="btn btn-cancel" aria-label="close" data-dismiss="modal"><i class="fas fa-times"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="modal-body slideout-modal__body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <h3>1317670 - <span class="dropdown header-dropdown" style="display: inline-block;" >
                                                <span style="display: inline-block;" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Volleyball <i class="fas fa-caret-down"></i></span>
                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                    <a class="dropdown-item" href="#">Action</a>
                                                    <a class="dropdown-item" href="#">Another action</a>
                                                    <a class="dropdown-item" href="#">Something else here</a>
                                                </div>
                        
                                    </span>
                            
                                    </h3>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-sm-6">
                                    <a class="text-danger" href="#">Send Reminder to Team Users</a> 
                                </div>
                                <div class="col-sm-6 text-right">
                                    <a class="text-danger" href="#">Send Reminder to Official</a>
                                </div>
                            </div>

                            <hr>
                            <div class="row mt-2">
                                <div class="col-sm-6">
                                        <h3 class="section-title heading-underline">Game Details</h3>
                                </div>
                                <div class="col-sm-6 text-right pt-2">
                                    <div class="checkbox checkbox-primary mb-2">
                                        <input id="game-tbd-checkbox" type="checkbox">
                                        <label for="game-tbd-checkbox">
                                            Game TBD
                                        </label>
                                    </div>
                                </div>
                            </div>

                
                            <div class="row mt-2">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-2">
                                            <input id="officials-assignmyself-checkbox" type="checkbox">
                                            <label for="officials-assignmyself-checkbox">
                                                Officials "Assign Myself"
                                            </label>
                                        </div>
                                </div>
                            </div>
                        </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="officials-position">Game Date:*</label>
                                       <input type="date" class="form-control"/>
                                    </div>
                                </div>
                                 <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="officials-position">Game Time:*</label>
                                        <input type="time" class="form-control"/>
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-sm-12">
                                    <label for="officials-position">Game Duration:*</label>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                            
                                        <input type="number" class="form-control" name="game-hour">
                                        Hours
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                        
                                        <input type="number" class="form-control" name="game-hour">
                                        Minutes
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="officials-position">Home Team:*</label>
                                        <select class="form-control  mb-2" id="officials-position">
                                            <option>Select Team</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="officials-position">Visiting Team:*</label>
                                        <select class="form-control mb-2" id="officials-masked-position">
                                            <option>Select Team</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                    
                                    <div class="col-sm-6">
                                            <div class="form-group">
                                            <label for="officials-position">Location:</label>
                                            <select class="form-control  mb-2" id="officials-position">
                                                <option>Select Team</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </div>
                                    </div>
                
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="officials-position">Venue:</label>
                                        <select class="form-control mb-2" id="officials-masked-position">
                                            <option>Select Team</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                        <label for="officials-position">Game Type:</label>
                                        <input type="text" class="form-control">
                                        </div>
                                </div>
                            </div>


                            <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                        <label for="officials-position">Notes:</label>
                                        <textarea name="game-notes" id="game-notes"  class="form-control" rows="5"></textarea>
                                    </div>
                                </div>
                            </div> 


                            <div class="row mt-2">
                                <div class="col-sm-12">
                                    <label for="">Select Officials(s) Needed for this game (Check all that apply)</label>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="1_person_crew_checkbox" type="checkbox">
                                            <label for="1_person_crew_checkbox">
                                            1 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="2_person_crew_checkbox" type="checkbox">
                                            <label for="2_person_crew_checkbox">
                                            2 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="3_person_crew_checkbox" type="checkbox">
                                            <label for="3_person_crew_checkbox">
                                            3 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="4_person_crew_checkbox" type="checkbox">
                                            <label for="4_person_crew_checkbox">
                                            4 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="5_person_crew_checkbox" type="checkbox">
                                            <label for="5_person_crew_checkbox">
                                            5 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="6_person_crew_checkbox" type="checkbox">
                                            <label for="6_person_crew_checkbox">
                                            6 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="7_person_crew_checkbox" type="checkbox">
                                            <label for="7_person_crew_checkbox">
                                            7 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="8_person_crew_checkbox" type="checkbox">
                                            <label for="8_person_crew_checkbox">
                                            8 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="9_person_crew_checkbox" type="checkbox">
                                            <label for="9_person_crew_checkbox">
                                            9 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="10_person_crew_checkbox" type="checkbox">
                                            <label for="10_person_crew_checkbox">
                                            10 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="11_person_crew_checkbox" type="checkbox">
                                            <label for="11_person_crew_checkbox">
                                            11 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="12_person_crew_checkbox" type="checkbox">
                                            <label for="12_person_crew_checkbox">
                                            12 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                            </div>


                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="13_person_crew_checkbox" type="checkbox">
                                            <label for="13_person_crew_checkbox">
                                            13 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="14_person_crew_checkbox" type="checkbox">
                                            <label for="14_person_crew_checkbox">
                                            14 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="15_person_crew_checkbox" type="checkbox">
                                            <label for="15_person_crew_checkbox">
                                            15 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="16_person_crew_checkbox" type="checkbox">
                                            <label for="16_person_crew_checkbox">
                                            16 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="17_person_crew_checkbox" type="checkbox">
                                            <label for="17_person_crew_checkbox">
                                            17 Person Crew
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                                 <div class="col-sm-4">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-primary mb-1">
                                            <input id="observer_person_crew_checkbox" type="checkbox">
                                            <label for="observer_person_crew_checkbox">
                                            Observer
                                            </label>
                                        </div>
                                    </div>
                                 </div>
                            </div>

    
                            <div class="row mt-2">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                    <label for="officials-position">Reason for Change:</label>
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                <label for="officials-position">Notes:</label>
                                <textarea name="game-notes" id="game-notes"  class="form-control" rows="5"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <div class="checkbox checkbox-primary mb-5">
                                    <input id="reaccept-checkbox" type="checkbox">
                                    <label for="reaccept-checkbox">
                                        Set Officials to re-accept when box checked and game intormation changes
                                    </label>
                                </div>
                        </div>
                    </div>
                </div>


        


               
                
                
          
                
      

            
                        </div>

                        <div class="slideout-modal__footer">
                            <div class="btn btn-block btn-primary slideout-modal__footer-button">
                                    Save Changes
                            </div>

                        </div> 
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>

            <div id="block-details-slideout" class="modal fade" tabindex="-1" role="dialog" aria-modal="true">
                <div class="slideout-modal modal-dialog modal-xl modal-right">
                    <div class="modal-content slideout-modal__content">
                        <div class="modal-header slideout-modal__header slideout-modal__header--small border-0">
                            <!-- Slideout Modal Top Nav -->
                            <div class="slideout-modal__top-nav">
                                <div class="float-right">
                                    <button class="btn btn-cancel" aria-label="close" data-dismiss="modal"><i class="fas fa-times"></i></button>
                                </div>
                            </div>
                        </div>
                        <div id="add-block" class="modal-body slideout-modal__body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <h3> Full Block </h3>
                                </div>
                            </div>
                            <div class="mt-3 mb-3">
                                <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#edit-block-slideout" data-backdrop="static" data-keyboard="false">Edit Block</button>
                                <button class="btn btn-sm btn-danger float-right" data-toggle="modal" data-target="#remove-block-slideout" data-backdrop="static" data-keyboard="false">Remove Block</button>
                            </div>
                            <hr>

                        <h3 class="section-title heading-underline">Block Details</h3>
                        <div class="row mt-2 mb-2">
                            <div class="col-sm-6">
                                <div class="game-details">
                                    <i class="far fa-calendar-alt"></i> <p>Tuesday, June 2nd 2021   5:00 PM - 7:00 PM</p>
                                </div>
                                <div class="game-details">
                                    <i class="far fa-clock"></i> <p>All Day</p>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="game-details">
                                    <p><b>BY:</b></p> <p>John Doe, on May 30th 2021</p>
                                </div>
                                <div class="game-details">
                                    <p><b>NOTES:</b></p> <p>Notes</p>
                                </div>
                            </div>
                        </div>
            
                        <h3 class="section-title heading-underline">Blocked Associations</h3>
                        <div id="block-associations" class="col-lg-12">
                            <hr style="border: 1px solid #E0E0E0; margin: 0;">
                            <ul class="associations-list">
                                 <li>ZebraWeb Association 1 Big East NCAA </li>
                                 <li>ZebraWeb Association 2 Big East NCAA  </li>
                                 <li>ZebraWeb Association 3 Big East NCAA  </li>
                                 <li>ZebraWeb Association 4 Big East NCAA  </li>
                                 <li>ZebraWeb Association 5 Big East NCAA  </li>
                                 <li>ZebraWeb Association 6 Big East NCAA  </li>
                                 <li>ZebraWeb Association 7 Big East NCAA  </li>
                                 <li>ZebraWeb Association 8 Big East NCAA  </li>
                                 <li>ZebraWeb Association 9 Big East NCAA  </li>
                                 <li>ZebraWeb Association 10 Big East NCAA  </li>
                                 <li>ZebraWeb Association 11 Big East NCAA  </li>
                                 <li>ZebraWeb Association 12 Big East NCAA  </li>
                                 <li>ZebraWeb Association 13 Big East NCAA  </li>
                                 <li>ZebraWeb Association 14 Big East NCAA  </li>
                                 <li>ZebraWeb Association 15 Big East NCAA  </li>
                                 <li>ZebraWeb Association 16 Big East NCAA  </li>
                            </ul>
                            <hr style="border: 1px solid #E0E0E0; margin: 0;">
                        </div>

                   </div>

        
                   </div>


                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->



            <div id="edit-block-slideout" class="modal fade" tabindex="-1" role="dialog" aria-modal="true">
                <div class="slideout-modal modal-dialog modal-xl modal-right">
                    <div class="modal-content slideout-modal__content">
                        <div class="modal-header slideout-modal__header slideout-modal__header--small border-0">
                            <!-- Slideout Modal Top Nav -->
                            <div class="slideout-modal__top-nav">
                                <div class="float-right">
                                    <button class="btn btn-cancel" aria-label="close" data-dismiss="modal"><i class="fas fa-times"></i></button>
                                </div>
                            </div>
                        </div>
                        <div id="add-block" class="modal-body slideout-modal__body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <h3> Edit Block </h3>
                                </div>
                            </div>
                            <hr>


                            <div class="row mt-2">
                                <div class="col-sm-6">
                                        <h3 class="section-title heading-underline">Block Details</h3>
                                </div>
                            </div>

                            <div class="col-lg-12 mt-3">
                                <label for="block-time-type">Select Time:</label>
                            </div>
                                <div id="block-time-picker" class="row">
                                    <div class="col-lg-3">
                                        <select class="form-control" id="block-time-type">
                                            <option >Date</option>
                                            <option selected class="filter--default">Date Range</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-4">
                                        <input type="date" class="form-control" id="block-time" default="today"> </input>
                                    </div>
                                    <div class="col-lg-1">
                                        <label>TO</label>
                                    </div>
                                    <div class="col-lg-4">
                                        <input type="date" class="form-control" id="block-time-range" default="tomorrow"> </input>
                                    </div>
                                </div>

                            <div class="col-lg-12 mt-3">
                                <label for="block-type-picker" class="mt-2">Select Block Type: *</label>
                            </div>
                                <div id="block-type-picker" class="row">
                                    <div class="col-lg-12">
                                        <select class="form-control" id="block-type">
                                            <!-- <option selected class="filter--default">Select Block Type</option> -->
                                            <option>Full Block</option>
                                            <option selected class="filter--default">Partial Block</option>
                                            <option>Game Block</option>
                                        </select>
                                    </div>

                                    <div class="col-lg-6 mt-2">
                                        <label>Block Start:</label>
                                        <input class="form-control" type="time" default="12"></input>
                                    </div>
                        
                                    <div class="col-lg-6 mt-2">
                                        <label>Block End:</label>
                                        <input class="form-control" type="time" default="12"></input>
                                    </div>
                                </div>


                                <div id="block-reason" class="col-lg-12 mt-3">
                                    <label for="block-reason-field">Reason(s) for Block:</label>
                                    <textarea name="block-reason" id="block-reason" class="form-control" rows="5"></textarea>
                                </div>

                                <div id="block-associations" class="col-lg-12 mt-3">
                                    <label>Block Associations:</label>
                                    <a href="#"><label style="float: right;">Select All <i class="fas fa-toggle-on float-right"></i></label></a>
                                    <hr style="border: 1px solid #E0E0E0; margin: 0;">
                                    <ul class="associations-list">
                                        <li>ZebraWeb Association 1 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 2 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 3 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 4 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 5 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 6 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 7 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 8 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 9 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 10 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 11 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 12 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 13 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 14 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 15 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 16 Big East NCAA <i class="fas fa-toggle-on float-right"></i></li>
                                        <li>ZebraWeb Association 17 Big East NCAA <i class="fas fa-toggle-off float-right"></i></li>
                                        <li>ZebraWeb Association 18 Big East NCAA <i class="fas fa-toggle-off float-right"></i></li>
                                        <li>ZebraWeb Association 19 Big East NCAA <i class="fas fa-toggle-off float-right"></i></li>
                                        <li>ZebraWeb Association 20 Big East NCAA <i class="fas fa-toggle-off float-right"></i></li>
                                    </ul>
                                </div>

        
            
                        </div>

                        <div class="slideout-modal__footer">
                            <div class="btn btn-block btn-primary slideout-modal__footer-button">
                                    Save Changes
                            </div>

                        </div> 
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>

            <div id="game-history-report" class="modal enable-exit-click fade" tabindex="-1" role="dialog" aria-modal="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content " style="padding: 10px;">
                        <div class="modal-header border-0 mt-2 mb-2 text-center">
                            <h2 class="heading-underline">Game History Report</h2>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                        </div>



                        <div class="modal-body slideout-modal__body scroll">



                            <div class="d-flex flex-row game-detail-row pb-1">
            
                                <div>
                                    <div class="game-detail-row__block">
                                        <span class="game-detail-row__label"><i class="far fa-calendar-alt"></i></span>
                                        <span class="game-detail-row__content">Tuesday, June 1st 2012 <br>
                                            1:00 - 2:30pm    
                                        </span>
                                    </div> 
                                </div>
                                <div> 
                                    <div class="game-detail-row__block">
                                        <span class="game-detail-row__label">Home</span> 
                                        <span class="game-detail-row__content">Varsity Middle School</span>
                                    </div>
                                    <div class="game-detail-row__block">
                                        <span class="game-detail-row__label">Visiting</span>
                                        <span class="game-detail-row__content">DeMasi Middle School</span>
                                    </div>
                                </div>
                                <div>
                                    <div class="game-detail-row__block">
                                        <span class="game-detail-row__label"><i class="fas fa-trophy"></i></span>
                                        <span class="game-detail-row__content">Competitive Volleyball
                                            League</span>
                                    </div>
                                    <div class="game-detail-row__block">
                                        <span class="game-detail-row__label">Status</span>
                                        <span class="game-detail-row__content">Released</span> 
                                    </div>
                                </div>
                                <div>
                                    <div class="game-detail-row__block">
                                        <span class="game-detail-row__label"><i class="fas fa-map-marker-alt"></i></span>
                                        <span class="game-detail-row__content">Varsity Middle School
                                            North Gymnasium</span>
                                    </div>
                       
                                </div>
                            </div>



                                <h4>Current Officials</h4>

                                <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                                    <thead>
                                        <tr>
                            
                                            <th>Officials</th>
                                            <th>Position</th>
                                
                           
                                            <th>Assigned</th>
                
    
                                        </tr>
                                    </thead>
                                    <tbody>

                                        <tr>
                    
                                            <td>Boohar, Bill</td>
                                            <td>
                                                   Referee
                                            </td>
                                            <td>10/28/2020 2.05.56 PM</td>
                                
                                        </tr>
                                        <tr>
                    
                                            <td>Boohar, Bill</td>
                                            <td>
                                                   Referee
                                            </td>
                                            <td>10/28/2020 2.05.56 PM</td>
                                
                                        </tr>
                                        <tr>
                    
                                            <td>Boohar, Bill</td>
                                            <td>
                                                   Referee
                                            </td>
                                            <td>10/28/2020 2.05.56 PM</td>
                                
                                        </tr>

                                    </tbody>
                                    </table>


                                <h4>Assignment History (tracked as of 5/17/2012)</h4>

                                <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                                    <thead>
                                        <tr>
                            
                                            <th>Officials</th>
                                            <th>Position</th>
                                
                                            <th>Action</th>
                                            <th>Date of Action:</th>
                                            <th>By:</th>
    
                                        </tr>
                                    </thead>
                                    <tbody>

                                        <tr>
                    
                                            <td>Boohar, Bill</td>
                                            <td>
                                                   Referee
                                            </td>
                                            <td>Assigned: 10/28/2020 2.05.56 PM</td>
                                            <td>10/28/2020 2:05:56PM</td>
                                            <td>Boohar, Bill</td>
                                
                                        </tr>
                                        <tr>
                    
                                            <td>Boohar, Bill</td>
                                            <td>
                                                   Referee
                                            </td>
                                            <td>Assigned: 10/28/2020 2.05.56 PM</td>
                                            <td>10/28/2020 2:05:56PM</td>
                                            <td>Boohar, Bill</td>
                                
                                        </tr>
                                        <tr>
                    
                                            <td>Boohar, Bill</td>
                                            <td>
                                                   Referee
                                            </td>
                                            <td>Assigned: 10/28/2020 2.05.56 PM</td>
                                            <td>10/28/2020 2:05:56PM</td>
                                            <td>Boohar, Bill</td>
                                
                                        </tr>
                                    </tbody>
                                </table>


                                <h4>Game Information Changes</h4>

                                <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                                    <thead>
                                        <tr>
                            
                                            <th>Date Changed</th>
                                            <th>What Changed</th>
                                
                                            <th>Who Changed It</th>
                                            <th>Reason</th>
                                            <th>Comments</th>
    
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>10/28/2020 2.05.56 PM</td>
                                            <td>
                                                   Referee
                                            </td>
                                            <td>Boohar, Bill</td>
                                            <td></td>
                                            <td></td>
                                
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="slideout-modal__footer text-center">
                                <div class="btn btn-block btn-primary waves-effect slideout-modal__footer-button" data-dismiss="modal" aria-hidden="true">
                                        Ok
                                </div>

                        </div> 

            

                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->

            <div id="gameskin" class="modal fade" tabindex="-1" role="dialog" aria-modal="true">
                <div class="slideout-modal modal-dialog modal-xl modal-left"> 
                        <div class="modal-content slideout-modal__content">
                                <div class="modal-header slideout-modal__header slideout-modal__header--small border-0">

                                        <!-- Slideout Modal Top Nav -->
                                    <div class="slideout-modal__top-nav">
                                        <div class="float-right">
                                            <button class="btn btn-cancel" aria-label="close" data-dismiss="modal"><i class="fas fa-times"></i></button>
                                        </div>
                                    </div>

                                    <div class="slideout-modal__section">
                                        <div class="row mb-2">
                                            <div class="col-sm-12">
                                                <h3>Game #1317670</h3>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <button class="btn btn-block btn-primary" data-toggle="modal" data-target="#game-accept-modal" data-backdrop="static" data-keyboard="false">Accept Assignment</button>
                                            </div>
                                            <div class="col-sm-6">
                                                <button class="btn btn-block btn-danger float-right" data-toggle="modal" data-target="#game-decline-modal" data-backdrop="static" data-keyboard="false">Decline Assignment</button>
                                            </div>

                                        </div>
                                    </div>
                          
        
                   
                                </div>

                
                    <div class="modal-body slideout-modal__body scroll">

      
                           

                        <div class="row slideout-modal__official-additional-info">
                            <div class="col-sm-6">
                                <div><h5 class="mb-2">HOME TEAM</h5></div>
                                    <div class="slideout-modal__official-avatar"> </div>
                                <div><p>Villanova University</p></div>
                            </div>  
                            <div class="col-sm-6">
                                <div><h5 class="mb-2">VISITING TEAM</h5></div>
                                    <div class="slideout-modal__official-avatar"> </div>
                                <div><p>Altona University</p></div>
                            </div>  
                        </div>

                        <div class="mt-2 mb-2">
                            <div class="col-sm-6">
                                    <h3 class="section-title heading-underline">Game Details</h3>
                            </div>
                                <div class="game-details">
                                    <i class="far fa-calendar-alt"></i> <p>Tuesday, June 2nd 2021   5:00 PM - 7:00 PM</p>
                                </div>
                                <div class="game-details">
                                    <i class="fas fa-map-marker-alt"></i> <a href="#location"><p>Villanova Middle School</a></p>
                                </div>
                                <div class="game-details">
                                    <i class="fas fa-volleyball-ball"></i> <p>Volleyball</p>
                                </div>
                                <div class="game-details">
                                    <i class="fas fa-trophy"></i> <p>Competitive Volleyball League</p>
                                </div>
                                <div class="game-details">
                                    <p><b>LEVEL:</b></p> <p>Varsity</p>
                                </div>
                                <div class="game-details">
                                    <p><b>VENUE:</b></p> <p>Varsity Middle School Gymnasium</p>
                                </div>
                                <div class="game-details">
                                    <p><b>NOTES:</b></p> <p>varsity/JV</p>
                                </div>
                        </div>
            
                        <h3 class="section-title heading-underline">Location</h3>
                        <div class="location">
                            <a href="">100 Street Road, New Hope, PA 18938</a>
                            <span class="float-right">Open Google Maps to View Directions</span>
                            <iframe 
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5228.730934342875!2d-74.96618815347617!3d40.31123166752181!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c3fff48508dddb%3A0xffc21ca3e09e2ac4!2s100%20Street%20Rd%2C%20New%20Hope%2C%20PA%2018938!5e0!3m2!1sen!2sus!4v1618512446159!5m2!1sen!2sus" 
                                class="mt-2"
                                width="100%"
                                height="275px"
                                style="border:0;" 
                                allowfullscreen>
                            </iframe>
                        </div>

                        <h3 class="section-title heading-underline mt-4">Game Contacts</h3>
                            <div class="row">
                                <div class="game-details game-details--column  col-lg-6">
                                   <h6>VENUE NAME:</h6> <p>Varsity Middle School Gymnasium</p>
                                </div>
                                <div class="game-details game-details--column col-lg-6">
                                    <h6>VENUE PHONE:</h6> <p>243-542-3254</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="game-details game-details--column col-lg-6">
                                    <h6>ATHLETIC DIRECTOR:</h6> <p>Joe Schmoe</p>
                                </div>
                                <div class="game-details game-details--column col-lg-6">
                                    <h6>A.D. PHONE:</h6> <p>432-545-3234</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="game-details game-details--column col-lg-6">
                                    <h6>ALT. CONTACT:</h6> <p>Other Joe</p>
                                </div>
                                <div class="game-details game-details--column col-lg-6">
                                    <h6>ALT. PHONE:</h6> <p>432-576-8953</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="game-details game-details--column col-lg-6">
                                    <h6>HOME TEAM CONTACT:</h6> <p>John Doe</p>
                                </div>
                                <div class="game-details game-details--column col-lg-6">
                                    <h6>HOME TEAM PHONE:</h6> <p>243-542-2346</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="game-details game-details--column col-lg-6">
                                    <h6>VISITOR TEAM CONTACT:</h6> <p>Other John</p>
                                </div>
                                <div class="game-details game-details--column col-lg-6">
                                    <h6>VISITOR TEAM PHONE:</h6> <p>222-645-6732</p>
                                </div>
                            </div>

                        <h3 class="section-title heading-underline">Officials (6/6 Assigned)</h3>
                        <div class="official-assigned__panel">
                                <div class="row">
                                    <div class="col-6 official-assigned">
                                        <div class="official-assigned--profile"></div>
                                        <div class="offical-assigned__details">
                                            <p class="official-assigned--name">John Doe</p>
                                            <p class="official-assigned--position">Referee</p>
                                            <p class="official-assigned--status-accepted">Accepted</p>
                                        </div>
                                    </div>

                                    <div class="col-6 official-assigned">
                                        <div class="official-assigned--profile"></div>
                                        <div class="offical-assigned__details">
                                            <p class="official-assigned--name">John Doe</p>
                                            <p class="official-assigned--position">Referee</p>
                                            <p class="official-assigned--status-accepted">Accepted</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-6 official-assigned">
                                        <div class="official-assigned--profile"></div>
                                        <div class="offical-assigned__details">
                                            <p class="official-assigned--name">John Doe</p>
                                            <p class="official-assigned--position">Referee</p>
                                            <p class="official-assigned--status-accepted">Accepted</p>
                                        </div>
                                    </div>

                                    <div class="col-6 official-assigned">
                                        <div class="official-assigned--profile"></div>
                                        <div class="offical-assigned__details">
                                            <p class="official-assigned--name">John Doe</p>
                                            <p class="official-assigned--position">Referee</p>
                                            <p class="official-assigned--status-accepted">Accepted</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-6 official-assigned">
                                        <div class="official-assigned--profile"></div>
                                        <div class="offical-assigned__details">
                                            <p class="official-assigned--name">John Doe</p>
                                            <p class="official-assigned--position">Referee</p>
                                            <p class="official-assigned--status-accepted">Accepted</p>
                                        </div>
                                    </div>

                                    <div class="col-6 official-assigned">
                                        <div class="official-assigned--profile"></div>
                                        <div class="offical-assigned__details">
                                            <p class="official-assigned--name">John Doe</p>
                                            <p class="official-assigned--position">Referee</p>
                                            <p class="official-assigned--status-accepted">Accepted</p>
                                        </div>
                                    </div>
                                </div>
                        </div>

                   </div>

        
                   </div>


                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->



            


            <div class="content-page">
                <div class="content">

                    <!-- Start Content-->
                    <div class="container-fluid">
                        
                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box">
                                    
                                    <div class="page-title-right inline">
                                        <div>
                                            <label for="availability-picker">View Availability For:</label>
                                        </div>
                                        <div class="pr-2 ml-2" style="min-width: 200px;">
                                            <select class="form-control" id="availability-picker">
                                                <option selected class="filter--default">John Doe (You)</option>
                                                <option value="">Official 1</option>
                                                <option value="">Official 2</option>
                                                <option value="">Official 3</option>
                                                <option value="">Official 4</option>
                                                <option value="">Official 5</option>
                                                <option value="">Official 6</option>
                                                <option value="">Official 7</option>
                                                <option value="">Official 8</option>
                                                <option value="">Official 9</option>
                                                <option value="">Official 9</option>
                                                <option value="">Official 10</option>
                                                <option value="">Official 11</option>
                                                <option value="">Official 12</option>
                                            </select>
                                        </div>
                                    </div>

                                     <h2 class="page-title"> <a href="index-dashboard.html" class="btn btn-cancel"><i class="fas fa-angle-left"></i></a> My Availability</h2>
                                </div>
                                <p>Click on a date to edit availability on that day. Double click to open an overview of a day's assignments. 
                                    Use the arrows to navigate through different months on the calendar.</p>
                            </div>
                        </div>     
                        <!-- end page title -->


                        <div class="card">
                            <div class="card-body" style="height: 80%;">

                            <div class="row">

                                <div class="col-lg-6">

                                    <!-- 
                                        Calendar View is toggleable from List View and vise versa

                                        if #block-calendar-view = active {display:}

                                    <div id="block-calendar-view">
                                        include('./partials/calendar/calendar.html')
                                        <div class="table-view-buttons">
                                            <a href="" class="btn btn-secondary">List View</a>
                                            <a href="" class="btn btn-primary">Export Calendar</a>
                                        </div>
                                    </div> 


                                    -->

                                    <!-- if #block-list-view = active {display:}-->

                                    <!-- <div id="block-calendar-view">
                                    include('.partials/blocks/block-list-view.html')
                                    </div> -->

                                        <div id="block-list-view">
                                            <h3> <a href="" class="btn btn-cancel"><i class="fas fa-angle-left"></i></a> Blocks for June 1st, 2021</h3>
                                            <table id="basicDatatable" class="table dt-responsive nowrap w-100">
                                                        <!-- Table Head -->
                                                                <thead>
                                                                    <tr>
                                                                        <th data-priority="1">Details</th>
                                                                        <th data-priority="1">Association</th>
                                                                        <th data-priority="2">Start</th>
                                                                        <th data-priority="2">End</th>
                                                                        <th data-priority="1">Status</th>
                                                                        <th></th>
                                                                    </tr>
                                                                </thead>
                                                    <!-- Table Body -->
                                                    <tbody> 
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 1 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td><a data-toggle="modal" data-target="#edit-block-slideout" data-backdrop="static" data-keyboard="false"><i class="fas fa-ellipsis-v"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 2 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 3 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 4 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 5 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 6 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 7 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 8 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 9 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 10 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 11 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 12 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 13 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 14 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 15 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Full Block</u></a></td>
                                                            <td>ZebraWeb Association 16 Big East NCAA</td>
                                                                        
                                                            <td colspan="2">------ All Day ------</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                        
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#gameskin" data-backdrop="static" data-keyboard="false"><u>#2391242</u></a></td>
                                                            <td>ZebraWeb Association 17 Big East NCAA</td>
                                                            <td>10:00 AM</td>         
                                                            <td>12:00 PM</td>
                                                            <td><div class="status status--green">Accepted</div></td>
                                                            <td><a data-toggle="modal" data-target="#edit-block-slideout" data-backdrop="static" data-keyboard="false"><i class="fas fa-ellipsis-v"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#gameskin" data-backdrop="static" data-keyboard="false"><u>#2391242</u></a></td>
                                                            <td>ZebraWeb Association 18 Big East NCAA</td>
                                                            <td>10:00 AM</td>         
                                                            <td>12:00 PM</td>
                                                            <td><div class="status status--green">Accepted</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#gameskin" data-backdrop="static" data-keyboard="false"><u>#2391242</u></a></td>
                                                            <td>ZebraWeb Association 19 Big East NCAA</td>
                                                            <td>10:00 AM</td>         
                                                            <td>12:00 PM</td>
                                                            <td><div class="status status--green">Accepted</div></td>
                                                            <td></td>
                                                        </tr>
                                        
                                        
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Partial Block</u></a></td>
                                                            <td>ZebraWeb Association 17 Big East NCAA</td>
                                                            <td>1:00 PM</td>         
                                                            <td>2:00 PM</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td><a data-toggle="modal" data-target="#edit-block-slideout" data-backdrop="static" data-keyboard="false"><i class="fas fa-ellipsis-v"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Partial Block</u></a></td>
                                                            <td>ZebraWeb Association 18 Big East NCAA</td>
                                                            <td>1:00 PM</td>         
                                                            <td>2:00 PM</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#block-details-slideout" data-backdrop="static" data-keyboard="false"><u>Partial Block</u></a></td>
                                                            <td>ZebraWeb Association 19 Big East NCAA</td>
                                                            <td>1:00 PM</td>         
                                                            <td>2:00 PM</td>
                                                            <td><div class="status status--red">Blocked</div></td>
                                                            <td></td>
                                                        </tr>
                                        
                                        
                                                        <tr>
                                                            <td><a data-toggle="modal" data-target="#gameskin" data-backdrop="static" data-keyboard="false"><u>#3290124</u></a></td>
                                                            <td>ZebraWeb Association 17 Big East NCAA</td>
                                                            <td>3:00 PM</td>         
                                                            <td>5:00 PM</td>
                                                            <td><div class="status status--yellow">Pending</div></td>
                                                            <td><a data-toggle="modal" data-target="#edit-block-slideout" data-backdrop="static" data-keyboard="false"><i class="fas fa-ellipsis-v"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <span class="conflict"><i class="fas fa-exclamation"></i>
                                                                    <span class="conflict-text">
                                                                        Conflict with Game #1253634.
                                                                    </span> 
                                                                </span>
                                                                <a data-toggle="modal" data-target="#gameskin" data-backdrop="static" data-keyboard="false"><u>#3290124</u></a></td>
                                                            <td>ZebraWeb Association 18 Big East NCAA</td>
                                                            <td>3:00 PM</td>         
                                                            <td>5:00 PM</td>
                                                            <td><div class="status status--yellow">Pending</div></td>
                                                            <td><a data-toggle="modal" data-target="#edit-block-slideout" data-backdrop="static" data-keyboard="false"><i class="fas fa-ellipsis-v"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <span class="conflict"><i class="fas fa-exclamation"></i>
                                                                    <span class="conflict-text">
                                                                        Conflict with Game #3290124.
                                                                    </span> 
                                                                </span>
                                                                <a data-toggle="modal" data-target="#gameskin" data-backdrop="static" data-keyboard="false"><u>#1253634</u></a></td>
                                                            <td>ZebraWeb Association 20 Big East NCAA</td>
                                                            <td>3:00 PM</td>         
                                                            <td>5:00 PM</td>
                                                            <td><div class="status status--yellow">Pending</div></td>
                                                            <td><a data-toggle="modal" data-target="#edit-block-slideout" data-backdrop="static" data-keyboard="false"><i class="fas fa-ellipsis-v"></i></a></td>
                                                        </tr>
                                        
                                        
                                                    </tbody>
                                                </table>
                                        </div>
                                        <div class="table-view-buttons">
                                            <a href="" class="btn btn-secondary">Calendar View</a>
                                            <a href="" class="btn btn-primary">Export List</a>
                                        </div>


                                </div>

                                <div id="add-block" class="col-lg-6">
                                    
                                            <div class="page-title-box mb-3"> 
                                               <h4>Add Blocked Time</h4>
                                            </div>

                                            <div class="col-lg-11 inline"><label for="new-block-time">Select Time: *</label>
                                                <p class="form-information float-right">Please select the week day(s) you wish to apply blocks to when selecting Date Range:</p>
                                            </div>
                                            <div id="block-time-picker" class="row">

                                            <div class="col-lg-2">
                                                <select class="form-control" id="new-block-time">
                                                    <option selected value="range" class="filter--default">Date Range</option>
                                                    <option value="day">Day</option>
                                                </select>
                                            </div>
                                            <div class="col-lg-3">
                                                <input type="date" class="form-control" id="block-time" default="today"> </input>
                                            </div>
                                            <label>TO</label>
                                            <div class="col-lg-3">
                                                <input type="date" class="form-control" id="block-time-range" default="tomorrow"> </input>
                                            </div>
                                            <div class="col-lg-3">
                                                <select class="form-control" id="range-day-picker">
                                                    <option selected class="filter--default">Select Days to Change</option>
                                                    <option value="sunday">Sunday</option>
                                                    <option value="monday">Monday</option>
                                                    <option value="tuesday">Tuesday</option>
                                                    <option value="wednesday">Wednesday</option>
                                                    <option value="thursday">Thursday</option>
                                                    <option value="friday">Friday</option>
                                                    <option value="saturday">Saturday</option>
                                                </select>
                                                
                                            </div> 


                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-lg-12"></div>
                                        </div>

                                        <div class="col-lg-12 mt-3"><label for="new-block-type">Select Block Type: *</label></div>
                                        <div id="new-block-type" class="row">
                                            <div class="col-lg-3"style="min-width:300px">
                                                <select class="form-control" id="block-type" default="Select Block Type">
                                                    <!-- <option selected class="filter--default">Select Block Type</option> -->
                                                    <option>Partial Block</option>
                                                    <option>Full Block</option>
                                                    <option>Game Block</option>
                                                </select>
                                            </div>

                                            <!-- If Partial Block is Selected, display: -->
                                                <div class="col-lg-3">
                                                    <input id="partial-block_date-range-1" class="form-control" type="time" default="12"></input>
                                                </div>
                                               <div> <label>TO</label> </div>
                                                <div class="col-lg-3">
                                                    <input id="partial-block_date-range-2" class="form-control" type="time" default="12"></input>
                                                </div>
                                            </div>

                                        <!-- If Full Block is Selected, display: none; -->

                                         <!-- If Game Block is Selected, display:
                                         <div id="partial-block_date-range">
                                            <div class="col-lg-6">
                                                <input class="form-control" type="search">Search GameID, Date, Time, Team(s)</input>
                                            </div>
                                        </div>
                                    </div>
                                    -->


                                        <div class="row">
                                            <div class="col-lg-12"></div>
                                        </div>

                                        <div class="row mt-3">
                                            <div id="new-block-reason-field" class="col-lg-6">
                                                <label for="new-block-reason">Reason(s) for Block: *</label>
                                                <textarea name="new-block-reason" id="new-block-reason" class="form-control" rows="10"></textarea>
                                                <button class="btn btn-block btn-primary mt-3">Save Block</button>
                                            </div>

                                            <div id="block-associations" class="col-lg-6">
                                                <label for="block-associations">Block Associations: *</label>
                                                <span class="float-right">Select All <a><i class="fas fa-toggle-off float-right"></i></a></span></label>
                                                <hr style="border: 1px solid #E0E0E0; margin: 0;">
                                                <ul>
                                                    <li>ZebraWeb Association 1 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 2 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 3 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 4 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 5 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 6 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 7 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 8 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 9 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 10 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 11 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 12 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 13 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 14 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 15 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 16 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 17 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 18 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 19 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                    <li>ZebraWeb Association 20 Big East NCAA <a><i class="fas fa-toggle-off float-right"></i></a></li>
                                                </ul>
                                                <hr style="border: 1px solid #E0E0E0; margin: 0;">
                                            </div>
                                        </div>

                                </div>

                            </div> 

                            </div>
                        </div>
                    </div>

                        <div class="row">
                            <div class="col-lg-12">

                            </div>

                        </div>
                        <!-- end row -->
                           
                        <div class="row">
                            <div class="col-xl-12">
                               
                            </div> <!-- end col -->

                          
                        </div>
                        <!-- end row -->
                        
                    </div> <!-- container -->

                </div> <!-- content -->

            </div>

            <!-- ============================================================== -->
            <!-- End Page content -->
            <!-- ============================================================== -->


        </div>
        <!-- END wrapper -->

        <!-- Vendor js -->
        <script src="../assets/js/vendor.min.js"></script>

         <!-- third party js -->
         <script src="../assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
         <script src="../assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>

         <script src="../assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
         <script src="../assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
         <script src="../assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
         <script src="../assets/libs/mohithg-switchery/switchery.min.js"></script>

        <!-- Plugins js-->
        <script src="../assets/libs/flatpickr/flatpickr.min.js"></script>
        <script src="../assets/libs/apexcharts/apexcharts.min.js"></script>

        <script src="../assets/libs/selectize/js/standalone/selectize.min.js"></script>

        <!-- Datatables init -->
        <script src="../assets/js/pages/datatables.init.js"></script>

        <!-- Select js-->
        <script src="../assets/libs/select2/js/select2.min.js"></script>

        <!-- mmenu js-->
        <script src="  ../assets/libs/mmenu-js/mmenu.js"></script>

        <!-- Sweet Alerts js-->
        <script src=" ../assets/libs/sweetalert2/sweetalert2.all.min.js"></script>
    
        <!-- App js-->
        <script src="../assets/js/app.min.js"></script>

        <script src="../assets/js/pages/nav-dropdown.js"></script>
<!-- Mobile Menu JS -->
        <script src="../assets/js/zw.moblie-menu.js"></script>
        
    
        <script>
        
            //var init = new Switchery(elem, {color: '#7c8bc7', size: 'small' }); 

            $(function() {


                
                // ------------------------------------------------------- //
                // Datatable 
                // ------------------------------------------------------ //
                $('#basicDatatable').DataTable(); 


                $('.assign-by-crew-toggle').click(function(){
                    $('.assign-by-crew').toggleClass('d-none');
                })

                // ------------------------------------------------------- //
                // Select 2 
                // ------------------------------------------------------ //
                $('.select2').select2({
                    allowClear: true
                })





                // ------------------------------------------------------- //
                // Multi Level dropdowns
                // ------------------------------------------------------ //
                $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
                    event.preventDefault();
                    event.stopPropagation();

                    $(this).siblings().toggleClass("show");


                    if (!$(this).next().hasClass('show')) {
                    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
                    }
                    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
                    $('.dropdown-submenu .show').removeClass("show"); 
                    });

                });

                //Remove Modal Backdrop 
                $('.modal').on('shown.bs.modal', function () {
                    $(".modal-backdrop.in").hide();
                });

                $('#bypass-filters').select2({
                    placeholder: 'Filter Milage or Classifaction',
                    maximumSelectionLength: 2
                });
        }); 

        </script>
        
    </body>
</html>