<template>
  <div class="dest-mass-route-row-container">
    <div class="dest-mass-route-row-supplier">
      <flag :iso="row.supplier.country.iso_code"/>
      {{ row.supplier.name }}
    </div>
    <destination-mass-route-cell :destination="dest" v-for="dest in row.destinations" class="dest-mass-route-row-dest"
                                 :key="dest.id">
    </destination-mass-route-cell>
  </div>
</template>

<script>

import Checkbox from "@/components/UI/Checkbox.vue";
import Flag from "@/components/UI/Flag.vue";
import RouteDropdown from "@/components/UI/RouteDropdown.vue";
import DestinationMassRouteCell from "@/components/layout/edit/destination/mass/DestinationMassRouteCell.vue";

export default {
  name: "DestinationMassRouteRow",
  components: {DestinationMassRouteCell, RouteDropdown, Flag, Checkbox},
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  computed: {
    routes() {
    },
  },
  methods: {
    toggleDropdown() {

    }
  }
}
</script>


<style scoped>


.dest-mass-route-row-container {
  display: flex;
  flex-direction: row;
  gap: 1.6rem;
  padding: 1.2rem 2.4rem;
  justify-content: flex-start;
  border-bottom: 0.16rem solid #f3f4f6;
  transition: background-color 0.2s ease;
  min-width: fit-content;
}

.dest-mass-route-row-container:hover {
  background-color: rgba(107, 134, 156, 0.05);
}


.dest-mass-route-row-supplier {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  width: 24rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: #6b7280;
  flex-shrink: 0;
}


</style>