<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import { Head } from '@inertiajs/vue3';

defineOptions({
    layout: MainLayout
})

defineProps<{
    user: {
        id: number
        name: string
        email: string
    }
    flights: {
        id: number
        departure: string
        arrival: string
        flight_number: string
        date: string
    }[]
}>()
</script>

<template>
    <Head :title="`${user.name}'s Flights`" />

    <div class="p-6">
        <h1 class="text-2xl font-bold mb-6">{{ user.name }}'s Flights</h1>

        <table class="w-full border-collapse border border-gray-300">
            <thead>
            <tr class="bg-gray-100">
                <th class="border border-gray-300 px-4 py-2 text-left">Flight</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Departure</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Arrival</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Date</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="flight in flights" :key="flight.id" class="hover:bg-gray-50">
                <td class="border border-gray-300 px-4 py-2">{{ flight.flight_number }}</td>
                <td class="border border-gray-300 px-4 py-2">{{ flight.departure }}</td>
                <td class="border border-gray-300 px-4 py-2">{{ flight.arrival }}</td>
                <td class="border border-gray-300 px-4 py-2">{{ flight.date }}</td>
            </tr>
            <tr v-if="flights.length === 0">
                <td colspan="4" class="border border-gray-300 px-4 py-2 text-center text-gray-500">
                    No flights found.
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<style scoped>
</style>
