{% extends "ui/base_ui.html" %}

{% block title %}Games - ATP Platform{% endblock %}

{% block content %}
<style>
.games-table tr.clickable-row { cursor: pointer; }
.games-table tr.clickable-row:hover { background: #faf8ff; }
.games-table tr.clickable-row:focus-visible {
    outline: 2px solid #7c3aed; outline-offset: -2px; background: #faf8ff;
}
.games-table a.game-link {
    color: #7c3aed; font-family: monospace;
    text-decoration: none; font-weight: 600;
}
.games-table a.game-link:hover { text-decoration: underline; }
</style>

<h2>Games</h2>

<section>
    <h3>Available Game Environments</h3>
    {% if games %}
    <p>
        {{ games | length }} game{{ "s" if games | length != 1 else "" }} registered.
        Click a game name to read its rules and learn how to participate.
    </p>
    <table class="games-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Type</th>
                <th>Move Order</th>
                <th>Players</th>
            </tr>
        </thead>
        <tbody>
            {% for game in games %}
            <tr class="clickable-row" data-href="/ui/games/{{ game.name | urlencode }}" role="link" tabindex="0">
                <td><a class="game-link" href="/ui/games/{{ game.name | urlencode }}">{{ game.name }}</a></td>
                <td>{{ game.description }}</td>
                <td>{{ game.game_type }}</td>
                <td>{{ game.move_order }}</td>
                <td>{{ game.num_players }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p>No game environments found. Install the <code>game-environments</code> package to see available games.</p>
    {% endif %}
</section>

<script>
    // Progressive enhancement: make each table row navigate to its game
    // detail page on click or Enter/Space. Keeps the anchor in the first
    // cell as the accessible / SEO-friendly link, and avoids inline
    // handlers that concatenate Jinja-rendered strings into JS.
    document.querySelectorAll(".games-table tr.clickable-row").forEach(function (row) {
        const href = row.getAttribute("data-href");
        if (!href) return;
        row.addEventListener("click", function (event) {
            if (event.target.tagName === "A") return;  // let the anchor handle it
            window.location.href = href;
        });
        row.addEventListener("keydown", function (event) {
            if (event.key !== "Enter" && event.key !== " ") return;
            if (event.target.tagName === "A") return;
            event.preventDefault();
            window.location.href = href;
        });
    });
</script>

<section>
    <h3>Tournaments</h3>
    <p><a href="/ui/tournaments">View Tournaments →</a></p>
</section>
{% endblock %}