81 lines
3.1 KiB
HTML
81 lines
3.1 KiB
HTML
<section class="grid gap-6">
|
|
<div class="flex items-center justify-between flex-wrap gap-3">
|
|
<h1 class="text-2xl font-bold tracking-tight">Secret Santa</h1>
|
|
<a class="text-sm underline text-slate-300" href="{{ url_for('admin_secret_santa_export') }}">Export CSV</a>
|
|
</div>
|
|
|
|
<div>
|
|
<input id="ssFilter"
|
|
placeholder="Filter by username or name…"
|
|
class="w-full sm:w-[28rem] px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-700"
|
|
oninput="filterSS(this.value)">
|
|
</div>
|
|
|
|
<div id="ssGrid" class="grid gap-6"
|
|
style="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
|
|
{% for e in rows %}
|
|
<article
|
|
class="ss-card group rounded-3xl border border-slate-800 bg-slate-900/60 p-6 hover:border-brand-600/50 hover:shadow-xl hover:shadow-brand-600/10 transition"
|
|
data-keywords="{{ (e.user.username ~ ' ' ~ (e.full_name or '') ) | lower }}"
|
|
>
|
|
<header class="flex items-start justify-between gap-4">
|
|
<div class="space-y-0.5">
|
|
<h3 class="text-lg font-semibold leading-6">{{ e.full_name or '—' }}</h3>
|
|
<p class="text-xs text-slate-400 break-all leading-5">{{ e.user.username }}</p>
|
|
</div>
|
|
<span
|
|
class="shrink-0 inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs
|
|
{{ 'border-emerald-700 bg-emerald-500/15 text-emerald-200' if e.jewelry else 'border-slate-700 bg-slate-800/60 text-slate-300' }}">
|
|
{{ 'Jewelry: Yes' if e.jewelry else 'Jewelry: No' }}
|
|
</span>
|
|
</header>
|
|
|
|
<div class="mt-5 grid grid-cols-2 gap-x-6 gap-y-3 text-sm leading-6">
|
|
<div>
|
|
<p class="text-slate-400 text-xs">Age</p>
|
|
<p class="font-medium">{{ e.age or '—' }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-slate-400 text-xs">Birthday</p>
|
|
<p class="font-medium">{{ e.birthday or '—' }}</p>
|
|
</div>
|
|
|
|
<div class="col-span-2">
|
|
<p class="text-slate-400 text-xs">Favorite Gift Card</p>
|
|
<p class="font-medium">{{ e.gift_card or '—' }}</p>
|
|
</div>
|
|
|
|
<div class="col-span-2">
|
|
<p class="text-slate-400 text-xs">Favorite Type of Movie</p>
|
|
<p class="font-medium">{{ e.fav_movie or '—' }}</p>
|
|
</div>
|
|
|
|
<div class="col-span-2">
|
|
<p class="text-slate-400 text-xs">Hobbies</p>
|
|
<p class="whitespace-pre-wrap">{{ e.hobbies or '—' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="mt-6 pt-4 border-t border-slate-800 flex items-center justify-between text-xs text-slate-400 leading-6">
|
|
<span>Updated {{ e.updated_at.strftime('%Y-%m-%d %H:%M') if e.updated_at else '—' }}</span>
|
|
<span class="opacity-70">ID #{{ e.id }}</span>
|
|
</footer>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if not rows %}
|
|
<p class="text-slate-400 text-sm">No Secret Santa entries yet.</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
<script>
|
|
function filterSS(q){
|
|
q = (q || '').toLowerCase();
|
|
document.querySelectorAll('.ss-card').forEach(card=>{
|
|
const keys = card.getAttribute('data-keywords') || '';
|
|
card.style.display = keys.includes(q) ? '' : 'none';
|
|
});
|
|
}
|
|
</script>
|