{% extends 'base.html.twig' %}

{% block title %}View Session Logs - {{ session.id }}{% endblock %}

{% block body %}
    <h1>Session: {{ session.game.name }} (#{{ session.id }})</h1>
    <p><a href="{{ path('game_admin_dashboard') }}">Back to Dashboard</a></p>

    <div class="tabs">
        <ul style="display: flex; list-style: none; padding: 0; border-bottom: 1px solid #ccc;">
            {% for playerLog in playersLogs %}
                <li style="margin-right: 10px;">
                    <button
                        onclick="openTab(event, 'player-{{ loop.index }}')"
                        class="tablinks {{ loop.first ? 'active' : '' }}"
                        style="padding: 10px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: {{ loop.first ? '#eee' : '#fff' }};"
                    >
                        {{ playerLog.username }}
                    </button>
                </li>
            {% endfor %}
        </ul>
    </div>

    {% for playerLog in playersLogs %}
        <div id="player-{{ loop.index }}" class="tabcontent" style="display: {{ loop.first ? 'block' : 'none' }}; border: 1px solid #ccc; border-top: none; padding: 20px;">
            <h3>Logs for {{ playerLog.username }}</h3>
            <pre style="background: #f4f4f4; padding: 15px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;">{{ playerLog.logs ?: 'No logs found for this player.' }}</pre>
        </div>
    {% endfor %}

    <script>
        function openTab(evt, playerName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
                tablinks[i].style.background = "#fff";
            }
            document.getElementById(playerName).style.display = "block";
            evt.currentTarget.className += " active";
            evt.currentTarget.style.background = "#eee";
        }
    </script>
{% endblock %}