<template>
  <v-app>
    <v-card v-if="data">
      <v-card-title>
        Administración de Paginas
        <v-spacer></v-spacer>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Buscar"
          single-line
          hide-details
        ></v-text-field>
      </v-card-title>
      <v-data-table
        :headers="headers"
        :items="data"
        class="elevation-1"
        :search="search"
      >
        <template v-slot:item.link="{ item }">
          <v-btn icon :href="item.slug" color="primary" target="_blank">
            <v-icon>mdi-open-in-new</v-icon>
          </v-btn>
        </template>
        <template v-slot:item.menu="{ item }">
          <v-icon v-if="item.is_menu" color="green" dark> mdi-checkbox-marked-circle </v-icon>
          <v-icon v-else > mdi-close-circle </v-icon>
        </template>
        <template v-slot:item.actions="{ item }">
          <v-btn color="red" fab x-small dark @click="edit(item.id)">
            <v-icon> mdi-pencil </v-icon>
          </v-btn>
        </template>
      </v-data-table>
    </v-card>
  </v-app>
</template>
  
  <script>
export default {
  data() {
    return {
      data: null,
      search: "",
      headers: [
        { text: "Nombre", value: "name" },
        { text: "Url", value: "link" },
        { text: "Secciones", value: "sections" },
        { text: "Menu", value: "menu" },
        { text: "Acciones", value: "actions", sortable: false },
      ],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      axios.get("/api/page/get-pages").then((response) => {
        this.data = response.data;
      });
    },
    edit(id) {
      window.location.href = "/panel-administracion/paginas/" + id + "/editar";
    },
  },
};
</script>