<i18n>
{
  "en": {
    "events": "Events",
    "eventCalendar": "Event Calendar",
    "eventList": "Event List"
  },
  "de": {
    "events": "Veranstaltungen",
    "eventCalendar": "Veranstaltungskalendar",
    "eventList": "Veranstaltungsliste"
  }
}
</i18n>

<template>
  <v-container fill-height class="">
    <v-layout>
      <v-flex xl10 offset-xl1 lg12>
        <v-card class="tabbar-card">
          <v-tabs v-model="tabs" grow hide-slider :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
              <v-tab><v-icon class="tabbar-tabicon">calendar_view_day</v-icon>{{ $t('eventList') }}</v-tab>
          </v-tabs>
        </v-card>
        <v-tabs-items v-model="tabs" style="padding-bottom: 20px">
          <v-tab-item>
            <v-subheader>{{ $t('eventList') }}</v-subheader>
            <event-module-event-list/>
          </v-tab-item>
        </v-tabs-items>
      </v-flex>
    </v-layout>
    <v-dialog
      :value="dialog.show"
      @input="setDialog({ show: $event })"
      :max-width="dialog.type === 'delete' ? '500px' : '1200px'"
      scrollable
      persistent
      :fullscreen="$vuetify.breakpoint.smAndDown"
    >
      <event-module-delete v-if="dialog.type === 'delete'" />
      <event-module-edit v-else-if="dialog.type === 'edit'"/>
    </v-dialog>
  </v-container>
</template>

<script>
import EventModuleEventList from '@/components/EventModuleEventList'
import EventModuleEdit from '@/components/EventModuleEdit'
import EventModuleDelete from '@/components/EventModuleDelete'
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
  name: 'EventModule',
  components: {
    EventModuleEventList,
    EventModuleEdit,
    EventModuleDelete
  },
  data () {
    return {
      tabs: 0
    }
  },
  computed: {
    ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor']),
    ...mapState('events', ['dialog'])
  },
  methods: {
    ...mapMutations('events', ['setDialog'])
  },
  created () {
    this.$store.dispatch('events/loadLists')
    this.$store.dispatch('groups/loadLists')
  }
}
</script>

<style scoped>

</style>
