<script setup lang="ts">
import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
import { Head } from "@inertiajs/vue3";
import { MissingAirline } from "@/Types/types";
import MissingAirlineCard from "@/Components/Admin/MissingAirlineCard.vue";
import AdminLayout from "@/Pages/Admin/AdminLayout.vue";
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";

defineOptions({ layout: AdminLayout });

defineProps<{
    missingAirlines: MissingAirline[]
}>()
</script>

<template>
    <Head title="Missing Airlines" />

    <Panel>
        <template #header>
            <h1 class="panel-title">Missing Airlines</h1>
            <span class="panel-subtitle">
                {{ missingAirlines.length }} unmatched code{{ missingAirlines.length === 1 ? '' : 's' }}
            </span>
        </template>

        <div v-if="missingAirlines.length === 0" class="empty-state">
            No missing airlines 🎉
        </div>

        <div v-else class="missing-airlines-grid">
            <MissingAirlineCard
                v-for="airline in missingAirlines"
                :key="airline.code"
                :airline="airline"
            />
        </div>
    </Panel>
</template>

<style scoped>
.panel-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e6e9ef;
}

.panel-subtitle {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #778;
}

.missing-airlines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.empty-state {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    color: #778;
    padding: 2rem 0;
    text-align: center;
}
</style>
