<commit_before><template>
  <div>
    <a href="#menu" id="menuLink" class="menu-link" @click.prevent="toggleMenu" :class="{active: menuVisible}">
      <!-- Hamburger icon -->
      <span class="stretch">&nbsp;
            <span class="badge highlightBack"
                  v-if="totalFilterCount > 0 && filtersActive">{{ totalFilterCount }}</span>
            <span class="badge favorites highlightBack" v-if="onlyFavourites">&thinsp;</span>
        </span>
    </a>

    <div id="menu" :class="{active: menuVisible}">
      <div class="pure-menu custom-restricted-width" id="nav">
        <div class="filter-settings">
                <span class="filter-category darkBack reverse"><span>{{ $t('filterOptions') }}</span>
                    <button @click="resetFilters">{{ $t('reset') }}</button></span>
          <div class="filter-values">
            <div>
              <input type="checkbox" id="active" v-model="filtersActive"/>
              <label for="active">{{ $t('active') }}</label>
            </div>
            <div>
              <input type="checkbox" id="favs" v-model="onlyFavourites"/>
              <label for="favs">{{ $t('toggleFavorites') }}</label>
            </div>
          </div>
        </div>
        <div class="filter-box">
          <!-- HACK: make saveActiveFilters part of the view to trigger save on every change -->
          {{ saveActiveFilters }}
          {{ publishFilterSettings }}
          <!-- END OF HACK -->
          <div v-for="filter in filters">
            <div :class="{ collapsed: filterStatus[filter.filterKey].open === false} ">
                        <span class="filter-category darkBack reverse" @click="toggleCategory(filter)">
                            <span>{{filter.title}}</span>
                            <img class="filter-button" src="../../assets/img/group_expanded_16.svg" alt="+ -"/>
                            <span class="badge highlightBack"
                                  v-if="filter.selectedFilterCount > 0">{{ filter.selectedFilterCount }} </span>
                        </span>
              <div class="filter-values">
                <div v-for="filterValue in filter.filterValues" :key="filterValue.id">
                  <input :id="filter.filterKey + '-' + filterValue.id" type="checkbox"
                         v-model="filterStatus[filter.filterKey].values[filterValue.id]"/>
                  <label :for="filter.filterKey + '-' + filterValue.id">{{ filterValue.name }}</label>
                </div>
              </div>
            </div>
          </div>
          <div id="filter-veil">&nbsp;</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Settings from '../../Settings'
  import Conference from '../../Conference'
  import Vue from 'vue'

  const filterActiveKey = 'dukeconfilters_active'
  const favsActive = 'dukeconfavs_active'
  const filterActivePrefix = 'dukeconfilters_'

  const sortByOrder = function (o1, o2) {
    const l1 = o1.order
    const l2 = o2.order
    if (l1 === l2) {
      return 0
    } else if (l1 < l2) {
      return -1
    } else {
      return 1
    }
  }

  const filterKeys = ['level', 'language', 'track', 'location']

  export default {
    name: 'filter-events',
    data () {
      let filterStatus = {}
      filterKeys.forEach(k => {
        filterStatus[k] = {open: false, values: {}}
        Settings.getSetting(filterActivePrefix + k, []).forEach(v => {
          filterStatus[k].values[v] = true
        })
      })
      return {
        filtersActive: Settings.getSetting(filterActiveKey, true),
        onlyFavourites: Settings.getSetting(favsActive, false),
        languages: Conference.getAllLanguages(),
        tracks: Conference.getAllTracks(),
        locations: Conference.getAllLocations(),
        audiences: Conference.getAllAudiences(),
        filterStatus: filterStatus,
        menuVisible: false
      }
    },
    computed: {
      filters: function () {
        let filters = [
          {
            filterKey: 'level'
          },
          {
            filterKey: 'language'
          },<commit_msg>hide filter box when event list is empty<commit_after><template>
  <div v-if="Object.keys(events).length > 0">
    <a href="#menu" id="menuLink" class="menu-link" @click.prevent="toggleMenu" :class="{active: menuVisible}">
      <!-- Hamburger icon -->
      <span class="stretch">&nbsp;
            <span class="badge highlightBack"
                  v-if="totalFilterCount > 0 && filtersActive">{{ totalFilterCount }}</span>
            <span class="badge favorites highlightBack" v-if="onlyFavourites">&thinsp;</span>
        </span>
    </a>

    <div id="menu" :class="{active: menuVisible}">
      <div class="pure-menu custom-restricted-width" id="nav">
        <div class="filter-settings">
                <span class="filter-category darkBack reverse"><span>{{ $t('filterOptions') }}</span>
                    <button @click="resetFilters">{{ $t('reset') }}</button></span>
          <div class="filter-values">
            <div>
              <input type="checkbox" id="active" v-model="filtersActive"/>
              <label for="active">{{ $t('active') }}</label>
            </div>
            <div>
              <input type="checkbox" id="favs" v-model="onlyFavourites"/>
              <label for="favs">{{ $t('toggleFavorites') }}</label>
            </div>
          </div>
        </div>
        <div class="filter-box">
          <!-- HACK: make saveActiveFilters part of the view to trigger save on every change -->
          {{ saveActiveFilters }}
          {{ publishFilterSettings }}
          <!-- END OF HACK -->
          <div v-for="filter in filters">
            <div :class="{ collapsed: filterStatus[filter.filterKey].open === false} ">
                        <span class="filter-category darkBack reverse" @click="toggleCategory(filter)">
                            <span>{{filter.title}}</span>
                            <img class="filter-button" src="../../assets/img/group_expanded_16.svg" alt="+ -"/>
                            <span class="badge highlightBack"
                                  v-if="filter.selectedFilterCount > 0">{{ filter.selectedFilterCount }} </span>
                        </span>
              <div class="filter-values">
                <div v-for="filterValue in filter.filterValues" :key="filterValue.id">
                  <input :id="filter.filterKey + '-' + filterValue.id" type="checkbox"
                         v-model="filterStatus[filter.filterKey].values[filterValue.id]"/>
                  <label :for="filter.filterKey + '-' + filterValue.id">{{ filterValue.name }}</label>
                </div>
              </div>
            </div>
          </div>
          <div id="filter-veil">&nbsp;</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Settings from '../../Settings'
  import Conference from '../../Conference'
  import Vue from 'vue'

  const filterActiveKey = 'dukeconfilters_active'
  const favsActive = 'dukeconfavs_active'
  const filterActivePrefix = 'dukeconfilters_'

  const sortByOrder = function (o1, o2) {
    const l1 = o1.order
    const l2 = o2.order
    if (l1 === l2) {
      return 0
    } else if (l1 < l2) {
      return -1
    } else {
      return 1
    }
  }

  const filterKeys = ['level', 'language', 'track', 'location']

  export default {
    name: 'filter-events',
    data () {
      let filterStatus = {}
      filterKeys.forEach(k => {
        filterStatus[k] = {open: false, values: {}}
        Settings.getSetting(filterActivePrefix + k, []).forEach(v => {
          filterStatus[k].values[v] = true
        })
      })
      return {
        events: Conference.getAllEvents(),
        filtersActive: Settings.getSetting(filterActiveKey, true),
        onlyFavourites: Settings.getSetting(favsActive, false),
        languages: Conference.getAllLanguages(),
        tracks: Conference.getAllTracks(),
        locations: Conference.getAllLocations(),
        audiences: Conference.getAllAudiences(),
        filterStatus: filterStatus,
        menuVisible: false
      }
    },
    computed: {
      filters: function () {
        let filters = [
          {
            filterKey: 'level'
          },
          {
            filterKey: 'language'
          },
{'fraction_non_alphanumeric': 0.15447349484288797, 'fraction_numerical': 0.004197649316382826, 'mean_word_length': 1.9835420393559928, 'pattern_counts': {'":': 0, '<': 129, '<?xml version=': 0, '>': 136, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4319842', 'n_tokens_mistral': 2376, 'n_tokens_neox': 2312, 'n_words': 501}