<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>

<script setup lang="ts">
import { Boat, useBoatStore } from 'src/stores/boat';
const boats = useBoatStore().boats;
const boat = <Boat | undefined>undefined;
</script>
