<template>
  <div
    v-if="boats"
    class="row">
    <q-card
      v-for="boat in boats"
      :key="boat.id"
      class="q-ma-sm col-xs-12 col-sm-6 col-xl-3">
      <q-card-section>
        <q-img
          :src="boat.imgSrc"
          :fit="'scale-down'">
          <div class="row absolute-top">
            <div class="col text-h6 text-left">{{ boat.name }}</div>
            <div class="col text-right">{{ boat.class }}</div>
          </div>
        </q-img>
      </q-card-section>

      <q-separator />

      <!-- <q-card-actions align="evenly">
        <q-btn flat>Info</q-btn>
        <q-btn flat>Book</q-btn>
        <q-btn flat>Check-Out</q-btn>
        <q-btn flat>Check-In</q-btn>
      </q-card-actions> -->
    </q-card>
  </div>
  <div v-else><q-card>Sorry, no boats to show you!</q-card></div>
</template>

<script setup lang="ts">
import { Boat } from 'src/stores/boat';

defineProps({
  boats: Array<Boat>,
});
</script>
