<script setup>
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
import NotFoundFallBackPageWrapper from "@/components/page/wrappers/NotFoundFallBackPageWrapper.vue";
import ElementTabsBox from "@/components/displays/boxes/ElementTabsBox.vue";
import NotificationsPhonePagination
  from "@/components/displays/pagination/models/DepartmentPos/NotificationsPhonePagination.vue";
</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
    <DepartmentDashboardPageWrapper
        title="Notifikationer"
        subtitle="Oversigt over afdelingens notifikationer"
    >
      <NotFoundFallBackPageWrapper :exists="SessionUser.functions.getDepartmentIdFromUrl() && SessionUser.canAccessDepartment(SessionUser.functions.getDepartmentIdFromUrl())" error="Please select a department, that you have access to. If you believe this is an error, please contact support.">
        <element-tabs-box
          defaultActiveTab="sms"
          :allow-compact-when-one-tab="true"
          :tabs="[
            { name: 'SMS', slot: 'sms', icon: 'fas fa-sms', hidden: false },
            //{ name: 'E-mail', slot: 'email', icon: 'fas fa-envelope', hidden: false },
          ]"
          >
          <template #sms>
            <!-- What is this? -->
            <div class="message">
              <div class="message-header">
                <p>SMS-notifikationer</p>
              </div>
              <div class="message-body">
                <p>Oversigt over afdelingens SMS-notifikations telefonnumre.</p>
                <p>Aktiverede telefonnumre vil modtage SMS-notifikationer når en kunde laver en booking.</p>
              </div>
            </div>
            <NotificationsPhonePagination />
          </template>
        </element-tabs-box>
      </NotFoundFallBackPageWrapper>
    </DepartmentDashboardPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>