{% extends "layout.html" %}
{% block content %}
<section class="game-section">
    <div class="content-card">
        <h2 class="section-title" style="margin: 0;"><i data-lucide="user"></i> Willkommen, {{ player.display_name }} ({{ player.player_identifier }})!</h2>
    </div>
    
    {% if not player.is_approved %}
    <div class="content-card notice-card warning-card">
        <h2 class="modal-title"><i data-lucide="hourglass"></i> Konto wird geprüft&hellip;</h2>
    </div>
    {% elif game_status == 'pending' %}
    <div class="content-card notice-card">
        <h2 class="modal-title"><i data-lucide="clock"></i> Startet bald&hellip;</h2>
    </div>
    {% elif game_status == 'finished' %}
    <div class="content-card leaderboard-card">
        <h2 class="section-title"><i data-lucide="trophy"></i> Spiel beendet &ndash; Rangliste</h2>
        <table class="data-table">
            <thead>
                <tr>
                    <th>Platz</th>
                    <th>Name</th>
                    <th>Punkte</th>
                </tr>
            </thead>
            <tbody>
                {% for current_player in all_players %}
                <tr class="{% if current_player.player_identifier == session['player_identifier'] %}highlighted-row{% endif %}">
                    <td>{{ loop.index }}</td>
                    <td>{{ current_player.display_name }}</td>
                    <td>{{ current_player.score }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% elif game_status in ['running', 'paused'] %}
    <div class="tab-container">
        <button class="tab-button active-tab" data-target="mission-panel"><i data-lucide="crosshair"></i> Ziel</button>
        <button class="tab-button" data-target="leaderboard-panel"><i data-lucide="bar-chart-2"></i> Punkte</button>
        <button class="tab-button" data-target="rules-panel"><i data-lucide="book-open"></i> Regeln</button>
    </div>
    
    <div id="mission-panel" class="tab-content active-content">
        {% if game_status == 'paused' %}
        <div class="content-card notice-card warning-card">
            <h2 class="modal-title"><i data-lucide="pause-circle"></i> Spiel pausiert</h2>
            <p class="notice-text">Das Spiel wurde pausiert. Eliminierungen sind aktuell nicht möglich.</p>
        </div>
        {% endif %}
        
        {% if player.is_alive %}
        <div class="content-card target-card" style="text-align: center;">
            <h3 class="card-subtitle"><i data-lucide="target"></i> Dein Ziel</h3>
            <h2 class="target-name">{{ target_player.display_name if target_player else 'Niemand' }}</h2>
            {% if game_status == 'running' %}
                <button type="button" id="trigger-elimination" class="action-button danger-button large-button"><i data-lucide="crosshair"></i> Kill melden</button>
            {% else %}
                <button type="button" class="action-button secondary-button large-button" disabled><i data-lucide="lock"></i> Pausiert</button>
            {% endif %}
        </div>
        {% elif player.late_joiner %}
        <div class="content-card notice-card warning-card">
            <h2 class="modal-title"><i data-lucide="users"></i> Warte auf Einstieg&hellip;</h2>
            <p class="notice-text">Du bist dem Spiel während einer laufenden Runde beigetreten. Du wirst aktiv, sobald du eingewechselt wirst.</p>
        </div>
        {% else %}
        <div class="content-card notice-card danger-card">
            <h2 class="modal-title"><i data-lucide="skull"></i> Eliminiert</h2>
        </div>
        {% endif %}
        
        <div class="content-card statistics-card">
            <h3 class="section-title"><i data-lucide="pie-chart"></i> Spielübersicht</h3>
            <p>Überlebende: <strong>{{ alive_count }}</strong></p>
            <p>Deine Kills: <strong>{{ player.score }}</strong></p>
            <p>Gesamte Kills: <strong>{{ total_eliminations }}</strong></p>
            <p>Laufzeit: <strong id="game-stopwatch" data-start-time="{{ start_time }}">Wird berechnet...</strong></p>
        </div>
        
        <div class="content-card settings-card">
            <h3 class="section-title"><i data-lucide="user-cog"></i> Profil</h3>
            {% if player.pending_display_name %}
                <div class="notice-card warning-card" style="padding: var(--spacing-medium);">
                    <p class="notice-text" style="margin: 0;">Der Name <strong>{{ player.pending_display_name }}</strong> wird geprüft&hellip;</p>
                </div>
            {% else %}
                <button type="button" id="trigger-name-change-modal" class="action-button secondary-button"><i data-lucide="edit-3"></i> Name ändern</button>
            {% endif %}
        </div>
    </div>
    
    <div id="leaderboard-panel" class="tab-content">
        <div class="content-card">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Platz</th>
                        <th>Name</th>
                        <th>Punkte</th>
                    </tr>
                </thead>
                <tbody>
                    {% for current_player in all_players %}
                    <tr class="{% if current_player.player_identifier == session['player_identifier'] %}highlighted-row{% endif %}">
                        <td>{{ loop.index }}</td>
                        <td>{{ current_player.display_name }}</td>
                        <td>{{ current_player.score }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    
    <div id="rules-panel" class="tab-content">
        <div class="content-card markdown-container">
            {{ rules_markup | safe }}
        </div>
    </div>
    
    <div id="elimination-confirm-modal" class="modal-overlay">
        <div class="modal-dialog">
            <h2 class="modal-title"><i data-lucide="alert-triangle"></i> Kill</h2>
            <p class="modal-description">Möchtest du melden, dass du dein Ziel gekillt hast?</p>
            <div class="modal-actions">
                <button type="button" id="proceed-elimination" class="action-button danger-button"><i data-lucide="crosshair"></i> Ja, melden</button>
                <button type="button" id="cancel-elimination" class="action-button secondary-button"><i data-lucide="x"></i> Abbrechen</button>
            </div>
        </div>
    </div>
    
    <div id="waiting-modal" class="modal-overlay">
        <div class="modal-dialog">
            <h2 class="modal-title"><i data-lucide="loader"></i> Bitte warten</h2>
            <p class="modal-description">Warte auf Bestätigung vom Ziel...</p>
        </div>
    </div>
    
    <div id="rejection-modal" class="modal-overlay">
        <div class="modal-dialog">
            <h2 class="modal-title"><i data-lucide="x-octagon"></i> Abgelehnt</h2>
            <p class="modal-description">Das Ziel hat deinen Kill abgelehnt.</p>
            <div class="modal-actions">
                <button type="button" id="acknowledge-rejection" class="action-button primary-button"><i data-lucide="check"></i> Verstanden</button>
            </div>
        </div>
    </div>
    
    <div id="verification-modal" class="modal-overlay {% if player.pending_attacker_identifier %}active-modal{% endif %}">
        <div class="modal-dialog">
            <h2 class="modal-title"><i data-lucide="shield-alert"></i> Wurdest du eliminiert?</h2>
            <p class="modal-description">
                {% if pending_attacker_name %}
                    <strong>{{ pending_attacker_name }}</strong> hat gemeldet, dass er/sie dich gekillt hat.
                {% else %}
                    Dein Angreifer hat gemeldet, dass er dich gekillt hat.
                {% endif %}
            </p>
            <div class="modal-actions">
                <button type="button" id="confirm-elimination" class="action-button danger-button"><i data-lucide="check"></i> Bestätigen</button>
                <button type="button" id="reject-elimination" class="action-button secondary-button"><i data-lucide="x"></i> Ablehnen</button>
            </div>
        </div>
    </div>
    
    <div id="name-change-modal" class="modal-overlay">
        <div class="modal-dialog">
            <h2 class="modal-title"><i data-lucide="edit-3"></i> Name ändern</h2>
            <p class="modal-description">Dein neuer Name muss erst geprüft werden.</p>
            <form action="{{ url_for('handle_player_action') }}" method="POST" class="input-form asynchronous-form">
                <input type="hidden" name="action_type" value="request_name_change">
                <div class="form-group" style="text-align: left;">
                    <label for="pending_display_name" class="input-label">Neuer Name</label>
                    <input type="text" id="pending_display_name" name="pending_display_name" class="text-input" required>
                </div>
                <div class="modal-actions">
                    <button type="submit" class="action-button primary-button"><i data-lucide="send"></i> Abschicken</button>
                    <button type="button" id="cancel-name-change" class="action-button secondary-button"><i data-lucide="x"></i> Abbrechen</button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}
</section>
{% endblock %}