{% extends "base.html" %}
{% block title %}Admin — Kort i {{ set_code }}{% endblock %}
{% block content %}
<h1>🃏 Kort i <span class="tag">{{ set_code }}</span></h1>
<p style="color:var(--text-muted);margin-bottom:16px;">Tilføj eller fjern kort fra dette set.</p>

<div class="card" style="margin-bottom:24px;">
    <h2>Tilføj nyt kort</h2>
    <form id="create-card-form" style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;">
        <input type="text" name="number" placeholder="Nummer (f.eks. 068)" required>
        <input type="text" name="name" placeholder="Navn (f.eks. Garchomp EX)" required>
        <input type="text" name="type" placeholder="Type (f.eks. Colorless)">
        <input type="text" name="rarity" placeholder="Sjældenhed (f.eks. Rare)">
        <input type="number" name="hp" placeholder="HP">
        <input type="text" name="stage" placeholder="Stage (f.eks. Basic)">
        <input type="text" name="image_url" placeholder="Billede URL" style="grid-column:span 2;">
        <textarea name="description" placeholder="Beskrivelse" rows="2" style="grid-column:span 2;"></textarea>
        <button type="submit" class="btn btn-primary" style="grid-column:span 2;">Tilføj kort</button>
    </form>
    <p id="card-msg" style="font-size:0.85rem;margin-top:8px;"></p>
</div>

<h2>Eksisterende kort</h2>
<div id="card-list">Indlæser...</div>
<a href="/admin/sets" class="btn btn-outline" style="margin-top:16px;">← Tilbage til serier</a>

<script>
const SET_CODE = '{{ set_code }}';

async function loadCards() {
    try {
        const res = await fetch('/api/admin/sets/' + SET_CODE + '/cards');
        const cards = await res.json();
        const container = document.getElementById('card-list');

        if (cards.length === 0) {
            container.innerHTML = '<div class="card"><p style="color:var(--text-muted);">Ingen kort i dette set endnu.</p></div>';
            return;
        }

        let html = '<div style="overflow-x:auto;"><table><thead><tr><th>#</th><th>Kode</th><th>Navn</th><th>Type</th><th>Sjældenhed</th><th style="width:60px;"></th></tr></thead><tbody>';
        cards.forEach(c => {
            html += '<tr>' +
                '<td>' + c.number + '</td>' +
                '<td><span class="tag">' + c.full_code + '</span></td>' +
                '<td>' + c.name + '</td>' +
                '<td>' + (c.type || '—') + '</td>' +
                '<td>' + (c.rarity || '—') + '</td>' +
                '<td><button class="btn btn-danger btn-sm" onclick="deleteCard(' + c.id + ')">✕</button></td>' +
                '</tr>';
        });
        html += '</tbody></table></div>';
        container.innerHTML = html;
    } catch(e) {
        document.getElementById('card-list').innerHTML = '<p style="color:var(--accent);">Kunne ikke indlæse kort</p>';
    }
}

async function deleteCard(id) {
    if (!confirm('Slet dette kort?')) return;
    try {
        const res = await fetch('/api/admin/cards/' + id, { method: 'DELETE' });
        if (res.ok) {
            loadCards();
        } else {
            alert('Kunne ikke slette');
        }
    } catch(e) {
        alert('Fejl ved sletning');
    }
}

document.getElementById('create-card-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const msg = document.getElementById('card-msg');
    try {
        const res = await fetch('/api/admin/sets/' + SET_CODE + '/cards', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                number: form.number.value,
                name: form.name.value,
                type: form.type.value || null,
                rarity: form.rarity.value || null,
                hp: form.hp.value ? parseInt(form.hp.value) : null,
                stage: form.stage.value || null,
                description: form.description.value || null,
                image_url: form.image_url.value || null,
            }),
        });
        if (res.ok) {
            form.reset();
            msg.style.color = 'var(--text)';
            msg.textContent = '✅ Kort tilføjet';
            loadCards();
        } else {
            const err = await res.json();
            msg.style.color = 'var(--accent)';
            msg.textContent = '❌ ' + (err.detail || 'Fejl');
        }
    } catch(e) {
        msg.style.color = 'var(--accent)';
        msg.textContent = '❌ Kunne ikke forbinde';
    }
});

loadCards();
</script>
{% endblock %}