<i18n>
{
  "en": {
    "delete-are-you-sure": "Are you sure you want to delete this backend? | Are you sure you want to delete those backends?",
    "delete-backend": "Delete {0} backend | Delete {0} backends",
    "backends": "Backends"
  },
  "de": {
    "delete-are-you-sure": "Sind sie sicher, dass sie dieses Backend Löschen wollen? | Sind sie sicher, dass sie diese Backends Löschen wollen?",
    "delete-backend": "Lösche {0} Backend | Delete {0} Backends",
    "backends": "Backends"
  }
}
</i18n>

<template>
  <v-container fill-height>
    <v-layout>
      <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
      <v-card>
        <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
          v-model="tab"
          centered
        >
          <v-tab>
            {{ $t('backends') }}
          </v-tab>
        </v-tabs>
      </v-card>
      <v-tabs-items v-model="tab">
        <v-tab-item>
          <v-subheader>{{ $t('backends') }}</v-subheader>
          <backend-module-table/>
        </v-tab-item>
      </v-tabs-items>
      </v-flex>
    </v-layout>

    <v-dialog
      v-if="$store.state.backends.dialog"
      :value="$store.state.backends.dialog"
      @input="$store.commit('backends/setDialog', { show: $event })"
      max-width="700px"
    >
      <v-card v-if="$store.state.backends.deleteDialog">
        <v-card-title primary-title>
          <div>
            <div class="headline">{{ $tc('delete-backend', selected.length, [selected.length]) }}</div>
            <template v-for="item in selected">
              <span class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }} ({{ item.type }})</span><br :key="item.id">
            </template>
          </div>
        </v-card-title>
        <v-card-text>
          {{ $tc('delete-are-you-sure', selected.length) }}
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat="flat" @click="$store.commit('backends/setDialog', { show: false, del: true })">{{ $t('cancel') }}</v-btn>
          <v-btn color="error" @click="$store.commit('backends/setDialog', { show: false }); $store.dispatch('backends/deleteSelectedBackends')">{{ $t('delete') }}</v-btn>
        </v-card-actions>
      </v-card>
      <backend-module-edit v-else :backendId="$store.state.backends.backendId"/>
    </v-dialog>

  </v-container>
</template>

<script>
import BackendModuleTable from '@/components/BackendModuleTable'
import BackendModuleEdit from '@/components/BackendModuleEdit'
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'BackendModule',
  components: {
    BackendModuleTable,
    BackendModuleEdit
  },
  data () {
    return {
      component: 'BackendModuleTable',
      tab: ''
    }
  },
  methods: {
  },
  computed: {
    ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
    ...mapState('backends', ['selected'])
  },
  beforeMount () {
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
