{% extends "base.html" %}
{% block title %}PIN-Karten — Druckbogen{% endblock %}
{% block content %}
<div class="no-print" style="margin-bottom: 1rem;">
    <a href="{{ url_for('admin.profile_liste') }}" class="btn btn-secondary">&larr; Zurueck</a>
    <button class="btn btn-primary" onclick="window.print()">Drucken</button>
    <p style="margin-top: 0.5rem; color: var(--text-light); font-size: 0.85rem;">
        Hinweis: Die PINs musst du handschriftlich auf den Karten ergaenzen
        (sie werden nicht in der DB im Klartext gespeichert).
    </p>
</div>

<div class="karten-bogen">
    {% for p in profile %}
    <div class="pin-karte">
        <div class="emoji">{{ tier_emoji(p.tier) }}</div>
        <div class="vorname">{{ p.vorname }}</div>
        <div class="tier-name">{{ tier_name(p.tier) }}</div>
        <div class="pin-zeile">PIN: __ __ __ __</div>
        <div class="url">3d.lehrstun.de</div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block scripts %}
<style>
.karten-bogen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    max-width: 800px;
    margin: 0 auto;
}
.pin-karte {
    border: 2px dashed #999;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    page-break-inside: avoid;
    background: white;
}
.pin-karte .emoji { font-size: 3rem; }
.pin-karte .vorname { font-size: 1.3rem; font-weight: 700; margin-top: 0.2rem; }
.pin-karte .tier-name { font-size: 0.85rem; color: #666; margin-bottom: 0.8rem; }
.pin-karte .pin-zeile { font-family: monospace; font-size: 1.2rem; letter-spacing: 0.3rem; margin: 0.6rem 0; }
.pin-karte .url { font-size: 0.75rem; color: #888; margin-top: 0.5rem; }

@media print {
    .no-print { display: none !important; }
    nav, footer { display: none !important; }
    main { padding: 0 !important; }
    body { background: white !important; }
    .pin-karte { break-inside: avoid; }
}
</style>
{% endblock %}