<script setup lang="ts">
const templates = useTemplates()
const queue = usePrintQueue()

function loadTemplate(id: string) {
  const ops = templates.loadTemplate(id)
  if (ops) {
    queue.loadFromTemplate(ops)
  }
}

function duplicateTemplate(id: string) {
  templates.duplicateTemplate(id)
}

function deleteTemplate(id: string) {
  templates.deleteTemplate(id)
}
</script>

<template>
  <div>
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
        Templates guardados
      </h2>
      <UBadge v-if="templates.templates.value.length > 0" variant="subtle">
        {{ templates.templates.value.length }}
      </UBadge>
    </div>

    <div v-if="templates.templates.value.length === 0" class="text-center py-12">
      <UIcon name="i-heroicons-document-duplicate" class="w-12 h-12 text-gray-400 dark:text-gray-600 mx-auto mb-3" />
      <p class="text-gray-500 dark:text-gray-400 mb-2">
        No hay templates guardados
      </p>
      <p class="text-sm text-gray-400 dark:text-gray-500">
        Crea comandos en el constructor y guárdalos como template desde la cola
      </p>
    </div>

    <div v-else class="grid gap-3 sm:grid-cols-2">
      <TemplatesTemplateCard
        v-for="template in templates.templates.value"
        :key="template.id"
        :template="template"
        @load="loadTemplate"
        @duplicate="duplicateTemplate"
        @delete="deleteTemplate"
      />
    </div>
  </div>
</template>
