{% extends "layout.html" %}
{% block content %}
<section class="authentication-section">
    {% if reset_mode %}
    <div class="content-card">
        <h2 class="section-title"><i data-lucide="key-round"></i> Passwort zurücksetzen</h2>
        <form action="{{ url_for('handle_password_reset') }}" method="POST" class="input-form">
            <input type="hidden" name="token" value="{{ token }}">
            <div class="form-group">
                <label for="password_string" class="input-label">Neues Passwort</label>
                <input type="password" id="password_string" name="password_string" class="text-input" required>
            </div>
            <div class="form-group">
                <label for="password_string_confirmation" class="input-label">Passwort wiederholen</label>
                <input type="password" id="password_string_confirmation" name="password_string_confirmation" class="text-input" required>
            </div>
            <button type="submit" class="action-button primary-button"><i data-lucide="save"></i> Passwort speichern</button>
        </form>
    </div>
    {% elif register_mode %}
    <div class="content-card">
        <h2 class="section-title"><i data-lucide="user-plus"></i> Neues Konto erstellen</h2>
        <form action="{{ url_for('handle_registration') }}" method="POST" class="input-form">
            <div class="form-group">
                <label for="display_name" class="input-label">Dein Name</label>
                <input type="text" id="display_name" name="display_name" class="text-input" required>
            </div>
            <div class="form-group">
                <label for="password_string" class="input-label">Passwort</label>
                <input type="password" id="password_string" name="password_string" class="text-input" required>
            </div>
            <div class="form-group">
                <label for="password_string_confirmation" class="input-label">Passwort wiederholen</label>
                <input type="password" id="password_string_confirmation" name="password_string_confirmation" class="text-input" required>
            </div>
            <button type="submit" class="action-button primary-button"><i data-lucide="check-circle"></i> Registrieren</button>
        </form>
    </div>
    <div class="content-card" style="text-align: center;">
        <a href="{{ url_for('handle_login') }}" class="action-button secondary-button"><i data-lucide="arrow-left"></i> Zurück zur Anmeldung</a>
    </div>
    {% elif registration_success %}
    <div class="content-card notice-card success-card" style="text-align: center;">
        <h2 class="section-title" style="justify-content: center;"><i data-lucide="party-popper"></i> Registrierung erfolgreich</h2>
        <p>Deine ID für die Anmeldung lautet:</p>
        <h1 class="monospace-identifier" style="font-size: calc(3rem * var(--dimension-multiplier)); letter-spacing: calc(0.25rem * var(--dimension-multiplier)); color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary)); margin: var(--spacing-medium) 0;">{{ new_identifier }}</h1>
        <p>Bitte speichere oder merke sie dir!</p>
        <div style="margin-top: var(--spacing-large);">
            <a href="{{ url_for('handle_login') }}" class="action-button primary-button"><i data-lucide="log-in"></i> Jetzt anmelden</a>
        </div>
    </div>
    {% else %}
    <div class="content-card">
        <h2 class="section-title"><i data-lucide="lock"></i> Anmeldung</h2>
        <form action="{{ url_for('handle_login') }}" method="POST" class="input-form">
            <div class="form-group">
                <label for="player_identifier" class="input-label">ID</label>
                <input type="text" id="player_identifier" name="player_identifier" class="text-input" pattern="[A-Za-z]{{ '{' }}{{ identifier_length }}{{ '}' }}" required>
            </div>
            <div class="form-group">
                <label for="password_string" class="input-label">Passwort</label>
                <input type="password" id="password_string" name="password_string" class="text-input" required>
            </div>
            <button type="submit" class="action-button primary-button"><i data-lucide="log-in"></i> Anmelden</button>
        </form>
    </div>
    <div class="content-card" style="text-align: center;">
        <a href="{{ url_for('handle_registration') }}" class="action-button secondary-button"><i data-lucide="user-plus"></i> Noch kein Konto? Hier registrieren</a>
    </div>
    {% endif %}
</section>
{% endblock %}