<commit_before><template>

  <div>
    <page-header :title="$tr('pageHeader')">
      <mat-svg slot="icon" category="action" name="home"/>
    </page-header>
    <component
      v-if="trimmedResume.length"
      :is="recommendationDisplay"
      :gen-link="genLink"
      :contents="trimmedResume"
      :header="$tr('resumeSectionHeader')"
      :filter="false"
      :subheader="$tr('resumeSectionSubHeader', {numOfItems: trimmedResume.length})"/>
    <component
      v-if="trimmedNextSteps.length"
      :is="recommendationDisplay"
      :gen-link="genLink"
      :contents="trimmedNextSteps"
      :header="$tr('suggestedNextStepsSectionHeader')"
      :filter="false"
      :subheader="$tr('suggestedNextStepsSectionSubHeader', {numOfItems: trimmedNextSteps.length})"/>
    <component
      v-if="trimmedPopular.length"
      :is="recommendationDisplay"
      :gen-link="genLink"
      :contents="trimmedPopular"
      :header="$tr('popularSectionHeader')"
      :filter="false"
      :subheader="$tr('popularSectionSubHeader', {numOfItems: trimmedPopular.length})"/>
    <component
      v-if="trimmedOverview.length"
      :is="recommendationDisplay"
      :showViewAll="true"
      :gen-link="genLink"
      :header="$tr('overviewSectionHeader')"
      :filter="false"
      :contents="trimmedOverview" />
  </div>

</template>


<script>

  import { PageNames } from '../../constants';
  import { getCurrentChannelObject } from 'kolibri.coreVue.vuex.getters';
  import pageHeader from '../page-header';
  import contentCardCarousel from '../content-card-carousel';
  import contentCardGrid from '../content-card-grid';
  import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';

  const mobileCardNumber = 3;

  export default {
    name: 'recommendedPage',
    $trs: {
      pageHeader: 'Recommended',
      popularSectionHeader: 'Most popular',
      suggestedNextStepsSectionHeader: 'Next steps',
      resumeSectionHeader: 'Resume',
      popularSectionSubHeader: '{numOfItems, number} popular items',
      suggestedNextStepsSectionSubHeader: '{numOfItems, number} suggested items',
      resumeSectionSubHeader: '{numOfItems, number} items to be resumed',
      overviewSectionHeader: 'Overview',
    },
    mixins: [responsiveWindow],
    components: {
      pageHeader,
      contentCardCarousel,
      contentCardGrid,
    },
    computed: {
      isMobile() {
        return this.windowSize.breakpoint <= 2;
      },
      recommendationDisplay() {
        if (this.isMobile) {
          return contentCardGrid;
        }
        return contentCardCarousel;
      },
      trimmedResume() {
        if (this.isMobile) {
          return this.recommendations.resume.slice(0, mobileCardNumber);
        }
        return this.recommendations.resume.slice(0, mobileCardNumber);
      },
      trimmedNextSteps() {
        if (this.isMobile) {
          return this.recommendations.nextSteps.slice(0, mobileCardNumber);
        }
        return this.recommendations.nextSteps;
      },
      trimmedPopular() {
        if (this.isMobile) {
          return this.recommendations.popular.slice(0, mobileCardNumber);
        }
        return this.recommendations.popular;
      },
      trimmedOverview() {<commit_msg>Don't trim resume when not on mobile<commit_after><template>

  <div>
    <page-header :title="$tr('pageHeader')">
      <mat-svg slot="icon" category="action" name="home"/>
    </page-header>
    <component
      v-if="trimmedResume.length"
      :is="recommendationDisplay"
      :gen-link="genLink"
      :contents="trimmedResume"
      :header="$tr('resumeSectionHeader')"
      :filter="false"
      :subheader="$tr('resumeSectionSubHeader', {numOfItems: trimmedResume.length})"/>
    <component
      v-if="trimmedNextSteps.length"
      :is="recommendationDisplay"
      :gen-link="genLink"
      :contents="trimmedNextSteps"
      :header="$tr('suggestedNextStepsSectionHeader')"
      :filter="false"
      :subheader="$tr('suggestedNextStepsSectionSubHeader', {numOfItems: trimmedNextSteps.length})"/>
    <component
      v-if="trimmedPopular.length"
      :is="recommendationDisplay"
      :gen-link="genLink"
      :contents="trimmedPopular"
      :header="$tr('popularSectionHeader')"
      :filter="false"
      :subheader="$tr('popularSectionSubHeader', {numOfItems: trimmedPopular.length})"/>
    <component
      v-if="trimmedOverview.length"
      :is="recommendationDisplay"
      :showViewAll="true"
      :gen-link="genLink"
      :header="$tr('overviewSectionHeader')"
      :filter="false"
      :contents="trimmedOverview" />
  </div>

</template>


<script>

  import { PageNames } from '../../constants';
  import { getCurrentChannelObject } from 'kolibri.coreVue.vuex.getters';
  import pageHeader from '../page-header';
  import contentCardCarousel from '../content-card-carousel';
  import contentCardGrid from '../content-card-grid';
  import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';

  const mobileCardNumber = 3;

  export default {
    name: 'recommendedPage',
    $trs: {
      pageHeader: 'Recommended',
      popularSectionHeader: 'Most popular',
      suggestedNextStepsSectionHeader: 'Next steps',
      resumeSectionHeader: 'Resume',
      popularSectionSubHeader: '{numOfItems, number} popular items',
      suggestedNextStepsSectionSubHeader: '{numOfItems, number} suggested items',
      resumeSectionSubHeader: '{numOfItems, number} items to be resumed',
      overviewSectionHeader: 'Overview',
    },
    mixins: [responsiveWindow],
    components: {
      pageHeader,
      contentCardCarousel,
      contentCardGrid,
    },
    computed: {
      isMobile() {
        return this.windowSize.breakpoint <= 2;
      },
      recommendationDisplay() {
        if (this.isMobile) {
          return contentCardGrid;
        }
        return contentCardCarousel;
      },
      trimmedResume() {
        if (this.isMobile) {
          return this.recommendations.resume.slice(0, mobileCardNumber);
        }
        return this.recommendations.resume;
      },
      trimmedNextSteps() {
        if (this.isMobile) {
          return this.recommendations.nextSteps.slice(0, mobileCardNumber);
        }
        return this.recommendations.nextSteps;
      },
      trimmedPopular() {
        if (this.isMobile) {
          return this.recommendations.popular.slice(0, mobileCardNumber);
        }
        return this.recommendations.popular;
      },
      trimmedOverview() {
{'fraction_non_alphanumeric': 0.13178175092478422, 'fraction_numerical': 0.0016954377311960542, 'mean_word_length': 3.0991787744788377, 'pattern_counts': {'":': 0, '<': 29, '<?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': '2494155', 'n_tokens_mistral': 1969, 'n_tokens_neox': 1923, 'n_words': 315}