<template>
  <v-card id="transcard" class="elevation-0">
    <v-card-title class="pl-0">
      <div class="display-1-custom mb-0">{{text}}</div>
    </v-card-title>
    <v-divider class="mb-5">
    </v-divider>
    <v-container grid-list-md text-xs-center>
    <v-layout row wrap>
      <v-flex xs12 sm5 lg5 xl5 class="pb-3">
<v-text-field color="blue lighten-1" solo append-icon="search" :label="$t('search')" v-model="search" class="pl-0 elevation-0"></v-text-field>
      </v-flex>
      <v-spacer></v-spacer>
      <v-btn color="accent_two" class="mt-3 elevation-0" dark slot="activator" @click.native="downloadCSV">
        <v-icon>get_app</v-icon>
      </v-btn>
<v-btn color="primary" class="mt-3 elevation-0" dark slot="activator" @click.native="goToForm">
        <v-icon>add</v-icon>
      </v-btn>

    <v-dialog v-model="dialog" persistent max-width="290">
      <v-btn color="red lighten-1" class="mt-3 elevation-0" dark slot="activator">
        <v-icon>delete</v-icon>
      </v-btn>
         <v-card>
        <v-card-title class="headline">{{$t('delete_row')}}</v-card-title>
        <v-card-text>{{$t('delete_row_description')}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="secondary" flat @click.native="dialog = false">{{$t('cancel')}}</v-btn>
          <v-btn color="primary" flat @click.native="processDelete()">{{$t('confirm')}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    </v-layout>
  </v-container>
    <v-data-table v-bind:headers="headers" select-all item-key="id" v-model="selected" :items="items" class="elevation-0" v-bind:search="search"  :rows-per-page-text="$t('rows_per_page_text')" :no-data-text="$t('no_datatable_data')" :no-results-text="$t('no_results_found')">
      <template slot="headerCell" slot-scope="props">
        <v-tooltip bottom>
          <span slot="activator">
            {{ props.header.text }}
          </span>
          <span>
            {{ props.header.text }}
          </span>
        </v-tooltip>
</template>

<template slot="items" slot-scope="props">
        <tr :active="props.selected" @click="props.selected = !props.selected">
  <td class="text-xs-center">
  <v-checkbox
            :input-value="props.selected"
            primary
            light
            hide-details
          ></v-checkbox>
  </td>

  <td class="text-xs-center" v-for="item in props.item">
    {{ item }}
  </td>
  <td class="text-xs-center">
    <v-btn icon @click.native="processEdit(props.item)">
      <v-icon color="orange accent-2">mode_edit</v-icon>
    </v-btn>
  </td>
    </tr>
</template>
<template slot="pageText" slot-scope="props">
  {{ props.pageStart }} - {{ props.pageStop }} {{$t('of')}} {{ props.itemsLength }}
</template>
</v-data-table>
</v-card>
</template>

<script>
export default {
  name: "ListWithFormEvents",
  data() {
    return {
      search: "",
      data: "",
      selected: [],
      dialog: false
    };
  },
  methods: {
    processEdit(data) {
      this.$emit("editData", data);
    },
    processDelete() {
      this.dialog = false;
      this.$emit("deleteData", this.selected);
    },
    goToForm() {
      this.$emit("goToForm");
    },
    downloadCSV() {
      this.$emit("download");
    }
  },
  props: ["text", "items", "headers"]
};
</script>

<style>
#transcard {
  background: transparent;
}

#transcard .container.grid-list-md {
  padding-left: 0px;
  padding-right: 0px;
}

table.table tbody td,
.datatable__actions {
  font-size: 14px;
  border-bottom: 1px solid #dbe4e8;
  color: #4a5961;
  font-family: "Quicksand";
  background: #fff;
}

.application .theme--light.datatable .datatable__actions,
.theme--light .datatable .datatable__actions {
  border-top: none;
  border-bottom: none;
}

.table.table {
  border: none;
  background: #7460ee;
}

.table.table thead th {
  font-size: 15px;
  font-family: "Nunito";
  color: #fff;
  font-weight: 600;
  text-align: center !important;
}
.application
  .thead
  .theme--light.input-group--selection-controls
  .icon--selection-control,
.theme--light .input-group--selection-controls .icon--selection-control {
  color: #fff;
}
.application
  .thead
  .theme--light.input-group--selection-controls.input-group--active
  .icon--selection-control,
.theme--light
  .input-group--selection-controls.input-group--active
  .icon--selection-control {
  color: #fff;
}
.application .theme--light.input-group input,
.application .theme--light.input-group textarea,
.theme--light .input-group input,
.theme--light .input-group textarea {
  color: #4a5961;
}

.application .theme--light.datatable thead th.column.sortable.active,
.application .theme--light.datatable thead th.column.sortable.active i,
.application .theme--light.datatable thead th.column.sortable:hover,
.theme--light .datatable thead th.column.sortable.active,
.theme--light .datatable thead th.column.sortable.active i,
.theme--light .datatable thead th.column.sortable:hover,
.application .theme--light.datatable thead th.column.sortable i,
.theme--light .datatable thead th.column.sortable i {
  color: #fff;
}

.datatable__progress {
  display: none;
}
</style>