<template>
  <div id="public-type-list">
    <table>
      <thead>
        <th>
          <tr>{{ messages.get("animation", "public_type_name") }}</tr>
        </th>
      </thead>
      <tbody>
        <template v-if="pagination.instances.length">
          <tr v-for="(item, index) in pagination.instances" :key="index">
            <td>
              <a :href="'./admin.php?categ=animations&sub=public_type&action=edit&id=' + item.id">{{ item.label }}</a>
            </td>
          </tr>
        </template>
        <tr v-else>
          <td>{{ messages.get("animation", "public_type_empty") }}</td>
        </tr>
      </tbody>
    </table>

    <paginator
      :total="pagination.total"
      :current-page="pagination.currentPage"
      :nbPerPage="pagination.nbPerPage"
      @switchPage="switchPage($event)"
    />

    <div class="row">
      <input type="button" class="bouton" :value="messages.get('animation', 'add_public_type')" @click="add" />
    </div>
  </div>
</template>

<script>
import paginator from "@/common/navbar/paginator.vue";

export default {
  props: {
    pagination: {
      type: Object,
      required: true,
    },
  },
  components: { paginator },
  methods: {
    switchPage(event) {
      window.location = "./admin.php?categ=animations&sub=public_type&page=" + event.page;
    },
    add() {
      window.location = "./admin.php?categ=animations&sub=public_type&action=add";
    },
  },
};
</script>
