<template>
    <div>
        <!--  BEGIN NAVBAR  -->
        <Header></Header>
        <!--  END NAVBAR  -->

        <!--  BEGIN MAIN CONTAINER  -->
        <div class="main-container sidebar-closed sbar-open collapsible-vertical-mobile" id="container" :class="[!$store.state.is_show_sidebar ? 'sidebar-closed sbar-open' : '', $store.state.menu_style === 'collapsible-vertical' ? 'collapsible-vertical-mobile' : '']">
            <!--  BEGIN OVERLAY  -->
            <div class="overlay" :class="{ show: !$store.state.is_show_sidebar }" @click="$store.commit('toggleSideBar', !$store.state.is_show_sidebar)"></div>
            <div class="search-overlay" :class="{ show: $store.state.is_show_search }" @click="$store.commit('toggleSearch', !$store.state.is_show_search)"></div>
            <!-- END OVERLAY -->

            <!--  BEGIN SIDEBAR  -->
            <Sidebar></Sidebar>
            <!--  END SIDEBAR  -->

            <!--  BEGIN CONTENT AREA  -->
            <div id="content" class="main-content">
                <router-view />

                <!-- BEGIN FOOTER -->
                <Footer></Footer>
                <!-- END FOOTER -->
            </div>
            <!--  END CONTENT AREA  -->

            <!-- BEGIN APP SETTING LAUNCHER -->
            <!-- <AppSettings /> -->
            <!-- END APP SETTING LAUNCHER -->
        </div>
    </div>
</template>

<script setup>
    import { onMounted } from "vue";
    import { useI18n } from "vue-i18n";
    import Header from "../components/layout/header.vue";
    import Sidebar from "../components/layout/sidebar.vue";
    import Footer from "../components/layout/footer.vue";
    import AppSettings from "../components/app-settings.vue";

    const { t } = useI18n();

    onMounted(() => {
        try {
            const deniedPath = sessionStorage.getItem("route_access_denied");
            if (!deniedPath) return;
            sessionStorage.removeItem("route_access_denied");
            const mix = window.Swal?.mixin({ toast: true, position: "top-end", showConfirmButton: false, timer: 5000 });
            mix?.fire({
                icon: "warning",
                title: t("layout.access_denied", { path: deniedPath }),
            });
        } catch {
            /* ignore */
        }
    });
</script>
