<script setup>

import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { ref } from "vue";
import DepartmentDailyReportSmall
  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportSmall.vue";
import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
import DepartmentDailyReportThisWeek
  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyReportThisWeek.vue";
import DepartmentDashboardOverviewNavigation
  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDashboardOverviewNavigation.vue";
import { show_this_week } from "@/views/dashboards/departmentDashboard/other/displays/DepartmentsOverviewObject.vue";
import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";
import DepartmentDailyBookingReportSmall
  from "@/views/dashboards/departmentDashboard/other/displays/DepartmentDailyBookingReportSmall.vue";

const departments = ref(null);

// Get the departments
const accessibleDepartments = SessionUser.functions.getAccessibleDepartments();

</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
    <DepartmentDashboardPageWrapper
        title="Overblik"
        subtitle="Se hvordan dine afdelinger klarer sig"
    >
      <RequiresPermission permission="list_department_daily_reports">
        <DepartmentDailyReportThisWeek :departments="accessibleDepartments" v-if="accessibleDepartments.length > 0" />
      </RequiresPermission>
      <div class="columns is-multiline">
        <div class="column is-12" v-for="department_id in accessibleDepartments" :key="department_id">
          <WhiteBox>
            <RequiresPermission permission="list_department_daily_reports">
              <DepartmentDailyReportSmall :department_id="department_id" />
            </RequiresPermission>
            <RequiresPermission permission="list_bookings" v-show="!SessionUser.hasPermission('list_department_daily_reports')">
              <DepartmentDailyBookingReportSmall v-bind:department_id="department_id" :options="{show_department_name: (!SessionUser.hasPermission('list_department_daily_reports'))}" />
            </RequiresPermission>
            <RequiresPermission permission="department_timebookings_entries_get" v-show="!SessionUser.hasPermission('list_department_daily_reports') && !SessionUser.hasPermission('list_bookings')">
              <div class="message is-warning">
                <div class="message-body">
                  <!-- Under development -->
                  <p>
                    <strong>Under udvikling</strong> - Overblik over tidsbookinger, du ellers ville kunne tilgå her, er under udvikling og vil snart være tilgængelig.
                  </p>
                </div>
              </div>
            </RequiresPermission>
          </WhiteBox>
        </div>
      </div>
    </DepartmentDashboardPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>