<template>
  <div class="text-neutral-lighter flex items-center justify-between grid grid-cols-12">
    <div class="col-span-6">
      <div class="mb-2">
        <icon icon="lit" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span v-if="route.type === 'before_coffin'">
            <b>Transport avant et après mise en bière</b></span
        >
        <span v-if="route.type === 'after_coffin'">
            <b>Transport après mise en bière</b></span
        >
      </div>
      <div class="mb-2  col-span-6">
        <icon icon="voiture" class="text-primary-light mr-3 h-6 w-6"></icon>
        <b>Véhicule prévu :</b> {{ route.vehicle.name }} ({{ route.vehicle.license_plate }})
      </div>
      <div class="mb-2">
        <icon icon="profil" class="text-primary-light mr-3 h-6 w-6"></icon>
        <b>Chauffeur prévu :</b> {{ route.operator.identifier }}
      </div>
    </div>
    <div class="col-span-6">
      <div class="mb-2">
        <icon icon="profil" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span class="font-bold">Chauffeur :</span> {{ route.company.name }}
      </div>
      <div class="mb-2">
        <icon icon="profil" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span class="font-bold">Tél : </span>{{ route.company.phone }}
      </div>
      <div v-if="route.status !== 'completed'">
        <icon icon="oeil" class="text-primary-light mr-3 h-6 w-6"></icon>
        <span class="font-bold">Mise à disposition du corps :</span>
      </div>
    </div>
  </div>
</template>
<script setup>
defineProps({
  route: {
    type: Object,
    required: true,
    default: () => ({})
  }
});

</script>
