{% extends "base.html" %}
{% block title %}WM Tippspiel{% endblock %}
{% block content %}

{# ── Eingeloggt als Spieler ───────────────────────────────────────────────── #}
{% if spieler_name %}

<div class="spieler-bar">
    <div>
        <span class="spieler-greeting">Hallo, <strong>{{ spieler_name }}</strong></span>
        {% if spieler_klasse %}<span class="meta"> · {{ spieler_klasse }}</span>{% endif %}
    </div>
    <div style="display:flex;gap:8px;align-items:center">
        <a href="{{ url_for('meine_pin') }}" class="btn btn-secondary btn-small">Meine PIN</a>
        <form method="post" action="{{ url_for('abmelden') }}">
            <button class="btn btn-secondary btn-small" type="submit">Abmelden</button>
        </form>
    </div>
</div>

<h1>Tipps Abgeben</h1>

{% if ungetippt %}
<form method="post" class="bulk-form">
    <input type="hidden" name="aktion" value="nachtipp">
    <div class="games">
        {% for s in ungetippt %}
        <div class="game-row">
            <div class="game-team team-left">{{ s.team_heim }}</div>
            <div class="counter">
                <button type="button" class="btn-counter" data-target="tipp_heim_{{ s.id }}" data-delta="-1">−</button>
                <input type="number" id="tipp_heim_{{ s.id }}" name="tipp_heim_{{ s.id }}" min="0" max="99" value="0" inputmode="numeric">
                <button type="button" class="btn-counter" data-target="tipp_heim_{{ s.id }}" data-delta="1">+</button>
            </div>
            <div class="colon">:</div>
            <div class="counter">
                <button type="button" class="btn-counter" data-target="tipp_gast_{{ s.id }}" data-delta="-1">−</button>
                <input type="number" id="tipp_gast_{{ s.id }}" name="tipp_gast_{{ s.id }}" min="0" max="99" value="0" inputmode="numeric">
                <button type="button" class="btn-counter" data-target="tipp_gast_{{ s.id }}" data-delta="1">+</button>
            </div>
            <div class="game-team team-right">{{ s.team_gast }}</div>
        </div>
        {% endfor %}
    </div>
    <div class="submit-bar">
        <button type="submit" class="btn btn-large">Tipps abschicken</button>
    </div>
</form>
{% else %}
<p class="empty">Du hast bereits alle offenen Spiele getippt – schau später nochmal vorbei!</p>
{% endif %}

{# ── Nicht eingeloggt ─────────────────────────────────────────────────────── #}
{% else %}

<h1>Tipps Abgeben</h1>

{% if offene %}
<form method="post" class="bulk-form">
    <input type="hidden" name="aktion" value="neu">
    <div class="name-bar">
        <div class="name-grid">
            <label>
                Vorname
                <input type="text" name="vorname" required maxlength="40" placeholder="z.B. Max" autofocus>
            </label>
            <label>
                Nachname
                <input type="text" name="nachname" required maxlength="40" placeholder="z.B. Mustermann">
            </label>
            {% if klassen %}
            <label class="span-full">
                Klasse
                <select name="klasse" required>
                    <option value="">– Klasse auswählen –</option>
                    {% for k in klassen %}
                    <option value="{{ k.name }}">{{ k.name }}</option>
                    {% endfor %}
                </select>
            </label>
            {% endif %}
        </div>
    </div>

    <div class="games">
        {% for s in offene %}
        <div class="game-row">
            <div class="game-team team-left">{{ s.team_heim }}</div>
            <div class="counter">
                <button type="button" class="btn-counter" data-target="tipp_heim_{{ s.id }}" data-delta="-1">−</button>
                <input type="number" id="tipp_heim_{{ s.id }}" name="tipp_heim_{{ s.id }}" min="0" max="99" value="0" inputmode="numeric">
                <button type="button" class="btn-counter" data-target="tipp_heim_{{ s.id }}" data-delta="1">+</button>
            </div>
            <div class="colon">:</div>
            <div class="counter">
                <button type="button" class="btn-counter" data-target="tipp_gast_{{ s.id }}" data-delta="-1">−</button>
                <input type="number" id="tipp_gast_{{ s.id }}" name="tipp_gast_{{ s.id }}" min="0" max="99" value="0" inputmode="numeric">
                <button type="button" class="btn-counter" data-target="tipp_gast_{{ s.id }}" data-delta="1">+</button>
            </div>
            <div class="game-team team-right">{{ s.team_gast }}</div>
        </div>
        {% endfor %}
    </div>
    <div class="submit-bar">
        <button type="submit" class="btn btn-large">Tipps abschicken &amp; PIN erhalten</button>
    </div>
</form>
{% elif not spiele %}
<p class="empty">Aktuell sind keine Spiele eingetragen.</p>
{% else %}
<p class="empty">Alle Spiele sind bereits beendet – keine offenen Tipps mehr möglich.</p>
{% endif %}

{# PIN-Login ─────────────────────────────────────────────────────────────────── #}
<div class="pin-login-box">
    <p class="pin-login-label">Bereits getippt? Mit PIN wieder einloggen:</p>
    <form method="post" action="{{ url_for('pin_login') }}" class="pin-login-form">
        <input type="text" name="pin" maxlength="6" minlength="6" pattern="\d{6}"
               placeholder="6-stellige PIN" inputmode="numeric" required>
        <button type="submit" class="btn">Einloggen</button>
    </form>
</div>

{% endif %}{# end not logged in #}

{# ── Abgeschlossene Spiele ────────────────────────────────────────────────── #}
{% if beendet %}
<h2 style="margin-top:2.5rem">Abgeschlossene Spiele</h2>
<div class="games">
    {% for s in beendet %}
    <div class="game-row game-row--beendet">
        <div class="game-team team-left">{{ s.team_heim }}</div>
        <div class="ergebnis-badge">
            <span class="ergebnis-zahl">{{ s.tore_heim }}</span>
            <span class="colon">:</span>
            <span class="ergebnis-zahl">{{ s.tore_gast }}</span>
        </div>
        <div class="game-team team-right">{{ s.team_gast }}</div>
    </div>
    {% endfor %}
</div>
{% endif %}

<script>
document.querySelectorAll('.btn-counter').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var input = document.getElementById(btn.dataset.target);
        if (!input) return;
        var v = parseInt(input.value || '0', 10);
        if (isNaN(v)) v = 0;
        v += parseInt(btn.dataset.delta, 10);
        if (v < 0) v = 0;
        if (v > 99) v = 99;
        input.value = v;
    });
});
</script>
{% endblock %}