<i18n>
{
  "en": {
    "deleteAreYouSure": "Are you sure you want to delete this backend? | Are you sure you want to delete those backends?",
    "removeBackend": "Remove one backend | Remove {0} backends",
    "backends": "Backends"
  },
  "de": {
    "deleteAreYouSure": "Sind Sie sicher, dass sie dieses Backend Löschen wollen? | Sind sie sicher, dass sie diese Backends Löschen wollen?",
    "removeBackend": "Entferne ein Backend | Entferne {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
      :value="$store.state.backends.dialog"
      @input="$store.commit('backends/setDialog', $event)"
      max-width="500px"
      scrollable
    >
      <v-card>
        <v-card-title primary-title class="elevation-3">
          <div>
            <div class="headline">{{ $tc('removeBackend', selected.length, [selected.length]) }}</div>
          </div>
        </v-card-title>
        <v-card-text>
          {{ $tc('deleteAreYouSure', selected.length) }}
            <template v-for="item in selected">
              <div class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }} ({{ item.type }})</div>
            </template>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat="flat" @click="$store.commit('backends/setDialog', false)">{{ $t('cancel') }}</v-btn>
          <v-btn color="error" @click="$store.commit('backends/setDialog', false); $store.dispatch('backends/deleteSelectedBackends')">{{ $t('delete') }}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <backend-module-edit :backendId="$store.state.backends.backendId"/>
    <backend-module-sync :backendId="$store.state.backends.backendId"/>
  </v-container>
</template>

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

export default {
  name: 'BackendModule',
  components: {
    BackendModuleTable,
    BackendModuleEdit,
    BackendModuleSync
  },
  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>
