<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import AdminSidebar from "@/Pages/Admin/AdminSidebar.vue";
import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
import {Head} from "@inertiajs/vue3";

defineProps<{
    title: string;
    missingLiveryCount: number;
    missingAirlineCount: number;

}>()
</script>

<template>
    <MainLayout>
        <Head :title="title" />
        <div class="admin-container">
            <AdminSidebar :missingAirlineCount="missingAirlineCount" :missingLiveryCount="missingLiveryCount" />
            <div class="admin-content">
                <GlassBox class="admin-page" :title="title">
                    <slot />
                </GlassBox>
            </div>
        </div>
    </MainLayout>
</template>

<style scoped>
.admin-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 90dvh;
    /* Override MainLayout's centred main — fill the full height */
    align-self: stretch;
    align-items: stretch;
}

.admin-content {
    display: flex;
    flex-direction: column;
    align-items: center;;
    flex: 1 1 auto;
    padding: 2rem;
    overflow-y: auto;
    min-width: 0;
}

.admin-page {
    width: 100%;
    max-width: 1200px;
    min-height: 50%;
}
</style>
