<template>
  <q-btn-dropdown
    dense
    flat
    round
    dropdown-icon="mdi-cog"
    size="md"
    color="black"
    outline
    @click.stop
  >
    <q-list class="flex column items-center q-gutter-none">
      <q-item v-if="props.enableDuplicate" v-close-popup clickable>
        <q-item-section style="min-width: 120px">
          <q-item-label
            class="q-pa-sm border-style flex items-center justify-center"
          >
            <span class="text-subtitle2 text-primary">Ajustes</span>
            <q-icon name="mdi-cog" size="sm" color="primary" class="q-px-xs" />
          </q-item-label>
        </q-item-section>
      </q-item>

      <q-item v-if="props.enableDuplicate" v-close-popup clickable>
        <q-item-section style="min-width: 120px">
          <q-item-label
            class="q-pa-sm border-style flex items-center justify-center"
          >
            <span class="text-subtitle2 text-primary">Clonar</span>
            <q-icon
              name="mdi-text-box-multiple-outline"
              size="sm"
              color="primary"
              class="q-px-xs"
            />
          </q-item-label>
        </q-item-section>
      </q-item>

      <q-item v-if="props.enableDelete" v-close-popup clickable>
        <q-item-section class="q-pa-md border-style">
          <q-item-label>
            <q-icon name="mdi-delete-empty" size="sm" color="negative" />
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-btn-dropdown>
</template>
<script setup>
const props = defineProps({
  row: {
    type: Object,
    required: true,
  },
  enableDuplicate: {
    type: Boolean,
    default: false,
  },
  enableDelete: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped>
.file-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.file-label input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
</style>
