<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Head, Link } from "@inertiajs/vue3";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faPlus, faPenToSquare, faTrash } from "@fortawesome/free-solid-svg-icons";

const props = defineProps({
  templates: { type: Array, default: () => [] },
});

function destroyTemplate(tpl) {
  if (!confirm(`Delete template "${tpl.name}"?`)) return;
  window.axios
    .delete(route("admin.email-templates.destroy", tpl.id))
    .then(() => window.location.reload());
}
</script>

<template>
  <AdminLayout title="Email predloge">
    <Head title="Email predloge" />
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-xl font-semibold text-gray-800">Email predloge</h1>
      <Link
        :href="route('admin.email-templates.create')"
        class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 shadow"
      >
        <FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Nova predloga
      </Link>
    </div>

    <div class="rounded-lg border bg-white overflow-hidden shadow-sm">
      <table class="w-full text-sm">
        <thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
          <tr>
            <th class="px-3 py-2 text-left">Ime</th>
            <th class="px-3 py-2 text-left">Ključ</th>
            <th class="px-3 py-2 text-left">Entities</th>
            <th class="px-3 py-2 text-left">Aktivno</th>
            <th class="px-3 py-2 text-left">Akcije</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="t in templates" :key="t.id" class="border-t last:border-b hover:bg-gray-50">
            <td class="px-3 py-2 font-medium text-gray-800">{{ t.name }}</td>
            <td class="px-3 py-2 text-gray-600">{{ t.key }}</td>
            <td class="px-3 py-2 text-gray-600">{{ (t.entity_types || []).join(', ') }}</td>
            <td class="px-3 py-2">{{ t.active ? 'da' : 'ne' }}</td>
            <td class="px-3 py-2 flex items-center gap-2">
              <Link
                :href="route('admin.email-templates.edit', t.id)"
                class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-indigo-600 border-indigo-300 bg-indigo-50 hover:bg-indigo-100"
              >
                <FontAwesomeIcon :icon="faPenToSquare" class="w-3.5 h-3.5" /> Uredi
              </Link>
              <button
                @click="destroyTemplate(t)"
                class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-rose-700 border-rose-300 bg-rose-50 hover:bg-rose-100"
              >
                <FontAwesomeIcon :icon="faTrash" class="w-3.5 h-3.5" /> Izbriši
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </AdminLayout>
  </template>
