{% extends "base.html" %}
{% block title %}Søg{% endblock %}
{% block content %}
<h1>🔍 Søg efter kort</h1>
<p style="color:var(--text-muted);margin-bottom:16px;">
    Søg på kode (f.eks. <strong>CRI-068</strong>) eller kortnavn (f.eks. <strong>Pikachu</strong>)
</p>

<div class="search-box">
    <input type="text" id="search-input" placeholder="Søg på kortkode eller navn..."
           onkeydown="if(event.key==='Enter') search()">
    <button class="btn btn-primary" onclick="search()">Søg</button>
</div>

<div id="search-results">
    <p style="color:var(--text-muted);text-align:center;padding:40px 0;">
        Indtast en søgning for at finde kort.
    </p>
</div>

<script>
async function search() {
    const q = document.getElementById('search-input').value.trim();
    const el = document.getElementById('search-results');

    if (!q) {
        el.innerHTML = '<p style="color:var(--text-muted);text-align:center;padding:40px 0;">Indtast en søgning.</p>';
        return;
    }

    el.innerHTML = '<p style="color:var(--text-muted);text-align:center;padding:20px 0;">Søger...</p>';

    try {
        const res = await fetch('/api/search?q=' + encodeURIComponent(q));
        const data = await res.json();

        if (data.length === 0) {
            el.innerHTML = '<p style="color:var(--text-muted);text-align:center;padding:40px 0;">Ingen resultater.</p>';
            return;
        }

        let html = '<p style="margin-bottom:12px;">' + data.length + ' resultat(er)</p>';
        data.forEach(c => {
            const imgHtml = c.image_url
                ? '<img src="' + c.image_url + '" alt="' + c.name + '" style="height:50px;border-radius:4px;">'
                : '<span style="color:var(--text-muted);font-size:0.8rem;">Intet billede</span>';
            html += '<div class="result-row">' +
                '<div>' +
                    '<strong>' + c.full_code + '</strong> ' + c.name +
                    '<br><span style="color:var(--text-muted);font-size:0.8rem;">' +
                        c.serie_name + ' &middot; ' + c.set_name +
                    '</span>' +
                '</div>' +
                '<div style="display:flex;align-items:center;gap:10px;">' +
                    imgHtml +
                    '<a href="/card/' + c.set_code + '/' + c.full_code.split('-')[1] + '" class="btn btn-outline btn-sm">Se kort</a>' +
                '</div>' +
            '</div>';
        });
        el.innerHTML = html;
    } catch(e) {
        el.innerHTML = '<p style="color:var(--accent);text-align:center;">Fejl ved søgning.</p>';
    }
}
</script>
{% endblock %}