<template>
  <div class="content-box">
    <div class="flex flex-row middle-xs center-xs between-sm">
      <div class="flex flex-row">
        <button @click="selected(1)"  v-if="prevPage > 0" class="next-page btn-default btn-small-square btn-white right-margin-x-small bottom-margin-x-small "><span class="fas fa-step-backward"></span></button>
        <button @click="selected(prevPage)" v-if="prevPage > 0"  class="next-page btn-default btn-small-square btn-white right-margin-x-small bottom-margin-x-small"><span class="fas fa-chevron-left"></span></button>

        <span v-for="page in renderPagination" class="flex flex-row">
          <button v-if="currentPage == page" type="button" class="btn-default btn-small-square btn-primary right-margin-x-small bottom-margin-x-small"><span v-text="page"></span></button>
          <button v-else @click="selected(page)"
             class="btn-default btn-small-square btn-white right-margin-x-small bottom-margin-x-small hidden-sm-down"><span v-text="page"></span></button>
        </span >

        <button  v-if="nextPage <= lastPage " @click="selected(nextPage)"  class="next-page btn-default btn-small-square btn-white right-margin-x-small bottom-margin-x-small "><span class="fas fa-chevron-right"></span></button>
        <button  v-if="nextPage <= lastPage " @click="selected(lastPage)"  class="next-page btn-default btn-small-square btn-white right-margin-x-small bottom-margin-x-small"><span class="fas fa-step-forward"></span></button>
      </div>
      <span class="text-small text-gray text-center vertical-padding-small" v-html="legendPagination.labelLegend"></span>
    </div>
  </div>
</template>
<style scoped src="./styles.css" />
<script src="./scripts.js"></script>