51 lines
2.1 KiB
HTML
51 lines
2.1 KiB
HTML
{% 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 %}
|