{% extends 'game/admin/base.html.twig' %}

{% block title %}Session #{{ session.id }} logs — Admin{% endblock %}

{% block admin_body %}
    <div style="margin-bottom: 1.5rem;">
        <a href="{{ path('game_admin_sessions') }}" style="color: #64748b; text-decoration: none; font-size: 0.9rem;">← Sessions</a>
    </div>

    <h1 style="margin: 0 0 0.25rem; font-size: 1.5rem; color: #0f172a;">{{ session.game.name }} — Session #{{ session.id }}</h1>
    <p style="margin: 0 0 1.5rem; color: #64748b; font-size: 0.9rem;">{{ session.status.value }} · {{ session.players|length }} player(s) · Created {{ session.created|date('Y-m-d H:i') }}</p>

    {% if playersLogs is empty %}
        <div style="background: #fff; border-radius: 8px; padding: 2rem; text-align: center; color: #94a3b8; box-shadow: 0 1px 3px rgba(0,0,0,.07);">
            No players in this session.
        </div>
    {% else %}
        {# Tab buttons #}
        <div style="display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid #e2e8f0; overflow-x: auto; -webkit-overflow-scrolling: touch;">
            {% for playerLog in playersLogs %}
                <button
                    onclick="openTab('player-{{ loop.index }}')"
                    id="tab-{{ loop.index }}"
                    style="
                        flex-shrink: 0;
                        white-space: nowrap;
                        padding: 0.6rem 1.25rem;
                        border: 1px solid {{ loop.first ? '#3b82f6' : '#e2e8f0' }};
                        border-bottom: {{ loop.first ? '1px solid #fff' : '1px solid #e2e8f0' }};
                        background: {{ loop.first ? '#fff' : '#f8fafc' }};
                        color: {{ loop.first ? '#1e40af' : '#64748b' }};
                        font-size: 0.9rem;
                        font-weight: {{ loop.first ? '600' : '400' }};
                        cursor: pointer;
                        border-radius: 6px 6px 0 0;
                        margin-bottom: -1px;
                    "
                >{{ playerLog.username }}</button>
            {% endfor %}
        </div>

        {# Tab content #}
        {% for playerLog in playersLogs %}
            <div id="player-{{ loop.index }}" style="
                display: {{ loop.first ? 'block' : 'none' }};
                background: #fff;
                border: 1px solid #e2e8f0;
                border-top: none;
                border-radius: 0 0 8px 8px;
                padding: 1.25rem;
                box-shadow: 0 1px 3px rgba(0,0,0,.07);
            ">
                <pre style="
                    background: #1e293b;
                    color: #e2e8f0;
                    padding: 1rem;
                    border-radius: 6px;
                    overflow-x: auto;
                    white-space: pre-wrap;
                    word-break: break-word;
                    font-size: 0.85rem;
                    line-height: 1.5;
                    margin: 0;
                ">{{ playerLog.logs ?: 'No logs found for this player.' }}</pre>
            </div>
        {% endfor %}
    {% endif %}

    <script>
        function openTab(id) {
            document.querySelectorAll('[id^="player-"]').forEach(el => el.style.display = 'none');
            document.getElementById(id).style.display = 'block';

            const idx = id.split('-')[1];
            document.querySelectorAll('[id^="tab-"]').forEach((btn, i) => {
                const active = String(i + 1) === idx;
                btn.style.background = active ? '#fff' : '#f8fafc';
                btn.style.color = active ? '#1e40af' : '#64748b';
                btn.style.fontWeight = active ? '600' : '400';
                btn.style.borderColor = active ? '#3b82f6' : '#e2e8f0';
                btn.style.borderBottom = active ? '1px solid #fff' : '1px solid #e2e8f0';
            });
        }
    </script>
{% endblock %}