{% 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å kortkode (f.eks. <strong>CRI-068</strong>) eller kortnavn.</p>

<div class="search-box">
    <input type="text" id="search-input" placeholder="CRI-068 eller kortnavn..." autofocus>
    <button class="btn btn-primary" onclick="doSearch()">Søg</button>
</div>

<div id="search-results"></div>

<script>
const input = document.getElementById('search-input');
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') doSearch(); });

async function doSearch() {
    const q = input.value.trim();
    const container = document.getElementById('search-results');
    if (!q) { container.innerHTML = ''; return; }

    container.innerHTML = '<p style="color:var(--text-muted);">Søger...</p>';

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

        if (data.length === 0) {
            container.innerHTML = '<div class="card"><p style="color:var(--text-muted);">Ingen kort fundet for "<strong>' + q + '</strong>"</p></div>';
            return;
        }

        let html = '<div class="card" style="padding:0;"><div style="padding:10px 14px;border-bottom:1px solid var(--border);font-size:0.85rem;color:var(--text-muted);">' + data.length + ' resultat(er)</div>';
        data.forEach(c => {
            html += '<div class="result-row">' +
                '<div><span class="tag">' + c.full_code + '</span> <strong>' + c.name + '</strong>' +
                ' <span style="color:var(--text-muted);font-size:0.85rem;">' + c.set_name + '</span></div>' +
                '<div style="font-size:0.85rem;color:var(--text-muted);">' + c.type + ' · ' + c.rarity + '</div>' +
                '</div>';
        });
        html += '</div>';
        container.innerHTML = html;
    } catch(e) {
        container.innerHTML = '<p style="color:var(--accent);">Fejl: kunne ikke søge</p>';
    }
}
</script>
{% endblock %}