{#
/**
 * @file
 *
 * @deprecated and will be removed in next release.
 * Please use templates from Openy Repeat module.
 *
 * Available variables:
 * - inheirted from 'openy-repeat-schedule-dashboard.html.twig'.
 */
#}

<div class="navbar navbar-default">
  <div class="navbar-header">

    <div class="navbar-controls d-none d-xl-flex d-lg-flex">
      <span class="navbar-controls__title">
        {{ 'Filters'|t }}
      </span>
      <a class="clear-filters" v-on:click="clearFilters()">Clear Filters</a>
      <a href="#" class="clear-all hidden">{{ 'Clear all'|t }}</a>
    </div>

    <div class="row d-block d-lg-none d-xl-none">
      {# mobile toggler button #}
      <div class="form-group-wrapper mobile-refine-results">
        <label class="label-mobile-results" type="button" data-toggle="collapse" data-target="#schedules-filters" aria-expanded="false" aria-controls="schedules-filters">
          <p class="m-0">{{ 'Refine results'|t }}</p>
          <span class="material-symbols-outlined plus" aria-hidden="true">add_circle</span>
          <span class="material-symbols-outlined minus" aria-hidden="true">do_not_disturb_on</span>
        </label>
      </div>
    </div>

  </div>
  <div class="collapse schedules-filters w-100" id="schedules-filters">
    <div class="filters-body p-0">
      <form class="navbar-form schedules-navbar-form" role="search">
        <div class="navbar-controls navbar-controls-mobile d-lg-none d-xl-none">
      <span class="navbar-controls__title">
        {{ 'Filters'|t }}
      </span>
          <a class="clear-filters" v-on:click="clearFilters()">Clear Filters</a>
          <a href="#" class="clear-all hidden">{{ 'Clear all'|t }}</a>
        </div>
        {# date picker #}
        <div class="form-group-wrapper date">
          <label v-on:click="toggleTab('date')" for="form-group-date" role="button">
            <span>{{ 'Date'|t }}</span>
            <span class="header-today" v-cloak>${ dateCalendarFormatted }</span>
            <input type="hidden" id="datepicker2" disabled>
          </label>

          <div id="form-group-date" class="form-group-date in" :class="{ 'collapse' : this.filterTabs.date === 0}">
            <div class="date" id="datepicker">
            </div>
          </div>
        </div>

        {# location select list #}
        {% if locations is not empty %}
          <div class="form-group-wrapper">
            <label v-on:click="toggleTab('location')" for="form-group-location" role="button">
              <p class="m-0">{{ 'Location'|t }}<small v-show="getFiltersCounter('locations') > 0" class="badge badge-secondary">${ getFiltersCounter('locations') }</small></p>
              <span v-cloak v-if="!this.filterTabs.location" class="material-symbols-outlined icon">add_circle</span>
              <span v-cloak v-if="this.filterTabs.location" class="material-symbols-outlined icon">do_not_disturb_on</span>
            </label>

            <div id="form-group-location" class="form-group-location" :class="{ 'collapse' : this.filterTabs.location === 0 && this.locations.length === 0}">
              <div class="checkboxes">
                {% for location in locations %}
                  <div v-if="showLocationFilterItem('{{ location }}')" class="checkbox-wrapper">
                    <input type="checkbox" v-model="locations" value="{{ location }}" id="cb-{{ location|lower|replace({' ': '-'}) }}" class="box">
                    <label for="cb-{{ location|lower|replace({' ': '-'}) }}">{{ location }}</label>
                    <div v-if="getRoomFilter('{{ location }}')" class="checkbox-room-wrapper" v-cloak>
                      <div v-for="roomFilter in getRoomFilter('{{ location }}')">
                        <input type="checkbox" v-model="room" v-bind:value="'{{ location }}' + '||' + roomFilter" v-bind:id="generateId('{{ location }}' + '||' + roomFilter)"/>
                        <label v-bind:for="generateId('{{ location }}' + '||' + roomFilter)">
                          ${ roomFilter }
                        </label>
                      </div>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </div>
          </div>
        {% endif %}

        {# categories select list #}
        {% if categories is not empty and filters.category %}
          <div class="form-group-wrapper">
            <label v-on:click="toggleTab('category')" for="form-group-category" role="button" data-toggle="collapse" data-target="#form-group-classname">
              <p class="m-0">{{ 'Category'|t }}<small v-show="getFiltersCounter('categories') > 0" class="badge badge-secondary">${ getFiltersCounter('categories') }</small></p>
              <span v-cloak v-if="!this.filterTabs.category" class="material-symbols-outlined icon">add_circle</span>
              <span v-cloak v-if="this.filterTabs.category" class="material-symbols-outlined icon">do_not_disturb_on</span>
            </label>
            <div id="form-group-category" class="form-group-category" :class="{ 'collapse' : this.filterTabs.category === 0}">
              <div class="checkboxes">
                {% for category in categories %}
                  {% set cat_checked = "t" %}
                  {% if checked_categories is not empty and category in checked_categories %}
                    {% set cat_checked = "checked" %}
                  {% endif %}
                  <div class="checkbox-wrapper">
                    <input type="checkbox" v-model="categories" v-bind:class="{ hidden: categoryExcluded('{{ category|replace({"'": '`'}) }}') }" value="{{ category }}" id="cb-{{ category|lower|replace({' ': '-'}) }}" class="box" {{ cat_checked }}>
                    <label for="cb-{{ category|lower|replace({' ': '-'}) }}">{{ category }}</label>
                  </div>
                {% endfor %}
              </div>
            </div>
          </div>
        {% endif %}

        {# class name select list #}
        {% if filters.classname %}
          <div v-if="getClassFilter()" class="form-group-wrapper">
            <label v-on:click="toggleTab('className')" for="form-group-classname" role="button">
              <p class="m-0">{{ 'Class name'|t }}<small v-show="getFiltersCounter('className') > 0" class="badge">${ getFiltersCounter('className') }</small></p></p>
              <span v-cloak v-if="!this.filterTabs.className" class="material-symbols-outlined icon">add_circle</span>
              <span v-cloak v-if="this.filterTabs.className" class="material-symbols-outlined icon">do_not_disturb_on</span>
            </label>
            <div id="form-group-classname" class="form-group-classname" :class="{ 'collapse' : this.filterTabs.className === 0}" aria-expanded="true">
              <div class="checkboxes">
                <div v-for="classFilter in getClassFilter()" class="checkbox-wrapper">
                  <input type="checkbox" v-model="className" v-bind:value="classFilter" v-bind:id="generateId(classFilter)" class="box"/>
                  <label v-bind:for="generateId(classFilter)">
                    ${ classFilter }
                  </label>
                </div>
              </div>
            </div>
          </div>
        {% endif %}

        {# instructor name select list #}
        {% if filters.instructorname %}
          <div v-if="getInstructorFilter()" class="form-group-wrapper">
            <label for="form-group-instructor-name" data-toggle="collapse" data-target="#form-group-instructor-name" role="button" class="expanded collapsed" aria-controls="form-group-instructor-name" aria-expanded="false">
              {{ 'Instructor name'|t }}
              <span class="material-symbols-outlined icon plus">add_circle</span>
              <span class="material-symbols-outlined icon minus">do_not_disturb_on</span>
            </label>
            <div id="form-group-instructor-name" class="form-group-instructor-name collapse in" aria-expanded="true">
              <select v-model="instructorName" class="select-instructor-option form-control form-select" id="instructor-name">
                <option class="all_instructors" id="all_instructors" value="">{{ 'All instructors' | t }}</option>
                <option v-for="option in getInstructorFilter()" :id="generateId(option)" :value="option">
                  ${ option }
                </option>
              </select>
              <i class="fa fa-chevron-down" aria-hidden="true"></i>
            </div>
          </div>
        {% endif %}
      </form>
    </div>
  </div>
</div>
