<script setup lang="ts">
import { useBoatStore } from '~/stores/boat';
import type { Boat } from '~/utils/boat.types';

const boats = useBoatStore().boats;
const boat = <Boat | undefined>undefined;
</script>

<template>
  <q-select v-model="boat" :options="boats" option-value="id" option-label="name" label="Boat">
    <template v-slot:prepend>
      <q-item-section avatar>
        <q-img v-if="boat?.iconSrc" :src="boat?.iconSrc" />
        <q-icon v-else name="sailing" />
      </q-item-section>
    </template>
    <template v-slot:option="scope">
      <q-item v-bind="scope.itemProps">
        <q-item-section avatar>
          <q-img :src="scope.opt.iconsrc" />
        </q-item-section>
        <q-item-section>
          <q-item-label>{{ scope.opt.name }}</q-item-label>
          <q-item-label caption>{{ scope.opt.class }}</q-item-label>
        </q-item-section>
        <q-item-section avatar v-if="scope.opt.defects">
          <q-icon name="warning" color="warning" />
          <q-tooltip class="bg-amber text-black shadow-7">
            This boat has notices. Select it to see details.
          </q-tooltip>
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>
