<template>
  <div v-if="!defaultRoute && showBack" class="flex md:hidden flex-row items-baseline">
    <p v-if="!defaultRoute && showBack" class="text-indigo-500" @click="setLink(null)">zur Übersicht</p>
  </div>
  <slot v-if="headerInsert" name="headerInsert"></slot>
  <div
    class="max-w-full w-full grow flex flex-col divide-y-2 divide-gray-300 bg-white rounded-lg justify-center overflow-hidden"
  >
    <slot name="topBar"></slot>
    <div class="flex flex-col gap-2 grow py-5 overflow-hidden">
      <slot name="diffMain"></slot>
      <div v-if="!diffMain" class="flex flex-col gap-2 grow px-7 overflow-y-scroll">
        <slot name="main"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useNavigationStore } from "../stores/admin/navigation";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    header: {
      type: String,
      default: null,
    },
    showBack: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ...mapState(useNavigationStore, ["activeLink"]),
    defaultRoute() {
      return this.activeLink == null;
    },
    diffMain() {
      return this.$slots.diffMain;
    },
    headerInsert() {
      return this.$slots.headerInsert;
    },
    mid() {
      return window.matchMedia("(min-width: 800px)").matches;
    },
  },
  methods: {
    ...mapActions(useNavigationStore, ["setLink"]),
  },
});
</script>
