<template>
  <div
    v-if="myrec"
    class="q-py-xs centermydiv cardrec back_img column justify-between"
    :style="{
      width: opt.widthcard,
      height: opt.heightcard,
      backgroundImage:
        `url(` +
        tools.getFullFileName(
          [myrec.foto_collana],
          table,
          myrec.username,
          myrec._id
        ) +
        `)`,
    }"
  >
    <div class="flex-grow" />
    <!-- Questo elemento occupa spazio per separare l'immagine dal titolo -->
    <div class="title-container">
      <div class="text-h6 text-center">
        {{ myrec.title }}
      </div>
    </div>

    <q-item>
      <q-item-section side v-if="tools.canModifyThisRec(myrec, table) || editOn">
        <q-item-label>
          <q-btn rounded dense icon="fas fa-pencil-alt">
            <q-menu>
              <q-list style="min-width: 150px">
                <q-item
                  clickable
                  v-close-popup
                  @click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
                >
                  <q-item-section side>
                    <q-icon name="fas fa-pencil-alt" />
                  </q-item-section>
                  <q-item-section>{{ $t('reg.edit') }}</q-item-section>
                </q-item>
              </q-list>
              <q-list style="min-width: 150px">
                <q-item
                  clickable
                  v-close-popup
                  @click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
                >
                  <q-item-section side>
                    <q-icon name="fas fa-copy" />
                  </q-item-section>
                  <q-item-section>{{ $t('event.duplicate') }}</q-item-section>
                </q-item>
              </q-list>
              <q-list style="min-width: 150px">
                <q-item
                  clickable
                  v-close-popup
                  @click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
                >
                  <q-item-section side>
                    <q-icon name="fas fa-trash-alt" />
                  </q-item-section>
                  <q-item-section>{{ $t('reg.elimina') }}</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
        </q-item-label>
      </q-item-section>
    </q-item>
  </div>
</template>
<script lang="ts" src="./CMyRecCatalog.ts">
</script>

<style lang="scss" scoped>
@import './CMyRecCatalog.scss';
</style>
