<commit_before><template>

  <div>
    <VBtn
      v-if="$vuetify.breakpoint.xsOnly"
      color="primary"
      flat
      @click.stop="drawer = true"
    >
      {{ $tr('searchText', {count: filtersCount}) }}
    </VBtn>
    <VNavigationDrawer
      v-model="drawer"
      :permanent="$vuetify.breakpoint.smAndUp"
      app
      disable-route-watcher
      :clipped="$vuetify.breakpoint.smAndUp"
      :right="isRTL"
    >
      <VContainer class="filters pa-0">
        <VToolbar color="transparent" flat dense>
          <ActionLink
            :text="$tr('clearFilters')"
            @click="clearFilters"
          />
          <VSpacer />
          <VBtn v-if="$vuetify.breakpoint.xsOnly" icon flat style="text-align: right;">
            <Icon @click="drawer = false">
              clear
            </Icon>
          </VBtn>
        </VToolbar>
        <VForm class="pa-3">

          <!-- Keyword search -->
          <VTextField
            v-model="keywordInput"
            color="primary"
            :label="$tr('searchLabel')"
            single-line
            outline
            clearable
            data-test="keywords"
            autofocus
            @input="setKeywords"
          />

          <!-- Show per page -->
          <VSelect
            v-model="pageSize"
            outline
            menu-props="offsetY"
            :items="pageSizeOptions"
            :label="$tr('pageSize')"
          />

          <!-- Language -->
          <LanguageDropdown
            v-model="languages"
            clearable
            outline
            multiple
          />

          <!-- License (attach to self to keep in notranslate class) -->
          <VSelect
            v-if="!libraryMode"
            v-model="licenses"
            :items="licenseOptions"
            :label="$tr('licenseLabel')"
            item-value="id"
            :item-text="licenseText"
            multiple
            outline
            menu-props="offsetY"
            class="licenses"
            attach=".licenses"
            @click.stop.prevent
          />

          <!-- Formats (attach to self to keep in notranslate class) -->
          <VSelect
            v-model="kinds"
            :items="kindOptions"
            item-value="kind"
            :item-text="kindText"
            :label="$tr('formatLabel')"
            class="formats"
            attach=".formats"
            multiple
            outline
            menu-props="offsetY"
          />

          <!-- Starred -->
          <VCheckbox
            v-if="loggedIn"
            v-model="bookmark"
            color="primary"
            :label="$tr('starredLabel')"
          />

          <!-- Includes -->
          <div class="subheading">
            {{ $tr('includesLabel') }}
          </div>
          <VCheckbox v-model="coach" color="primary">
            <template #label>
              {{ $tr('coachLabel') }}
              <HelpTooltip :text="$tr('coachDescription')" bottom class="pl-2" />
            </template>
          </VCheckbox>
          <VCheckbox v-model="assessments" color="primary">
            <template #label>
              {{ $tr('assessmentsLabel') }}
              <HelpTooltip :text="$tr('exerciseDescription')" bottom class="pl-2" />
            </template>
          </VCheckbox>
          <VCheckbox v-model="subtitles" color="primary" :label="$tr('subtitlesLabel')" />
        </VForm>
      </VContainer>
    </VNavigationDrawer>
  </div>

</template>


<script>

  import { mapState } from 'vuex';
  import debounce from 'lodash/debounce';
  import map from 'lodash/map';
  import uniq from 'lodash/uniq';
  import reduce from 'lodash/reduce';
  import sortBy from 'lodash/sortBy';
  import { RouterNames } from '../../constants';
  import { constantsTranslationMixin } from 'shared/mixins';
  import LanguageDropdown from 'edit_channel/sharedComponents/LanguageDropdown';
  import ActionLink from 'shared/views/ActionLink';
  import Constants from 'edit_channel/constants/index';
  import HelpTooltip from 'shared/views/HelpTooltip';

  const EXCLUDE_KINDS = ['topic', 'exercise'];

  export default {
    name: 'CatalogFilters',
    components: {
      LanguageDropdown,
      ActionLink,
      HelpTooltip,
    },
    mixins: [constantsTranslationMixin],
    data() {
      return {
        drawer: false,
        keywordInput: '',
      };
    },
    computed: {
      ...mapState({
        loggedIn: state => state.session.loggedIn,
      }),
      isRTL() {
        return window.isRTL;
      },
      libraryMode() {
        return window.libraryMode;
      },
      kindOptions() {
        return sortBy(Constants.ContentKinds, 'kind').filter(k => !EXCLUDE_KINDS.includes(k.kind));<commit_msg>Set menu props max height so it's clear when you can scroll down<commit_after><template>

  <div>
    <VBtn
      v-if="$vuetify.breakpoint.xsOnly"
      color="primary"
      flat
      @click.stop="drawer = true"
    >
      {{ $tr('searchText', {count: filtersCount}) }}
    </VBtn>
    <VNavigationDrawer
      v-model="drawer"
      :permanent="$vuetify.breakpoint.smAndUp"
      app
      disable-route-watcher
      :clipped="$vuetify.breakpoint.smAndUp"
      :right="isRTL"
    >
      <VContainer class="filters pa-0">
        <VToolbar color="transparent" flat dense>
          <ActionLink
            :text="$tr('clearFilters')"
            @click="clearFilters"
          />
          <VSpacer />
          <VBtn v-if="$vuetify.breakpoint.xsOnly" icon flat style="text-align: right;">
            <Icon @click="drawer = false">
              clear
            </Icon>
          </VBtn>
        </VToolbar>
        <VForm class="pa-3">

          <!-- Keyword search -->
          <VTextField
            v-model="keywordInput"
            color="primary"
            :label="$tr('searchLabel')"
            single-line
            outline
            clearable
            data-test="keywords"
            autofocus
            @input="setKeywords"
          />

          <!-- Show per page -->
          <VSelect
            v-model="pageSize"
            outline
            :menu-props="menuProps"
            :items="pageSizeOptions"
            :label="$tr('pageSize')"
          />

          <!-- Language -->
          <LanguageDropdown
            v-model="languages"
            clearable
            outline
            multiple
          />

          <!-- License (attach to self to keep in notranslate class) -->
          <VSelect
            v-if="!libraryMode"
            v-model="licenses"
            :items="licenseOptions"
            :label="$tr('licenseLabel')"
            item-value="id"
            :item-text="licenseText"
            multiple
            outline
            :menu-props="menuProps"
            class="licenses"
            attach=".licenses"
            @click.stop.prevent
          />

          <!-- Formats (attach to self to keep in notranslate class) -->
          <VSelect
            v-model="kinds"
            :items="kindOptions"
            item-value="kind"
            :item-text="kindText"
            :label="$tr('formatLabel')"
            class="formats"
            attach=".formats"
            multiple
            outline
            :menu-props="menuProps"
          />

          <!-- Starred -->
          <VCheckbox
            v-if="loggedIn"
            v-model="bookmark"
            color="primary"
            :label="$tr('starredLabel')"
          />

          <!-- Includes -->
          <div class="subheading">
            {{ $tr('includesLabel') }}
          </div>
          <VCheckbox v-model="coach" color="primary">
            <template #label>
              {{ $tr('coachLabel') }}
              <HelpTooltip :text="$tr('coachDescription')" bottom class="pl-2" />
            </template>
          </VCheckbox>
          <VCheckbox v-model="assessments" color="primary">
            <template #label>
              {{ $tr('assessmentsLabel') }}
              <HelpTooltip :text="$tr('exerciseDescription')" bottom class="pl-2" />
            </template>
          </VCheckbox>
          <VCheckbox v-model="subtitles" color="primary" :label="$tr('subtitlesLabel')" />
        </VForm>
      </VContainer>
    </VNavigationDrawer>
  </div>

</template>


<script>

  import { mapState } from 'vuex';
  import debounce from 'lodash/debounce';
  import map from 'lodash/map';
  import uniq from 'lodash/uniq';
  import reduce from 'lodash/reduce';
  import sortBy from 'lodash/sortBy';
  import { RouterNames } from '../../constants';
  import { constantsTranslationMixin } from 'shared/mixins';
  import LanguageDropdown from 'edit_channel/sharedComponents/LanguageDropdown';
  import ActionLink from 'shared/views/ActionLink';
  import Constants from 'edit_channel/constants/index';
  import HelpTooltip from 'shared/views/HelpTooltip';

  const EXCLUDE_KINDS = ['topic', 'exercise'];

  export default {
    name: 'CatalogFilters',
    components: {
      LanguageDropdown,
      ActionLink,
      HelpTooltip,
    },
    mixins: [constantsTranslationMixin],
    data() {
      return {
        drawer: false,
        keywordInput: '',
      };
    },
    computed: {
      ...mapState({
        loggedIn: state => state.session.loggedIn,
      }),
      isRTL() {
        return window.isRTL;
      },
      libraryMode() {
        return window.libraryMode;
      },
      menuProps() {
        return { offsetY: true, maxHeight: 270 };
      },
      kindOptions() {
        return sortBy(Constants.ContentKinds, 'kind').filter(k => !EXCLUDE_KINDS.includes(k.kind));
{'fraction_non_alphanumeric': 0.13628318584070798, 'fraction_numerical': 0.0011452368558042686, 'mean_word_length': 1.6765115631095013, 'pattern_counts': {'":': 0, '<': 97, '<?xml version=': 0, '>': 101, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6991438', 'n_tokens_mistral': 2734, 'n_tokens_neox': 2711, 'n_words': 501}