<template>
  <div class="row">
    <select class="col-sm-4 form-control input-sm -page-size-select" v-model="query.limit"
      @change="query.offset = 0 /* reset to the first page */">
      <option v-for="(i, idx) in pageSizeOptions" :value="i" :key="idx">{{ i }}</option>
    </select>
    <label class="col-sm-8" name="PageSizeSelect">
      {{ $i18nForDatatable('items / page') }}
    </label>
  </div>
</template>
<script>
export default {
  name: 'PageSizeSelect',
  props: {
    query: { type: Object, required: true },
    pageSizeOptions: { type: Array, required: true }
  }
}
</script>
<style>
.-page-size-select {
  display: inline-block;
  width: 65px;
}
</style>
