<commit_before><template>
  <div>
    <div class="mt50 h5" v-if="!itemsPerPage || itemsPerPage.length === 0">
      {{ $t('No reviews have been posted yet. Please don\'t hesitate to share Your opinion and write the first review!') }}
    </div>
    <div class="mt50" v-for="(item, index) in itemsPerPage" :key="index" v-if="item.review_status" itemprop="review" itemscope itemtype="http://schema.org/Review">
      <meta itemprop="itemReviewed" :content="productName | htmlDecode">
      <h4 class="weight-400 m0" itemprop="reviewAspect" :content="item.title">
        {{ item.title }}
      </h4>
      <p class="cl-tertiary mt10 mb20 fs-medium-small">
        {{ item.nickname }}, {{ item.created_at | date }}
      </p>
      <p class="cl-gray lh25" itemprop="reviewBody" :content="item.detail">
        {{ item.detail }}
      </p>
    </div>
    <div class="row middle-xs center-xs mt50" v-if="pageCount > 1">
      <a href="#" class="mr10 no-underline" :class="{ inactive: currentPage === 1 }" @click.prevent="prevPage">
        <i class="material-icons">chevron_left</i>
      </a>
      <span class="mx10 pagination-page" v-for="pageNumber in pageList" :key="pageNumber">
        <span class="fs-medium block py15 px20 bg-cl-mine-shaft cl-white" v-if="pageNumber === currentPage">
          {{ pageNumber }}
        </span>
        <a href="#" class="fs-medium block py15 px20 bg-cl-secondary pointer" v-else @click.prevent="changePage(pageNumber)">
          {{ pageNumber }}
        </a>
      </span>
      <a href="#" class="ml10 no-underline" :class="{ inactive: currentPage === pageCount }" @click.prevent="nextPage">
        <i class="material-icons">chevron_right</i>
      </a>
    </div>
  </div>
</template>

<script>
import Product from '@vue-storefront/core/pages/Product'

export default {
  props: {
    perPage: {
      type: Number,
      required: false,
      default: 4
    },
    items: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      currentPage: 1
    }
  },
  mixins: [Product],
  computed: {
    itemsPerPage () {
      let start = ((this.currentPage - 1) * this.perPage)
      let end = start + this.perPage
      return this.items.slice(start, end)
    },
    pageCount () {
      return Math.floor(this.items.length / this.perPage) + Math.min(1, this.items.length % this.perPage)
    },
    pageList () {
      if (this.pageCount <= 5 || this.currentPage === 1 || this.currentPage === 2) {
        const pages = []
        for (let i = 1; i <= Math.min(this.pageCount, 5); i += 1) {
          pages.push(i)
        }
        return pages
      } else if (this.currentPage === this.pageCount || this.currentPage === this.pageCount - 1) {
        const pages = []
        for (let i = this.pageCount; i >= 1 && i >= this.pageCount - 4; i -= 1) {
          pages.unshift(i)
        }
        return pages
      } else {
        return [this.currentPage - 2, this.currentPage - 1, this.currentPage, this.currentPage + 1, this.currentPage + 2]
      }
    }
  },
  methods: {
    prevPage () {
      this.currentPage = Math.max(1, this.currentPage - 1)
    },
    nextPage () {
      this.currentPage = Math.min(this.pageCount, this.currentPage + 1)<commit_msg>fix errors with v-if in v-for<commit_after><template>
  <div>
    <div class="mt50 h5" v-if="!itemsPerPage || itemsPerPage.length === 0">
      {{ $t('No reviews have been posted yet. Please don\'t hesitate to share Your opinion and write the first review!') }}
    </div>
    <div class="mt50" v-for="(item, index) in itemsPerPage" :key="index" itemprop="review" itemscope itemtype="http://schema.org/Review">
      <meta itemprop="itemReviewed" :content="productName | htmlDecode" />
      <h4 class="weight-400 m0" itemprop="reviewAspect" :content="item.title">
        {{ item.title }}
      </h4>
      <p class="cl-tertiary mt10 mb20 fs-medium-small">
        {{ item.nickname }}, {{ item.created_at | date }}
      </p>
      <p class="cl-gray lh25" itemprop="reviewBody" :content="item.detail">
        {{ item.detail }}
      </p>
    </div>
    <div class="row middle-xs center-xs mt50" v-if="pageCount > 1">
      <a href="#" class="mr10 no-underline" :class="{ inactive: currentPage === 1 }" @click.prevent="prevPage">
        <i class="material-icons">chevron_left</i>
      </a>
      <span class="mx10 pagination-page" v-for="pageNumber in pageList" :key="pageNumber">
        <span class="fs-medium block py15 px20 bg-cl-mine-shaft cl-white" v-if="pageNumber === currentPage">
          {{ pageNumber }}
        </span>
        <a href="#" class="fs-medium block py15 px20 bg-cl-secondary pointer" v-else @click.prevent="changePage(pageNumber)">
          {{ pageNumber }}
        </a>
      </span>
      <a href="#" class="ml10 no-underline" :class="{ inactive: currentPage === pageCount }" @click.prevent="nextPage">
        <i class="material-icons">chevron_right</i>
      </a>
    </div>
  </div>
</template>

<script>
import Product from '@vue-storefront/core/pages/Product'

export default {
  props: {
    perPage: {
      type: Number,
      required: false,
      default: 4
    },
    items: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      currentPage: 1
    }
  },
  mixins: [Product],
  computed: {
    itemsPerPage () {
      let start = ((this.currentPage - 1) * this.perPage)
      let end = start + this.perPage
      return this.items.slice(start, end).filter(review => !!review.review_status)
    },
    pageCount () {
      return Math.floor(this.items.length / this.perPage) + Math.min(1, this.items.length % this.perPage)
    },
    pageList () {
      if (this.pageCount <= 5 || this.currentPage === 1 || this.currentPage === 2) {
        const pages = []
        for (let i = 1; i <= Math.min(this.pageCount, 5); i += 1) {
          pages.push(i)
        }
        return pages
      } else if (this.currentPage === this.pageCount || this.currentPage === this.pageCount - 1) {
        const pages = []
        for (let i = this.pageCount; i >= 1 && i >= this.pageCount - 4; i -= 1) {
          pages.unshift(i)
        }
        return pages
      } else {
        return [this.currentPage - 2, this.currentPage - 1, this.currentPage, this.currentPage + 1, this.currentPage + 2]
      }
    }
  },
  methods: {
    prevPage () {
      this.currentPage = Math.max(1, this.currentPage - 1)
    },
    nextPage () {
      this.currentPage = Math.min(this.pageCount, this.currentPage + 1)
{'fraction_non_alphanumeric': 0.16489443673909693, 'fraction_numerical': 0.01756819232547388, 'mean_word_length': 2.4911242603550297, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 74, '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': '1218908', 'n_tokens_mistral': 2200, 'n_tokens_neox': 2114, 'n_words': 494}