{% extends "base.html" %}
{% block content %}
  <v-data-table
   :headers="headers"
   :items="items"
   :items-per-page="25"
  >
    <template v-slot:top>
      <v-toolbar flat>
        <v-btn color="green darken-1" href="new/" dark class="ma-2">
          <v-icon left>mdi-plus</v-icon>
          Create
        </v-btn>
      </v-toolbar>
      <v-dialog v-model="dialogDelete" max-width="500px">
        <v-card>
          <v-card-title class="headline">Are you sure you want to delete this item?</v-card-title>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="closeDelete">Cancel</v-btn>
            <v-btn color="pink darken-1" text @click="deleteItemConfirm">OK</v-btn>
            <v-spacer></v-spacer>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </template>
    {% for field in fields.properties.keys() %}
      {% include fields|template_for_field(field) ignore missing %}
    {% endfor %}
    <template v-slot:item.__actions="{ item }">
      <v-btn :href="item.id + '/'" icon color="purple darken-2" title="Edit">
        <v-icon :href="item.id + '/'" small>mdi-pencil</v-icon>
      </v-btn>
      <v-btn icon color="red darken-2" @click="deleteItem(item)" title="Delete">
        <v-icon small>mdi-delete</v-icon>
      </v-btn>
    </template>
  </v-data-table>
{% endblock %}
{% block vue_app %}
  <script>
    {{ axiosConfig(XSRF) }}
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data() {
        return {
          headers: {{headers|tojson(indent=True)}},
          items: {{items|tojson(indent=True)}},
          editedIndex: -1,
          editedItem: null,
          dialogDelete: false,
          drawer: false,
        };
  		},
      methods: {
        deleteItem(item) {
          this.editedIndex = this.items.indexOf(item);
          this.editedItem = Object.assign({}, item);
          this.dialogDelete = true;
        },
        deleteItemConfirm() {
          axios.delete(`${this.editedItem.id}/`).then(() => {
            this.items.splice(this.editedIndex, 1);
            this.closeDelete();
          });
        },
        closeDelete() {
          this.dialogDelete = false;
          this.editedItem = {};
          this.editedIndex = -1
        }
      },
    })
  </script>
{% endblock vue_app %}
