<script setup lang="ts">
import type { ReferenceEntry } from '~/stores/reference';

defineProps({ entries: Array<ReferenceEntry> });
</script>

<template>
  <q-card flat bordered class="my-card" v-for="entry in entries" :key="entry.title">
    <q-card-section>
      <div class="row items-center no-wrap">
        <div class="col">
          <div class="text-h6">{{ entry.title }}</div>
          <div class="text-subtitle2">{{ entry.subtitle }}</div>
        </div>
        <div class="col-auto">
          <q-btn color="grey-7" round flat icon="more_vert">
            <q-menu cover auto-close>
              <q-list>
                <q-item clickable><q-item-section>Remove Card</q-item-section></q-item>
                <q-item clickable><q-item-section>Send Feedback</q-item-section></q-item>
                <q-item clickable><q-item-section>Share</q-item-section></q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </div>
      </div>
    </q-card-section>
    <q-separator />
    <q-card-actions>
      <q-btn flat :to="'reference/' + entry.id + '/view'">Read</q-btn>
    </q-card-actions>
  </q-card>
</template>
