{% extends "base.html" %}
{% block title %}PIN-Eingabe — {{ profil.vorname }}{% endblock %}

{% block content %}
<div class="card" style="max-width: 420px; margin: 2rem auto; text-align: center;">
    <div style="font-size: 4rem; margin-bottom: 0.5rem;">{{ tier_emoji(profil.tier) }}</div>
    <h1 style="font-size: 1.4rem; margin-bottom: 0.2rem;">{{ profil.vorname }}</h1>
    <p style="color: var(--text-light); font-size: 0.9rem;">{{ tier_name(profil.tier) }}</p>

    {% if gesperrt %}
    <div class="flash flash-error" style="margin-top: 1.5rem;">
        Zu viele Fehlversuche &mdash; gesperrt fuer noch ca. <strong>{{ min_rest }} Minuten</strong>.
        Frag den Lehrer, wenn du nicht warten kannst.
    </div>
    <p style="margin-top: 1rem;">
        <a href="{{ url_for('profil.login') }}" class="btn btn-secondary">Anderes Profil waehlen</a>
    </p>
    {% else %}
    <form method="post" style="margin-top: 1.5rem;">
        <label for="pin" style="display:block; font-size: 0.9rem; color: var(--text-light); margin-bottom: 0.5rem;">
            Deine 4-stellige PIN:
        </label>
        <input
            type="text"
            inputmode="numeric"
            pattern="[0-9]{4}"
            maxlength="4"
            id="pin"
            name="pin"
            autofocus
            autocomplete="off"
            style="font-size: 2rem; text-align: center; letter-spacing: 0.8rem;
                   width: 12rem; padding: 0.5rem; border: 2px solid var(--primary);
                   border-radius: 8px; margin-bottom: 1rem;"
        >
        <br>
        <button type="submit" class="btn btn-primary">Einloggen</button>
        <a href="{{ url_for('profil.login') }}" class="btn btn-secondary" style="margin-left: 0.5rem;">Anderes Profil</a>
    </form>
    {% endif %}
</div>
{% endblock %}