<commit_before><template>

  <div class="content-grid">
    <div>
      <ui-select
        v-if="showContentKindFilter"
        class="filter"
        :label="$tr('contentKinds')"
        :options="contentKindFilterOptions"
        v-model="contentKindFilterSelection"
      />

      <ui-select
        v-if="showChannelFilter"
        class="filter"
        :label="$tr('channels')"
        :options="channelFilterOptions"
        v-model="channelFilterSelection"
      />
    </div>

    <content-card
      v-for="content in contents"
      v-show="showContentCard(content)"
      :key="content.id"
      :title="content.title"
      :thumbnail="content.thumbnail"
      :class="{'grid-item': true, 'mobile': isMobile}"
      :kind="content.kind"
      :progress="content.progress"
      :link="genContentLink(content.id, content.kind)"
    />

  </div>

</template>


<script>

  import validateLinkObject from 'kolibri.utils.validateLinkObject';
  import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
  import { getChannels } from 'kolibri.coreVue.vuex.getters';
  import some from 'lodash/some';
  import uiSelect from 'keen-ui/src/UiSelect';
  import contentCard from '../content-card';
  import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';

  export default {
    name: 'contentCardGroupGrid',
    $trs: {
      contentKinds: 'Content kinds',
      all: 'All',
      topics: 'Topics',
      exercises: 'Exercises',
      videos: 'Videos',
      audio: 'Audio',
      documents: 'Documents',
      html5: 'HTML5 Apps',
      channels: 'Channels',
    },
    components: {
      contentCard,
      uiSelect,
    },
    mixins: [responsiveWindow],
    props: {
      contents: {
        type: Array,
        required: true,
      },
      genContentLink: {
        type: Function,
        validator(value) {
          return validateLinkObject(value(1, 'exercise'));
        },
        default: () => {},
        required: false,
      },
      showContentKindFilter: {
        type: Boolean,
        default: true,
      },
      showChannelFilter: {
        type: Boolean,
        default: false,
      },
    },
    data: () => ({
      contentKindFilterSelection: '',
      channelFilterSelection: '',
    }),
    computed: {
      channelKind() {
        return ContentNodeKinds.CHANNEL;
      },
      isMobile() {
        return this.windowSize.breakpoint <= 1;
      },
      contentKindFilterOptions() {
        return [
          {
            label: this.$tr('all'),
            value: 'all',
          },
          {
            label: this.$tr('topics'),
            value: ContentNodeKinds.TOPIC,
            disabled: !this.resultsIncludeContentKind(ContentNodeKinds.TOPIC),
          },
          {
            label: this.$tr('exercises'),
            value: ContentNodeKinds.EXERCISE,
            disabled: !this.resultsIncludeContentKind(ContentNodeKinds.EXERCISE),
          },
          {
            label: this.$tr('videos'),
            value: ContentNodeKinds.VIDEO,
            disabled: !this.resultsIncludeContentKind(ContentNodeKinds.VIDEO),
          },
          {
            label: this.$tr('audio'),
            value: ContentNodeKinds.AUDIO,
            disabled: !this.resultsIncludeContentKind(ContentNodeKinds.AUDIO),
          },
          {<commit_msg>Remove useless method<commit_after><template>

  <div class="content-grid">
    <div>
      <ui-select
        v-if="showContentKindFilter"
        class="filter"
        :label="$tr('contentKinds')"
        :options="contentKindFilterOptions"
        v-model="contentKindFilterSelection"
      />

      <ui-select
        v-if="showChannelFilter"
        class="filter"
        :label="$tr('channels')"
        :options="channelFilterOptions"
        v-model="channelFilterSelection"
      />
    </div>

    <content-card
      v-for="content in contents"
      v-show="showContentCard(content)"
      :key="content.id"
      :title="content.title"
      :thumbnail="content.thumbnail"
      :class="{'grid-item': true, 'mobile': isMobile}"
      :kind="content.kind"
      :progress="content.progress"
      :link="genContentLink(content.id, content.kind)"
    />

  </div>

</template>


<script>

  import validateLinkObject from 'kolibri.utils.validateLinkObject';
  import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
  import { getChannels } from 'kolibri.coreVue.vuex.getters';
  import some from 'lodash/some';
  import uiSelect from 'keen-ui/src/UiSelect';
  import contentCard from '../content-card';
  import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';

  export default {
    name: 'contentCardGroupGrid',
    $trs: {
      contentKinds: 'Content kinds',
      all: 'All',
      topics: 'Topics',
      exercises: 'Exercises',
      videos: 'Videos',
      audio: 'Audio',
      documents: 'Documents',
      html5: 'HTML5 Apps',
      channels: 'Channels',
    },
    components: {
      contentCard,
      uiSelect,
    },
    mixins: [responsiveWindow],
    props: {
      contents: {
        type: Array,
        required: true,
      },
      genContentLink: {
        type: Function,
        validator(value) {
          return validateLinkObject(value(1, 'exercise'));
        },
        default: () => {},
        required: false,
      },
      showContentKindFilter: {
        type: Boolean,
        default: true,
      },
      showChannelFilter: {
        type: Boolean,
        default: false,
      },
    },
    data: () => ({
      contentKindFilterSelection: '',
      channelFilterSelection: '',
    }),
    computed: {
      isMobile() {
        return this.windowSize.breakpoint <= 1;
      },
      contentKindFilterOptions() {
        return [
          {
            label: this.$tr('all'),
            value: 'all',
          },
          {
            label: this.$tr('topics'),
            value: ContentNodeKinds.TOPIC,
            disabled: !this.resultsIncludeContentKind(ContentNodeKinds.TOPIC),
          },
          {
            label: this.$tr('exercises'),
            value: ContentNodeKinds.EXERCISE,
            disabled: !this.resultsIncludeContentKind(ContentNodeKinds.EXERCISE),
          },
          {
            label: this.$tr('videos'),
            value: ContentNodeKinds.VIDEO,
            disabled: !this.resultsIncludeContentKind(ContentNodeKinds.VIDEO),
          },
          {
            label: this.$tr('audio'),
            value: ContentNodeKinds.AUDIO,
            disabled: !this.resultsIncludeContentKind(ContentNodeKinds.AUDIO),
          },
          {
{'fraction_non_alphanumeric': 0.13227272727272726, 'fraction_numerical': 0.0012121212121212121, 'mean_word_length': 2.0947022972339426, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 27, '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': '1566992', 'n_tokens_mistral': 1932, 'n_tokens_neox': 1917, 'n_words': 321}