<script setup>
import ShipmentInfoModal from "@/components/ShipmentInfoModal.vue";
import { ref, onMounted } from "vue";
const shipments = window.gcargo.shipments;
const modals = ref([]);

onMounted(() => {
  shipments.forEach((shipment) => {
    modals[shipment.id] = false;
  });
});
</script>
<template>
  <div v-if="shipments.length > 0" class="flex gap-2 items-center">
    <template v-for="shipment in shipments" :key="shipment.id">
      <img
        :src="shipment.cargo_company.logo"
        class="object-cover w-10 cur"
        @click="modals[shipment.id] = !modals[shipment.id]"
      />
      <ShipmentInfoModal v-model="modals[shipment.id]" :shipment="shipment" />
    </template>
  </div>
</template>
