﻿<template>
  <div class="ui-pagination" v-if="pages > 1" :class="{'is-inline': inline }">
    <ui-icon-button class="ui-pagination-prev ui-pagination-button" :type="buttonType" title="@ui.pagination.previous" icon="fth-chevron-left" :disabled="page < 2" @click="set(page - 1)" />
    <div class="ui-pagination-select">
      <select :value="page" @change="selectChanged">
        <option v-for="value in values" v-bind:value="value">{{value}}</option>
      </select>
      <button type="button" class="ui-button type-blank caret-down">
        <span class="ui-button-text" v-localize="{ key: '@ui.pagination.xofy', tokens: { x: page, y: pages }}"></span>
        <ui-icon class="ui-button-caret" symbol="fth-chevron-down" />
      </button>
    </div>
    <ui-icon-button class="ui-pagination-next ui-pagination-button" :type="buttonType" title="@ui.pagination.next" icon="fth-chevron-right" :disabled="page >= pages" @click="set(page + 1)" />
  </div>
</template>


<script>
  export default {
    name: 'uiPagination',

    props: {
      pages: {
        type: Number,
        default: 1
      },
      page: {
        type: Number,
        default: 1
      },
      inline: {
        type: Boolean,
        default: false
      }
    },

    computed: {
      values: function ()
      {
        return Array.apply(null, Array(this.pages)).map(function (_, i) { return i + 1; });
      },
      buttonType()
      {
        return this.inline ? 'light' : 'light onbg';
      }
    },

    methods: {

      set(page)
      {
        this.$emit('update:page', page);
        this.$emit('change', page);
      },

      selectChanged(ev, a)
      {
        this.set(+ev.target.value);
      }

    }
  }
</script>

<style lang="scss">
  .ui-pagination
  {
    display: flex;
    justify-content: center;
    margin-top: var(--padding);
    align-items: center;
  }

  .ui-pagination-select
  {
    margin: 0 30px;
    position: relative;

    .ui-button
    {
      padding: 0 2px;
    }

    select
    {
      width: 100%;
      position: absolute;
      z-index: 1;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      opacity: 0;
    }
  }

  .ui-pagination-button[disabled] .ui-button-icon
  {
    color: var(--color-text-dim);
  }
</style>