<!DOCTYPE html>
<html lang="tr">
<head>
  <%- include('../partials/head') %>
  <title>AI Modelleri — LexaClip Admin</title>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100 antialiased">

  <%- include('../partials/admin-nav', { active: 'models', adminUsername }) %>

  <main class="mx-auto max-w-5xl px-6 py-10">
    <div>
      <h1 class="text-2xl font-bold">AI Modelleri</h1>
      <p class="mt-1 text-sm text-slate-400">
        Extension'daki model seçicide aktif modeller listelenir. Model id OpenRouter formatındadır (örn. <code class="rounded bg-slate-800 px-1.5 py-0.5">anthropic/claude-haiku-4.5</code>).
        Premium işaretli modeller yalnızca ücretli planlarda seçilebilir.
        İkon dosya adı extension'daki <code class="rounded bg-slate-800 px-1.5 py-0.5">model-icon/</code> klasöründen: claude.webp, openai-icon.webp, gemini.png, deepseek.webp, grok.png, llama.png, mistral.png, qwen.png, kimi.webp, perplexity.webp, glm.png, yi.png, nova.webp, minimax.png, wizardlm.png
      </p>
    </div>

    <% if (error) { %>
      <div class="mt-6 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-300"><%= error %></div>
    <% } %>

    <details class="mt-8 rounded-2xl border border-slate-800 bg-slate-900/40">
      <summary class="cursor-pointer select-none px-5 py-4 font-semibold text-indigo-400 hover:text-indigo-300">+ Yeni model ekle</summary>
      <form method="POST" action="/admin/models" class="grid gap-4 border-t border-slate-800 p-5 sm:grid-cols-2">
        <label class="text-sm">
          <span class="mb-1 block text-slate-400">Model id (OpenRouter)</span>
          <input name="model_id" required placeholder="anthropic/claude-haiku-4.5" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
        </label>
        <label class="text-sm">
          <span class="mb-1 block text-slate-400">Görünen isim</span>
          <input name="name" required placeholder="Claude Haiku 4.5" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
        </label>
        <label class="text-sm">
          <span class="mb-1 block text-slate-400">İkon dosyası</span>
          <input name="icon" placeholder="claude.webp" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
        </label>
        <div class="flex items-end gap-5 text-sm">
          <label class="flex items-center gap-2"><input type="checkbox" name="is_premium" class="accent-indigo-500" /> Premium</label>
          <label class="text-sm">
            <span class="mb-1 block text-slate-400">Sıra</span>
            <input name="sort_order" type="number" value="0" class="w-24 rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
          </label>
          <button type="submit" class="ml-auto rounded-lg bg-indigo-500 px-5 py-2 text-sm font-semibold text-white transition hover:bg-indigo-400">Ekle</button>
        </div>
      </form>
    </details>

    <div class="mt-8 overflow-x-auto rounded-2xl border border-slate-800">
      <table class="w-full text-left text-sm">
        <thead class="bg-slate-900/70 text-slate-400">
          <tr>
            <th class="px-4 py-3 font-medium">Model id</th>
            <th class="px-4 py-3 font-medium">İsim</th>
            <th class="px-4 py-3 font-medium">İkon</th>
            <th class="px-4 py-3 font-medium">Premium</th>
            <th class="px-4 py-3 font-medium">Sıra</th>
            <th class="px-4 py-3 text-right font-medium">İşlemler</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-800/70">
          <% models.forEach(function(m) { %>
            <tr class="<%= m.is_active ? '' : 'opacity-50' %> hover:bg-slate-900/40">
              <td class="px-4 py-2 font-mono text-xs text-slate-300"><%= m.model_id %></td>
              <form method="POST" action="/admin/models/<%= m.id %>/update">
                <td class="px-4 py-2">
                  <input name="name" value="<%= m.name %>" class="w-40 rounded-lg border border-slate-700 bg-slate-950 px-2 py-1.5 text-xs outline-none focus:border-indigo-500" />
                </td>
                <td class="px-4 py-2">
                  <input name="icon" value="<%= m.icon %>" class="w-32 rounded-lg border border-slate-700 bg-slate-950 px-2 py-1.5 text-xs outline-none focus:border-indigo-500" />
                </td>
                <td class="px-4 py-2">
                  <input type="checkbox" name="is_premium" <%= m.is_premium ? 'checked' : '' %> class="accent-indigo-500" />
                </td>
                <td class="px-4 py-2">
                  <input name="sort_order" type="number" value="<%= m.sort_order %>" class="w-16 rounded-lg border border-slate-700 bg-slate-950 px-2 py-1.5 text-xs outline-none focus:border-indigo-500" />
                </td>
                <td class="px-4 py-2">
                  <div class="flex justify-end gap-2">
                    <button type="submit" class="rounded-lg border border-indigo-500/40 px-3 py-1.5 text-xs text-indigo-400 transition hover:bg-indigo-500/10">Kaydet</button>
              </form>
                    <form method="POST" action="/admin/models/<%= m.id %>/toggle">
                      <button type="submit" class="rounded-lg border border-amber-500/40 px-3 py-1.5 text-xs text-amber-400 transition hover:bg-amber-500/10"><%= m.is_active ? 'Pasif' : 'Aktif' %></button>
                    </form>
                    <form method="POST" action="/admin/models/<%= m.id %>/delete"
                          onsubmit="return confirm('<%= m.name %> modelini silmek istediğine emin misin?')">
                      <button type="submit" class="rounded-lg border border-red-500/40 px-3 py-1.5 text-xs text-red-400 transition hover:bg-red-500/10">Sil</button>
                    </form>
                  </div>
                </td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
  </main>

</body>
</html>
