<template>
  <div class="d-flex h-100">
    <Spacer />
    <div class="card my-2 mr-2 flex-fill shadow-xs">
      <UIBoxHeader icon="wrench" :title="systemconfigurationLabel" />
      <div class="text-left flex-fill" style="overflow: auto">
        <ul class="nav nav-pills nav-fill border-bottom">
          <li class="nav-item">
            <a
              :class="['nav-link', { active: activeTab === 'pdf-templates' }]"
              href="#"
              @click.prevent="activeTab = 'pdf-templates'"
            >
              <translate>PDF-Templates</translate>
            </a>
          </li>
          <li class="nav-item" v-if="isSysAdmin">
            <a
              :class="['nav-link', { active: activeTab === 'color-settings' }]"
              href="#"
              @click.prevent="activeTab = 'color-settings'"
            >
              <translate>Color Settings</translate>
            </a>
          </li>
          <li class="nav-item" v-if="isSysAdmin">
            <a
              :class="['nav-link', { active: activeTab === 'map-layers' }]"
              href="#"
              @click.prevent="activeTab = 'map-layers'"
            >
              <translate>Map Layers</translate>
            </a>
          </li>
          <li class="nav-item" v-if="isSysAdmin">
            <a
              :class="['nav-link', { active: activeTab === 'data-accuracy' }]"
              href="#"
              @click.prevent="activeTab = 'data-accuracy'"
            >
              <translate>Data Availability/Accuracy</translate>
            </a>
          </li>
          <li class="nav-item" v-if="isSysAdmin">
            <a
              :class="[
                'nav-link',
                { active: activeTab === 'morphology-classbreaks' }
              ]"
              href="#"
              @click.prevent="activeTab = 'morphology-classbreaks'"
            >
              <translate>Bottleneck Morphology Classbreaks</translate>
            </a>
          </li>
        </ul>
        <keep-alive>
          <PDFTemplates v-if="activeTab === 'pdf-templates'" />
          <ColorSettings v-if="isSysAdmin && activeTab === 'color-settings'" />
          <MapLayers v-if="isSysAdmin && activeTab === 'map-layers'" />
          <DataAccuracy v-if="isSysAdmin && activeTab === 'data-accuracy'" />
          <MorphologyClassbreaks
            v-if="isSysAdmin && activeTab === 'morphology-classbreaks'"
          />
        </keep-alive>
      </div>
      <!-- card-body -->
    </div>
  </div>
</template>

<style lang="sass">
.nav-pills
  .nav-link
    border-radius: 0
    &.active
      background: $color-info
</style>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 * Bernhard Reiter <bernhard@intevation.de>
 * Markus Kottländer <markus@intevation.de>
 */
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      activeTab: "pdf-templates"
    };
  },
  components: {
    Spacer: () => import("../Spacer"),
    PDFTemplates: () => import("./PDFTemplates"),
    ColorSettings: () => import("./ColorSettings"),
    MapLayers: () => import("./MapLayers"),
    DataAccuracy: () => import("./DataAccuracy"),
    MorphologyClassbreaks: () => import("./MorphologyClassbreaks")
  },
  computed: {
    ...mapGetters("user", ["isSysAdmin"]),
    systemconfigurationLabel() {
      return this.$gettext("Systemconfiguration");
    }
  },
  mounted() {
    this.$store.dispatch("application/loadConfig");
  }
};
</script>