<script setup lang="ts">
import { MissingLivery } from "@/Types/types";
import {router} from "@inertiajs/vue3";
import CopyButton from "@/Components/FlightsGoneBy/CopyButton.vue";


const props = defineProps<{
    livery: MissingLivery;
}>();

const ignore = () => {
    router.post(route('admin.ignore-missing-livery'), { filename: props.livery.filename });
};
</script>

<template>
    <v-card flat rounded="lg" class="mb-2 px-4 py-3">
        <v-row align="center" no-gutters>

            <v-col cols="12" sm="4">
                <div class="d-flex align-center ga-1 text-medium-emphasis" style="font-size: 11px;">
                    Airline
                </div>
                <div style="font-size: 12px;" class="font-weight-medium">{{ livery.airline_name }}</div>
            </v-col>

            <v-col cols="12" sm="4">
                <div class="d-flex align-center ga-1 text-medium-emphasis" style="font-size: 11px;">
                    Aircraft
                    <CopyButton :text="livery.clipboard_text" />
                </div>
                <div style="font-size: 12px;" class="font-weight-medium">{{ livery.aircraft_display_name }}</div>
            </v-col>

            <v-col cols="12" sm="4">
                <div class="d-flex align-center ga-1 text-medium-emphasis" style="font-size: 11px;">
                    Filename
                    <CopyButton :text="livery.filename" />
                </div>
                <div style="font-size: 12px;" class="font-weight-medium">{{ livery.filename }}</div>
            </v-col>

        </v-row>

        <v-row no-gutters class="mt-2" justify="end">
            <v-btn
                size="x-small"
                variant="tonal"
                color="error"
                prepend-icon="mdi-eye-off"
                @click="ignore"
            >
                Ignore
            </v-btn>
        </v-row>
    </v-card>
</template>
