<script setup lang="ts">
import {Flight, UserActionChange} from "@/Types/types";
import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
import {computed} from "vue";
import GenericFieldChange from "@/Components/FlightsGoneBy/Feed/FieldChanges/GenericFieldChange.vue";
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";

const props = defineProps<{
    original: Flight
    updated: Flight
}>()

</script>

<template>
    <GenericFieldChange label="Airline">
        <template #from>
            <span class="airline">
                <AirlineLogo :airline="original.airline" />
                {{ original.airline?.display_name ?? 'None' }}
            </span>
        </template>
        <template #to>
            <span class="airline">
                <AirlineLogo :airline="updated.airline" />
                {{ updated.airline?.display_name ?? 'None' }}
            </span>
        </template>
    </GenericFieldChange>
</template>
<style scoped>
.airline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.from .airline {
    text-decoration: line-through;
}
</style>
