{% extends 'layouts/layout_tcg.html' %}

{% block page_head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='dist/css/tcg_games.bundle.css') }}">
{% endblock %}

{% block page_body %}
    {#
    <header class="page-header">
        <h1 class="page-title">MTG Commander Games</h1>
        <p class="page-subtitle">Track your multiplayer battles</p>
    </header>
    #}
    <div class="games-section tcg-card">
        <div class="section-header">
            <h2 class="tcg-section-title">Your Games</h2>
            <button class="btn-tcg" id="btnNewGame">New Game</button>
        </div>

        <!-- Filters Form -->
        <form id="{{ model.ID_FORM_FILTERS }}" class="{{ model.FLAG_FORM_FILTERS }} {{ model.FLAG_IS_COLLAPSED }}">
            {{ model.form_filters.hidden_tag() }}
            <div class="filters-row">
                <div class="filter-group">
                    {{ model.form_filters.search.label(class="tcg-label") }}
                    {{ model.form_filters.search(class="tcg-input", placeholder="Search games...") }}
                </div>
                <div class="filter-group checkbox-group">
                    {{ model.form_filters.active_only() }}
                    {{ model.form_filters.active_only.label(class="tcg-label") }}
                </div>
                <div class="filter-group checkbox-group">
                    {{ model.form_filters.is_commander() }}
                    {{ model.form_filters.is_commander.label(class="tcg-label") }}
                </div>
                <div class="filter-group">
                    <button type="submit" class="btn-tcg-secondary btn-tcg">Apply Filters</button>
                </div>
            </div>
        </form>

        <!-- Games Table -->
        <table class="games-table {{ model.FLAG_TABLE_MAIN }} {{ model.FLAG_ROW }} {{ model.FLAG_CARD }} {{ model.FLAG_DECK }}" id="{{ model.ID_TABLE_MAIN }}">
            <thead>
                <tr>
                    <th class="{{ model.ATTR_GAME_ID }}">Game ID</th>
                    <th class="{{ model.FLAG_IS_COMMANDER }}">Type</th>
                    <th class="{{ model.FLAG_LOCATION_NAME }}">Location</th>
                    <th class="{{ model.FLAG_START_ON }}">Started</th>
                    <th class="{{ model.FLAG_ACTIVE }}">Status</th>
                    <th class="{{ model.FLAG_NAV_MTG_GAME }}">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% if model.games and model.games|length > 0 %}
                    {% for game in model.games %}
                        <tr class="game-row {% if not game.active %}inactive{% endif %}" data-game-id="{{ game.game_id }}">
                            <td class="{{ model.ATTR_GAME_ID }}">#{{ game.game_id }}</td>
                            <td class="{{ model.FLAG_IS_COMMANDER }}">
                                {% if game.is_commander %}
                                    <span class="badge badge-commander">Commander</span>
                                {% elif game.is_draft %}
                                    <span class="badge badge-draft">Draft</span>
                                {% elif game.is_sealed %}
                                    <span class="badge badge-sealed">Sealed</span>
                                {% else %}
                                    <span class="badge badge-standard">Standard</span>
                                {% endif %}
                            </td>
                            <td class="{{ model.FLAG_LOCATION_NAME }}">{{ game.location_name or 'Unknown' }}</td>
                            <td class="{{ model.FLAG_START_ON }}">{{ model.format_datetime_text(game.start_on) if game.start_on else 'Not started' }}</td>
                            <td class="{{ model.FLAG_ACTIVE }}">
                                {% if game.end_on %}
                                    <span class="status status-ended">Ended</span>
                                {% elif game.active %}
                                    <span class="status status-active">Active</span>
                                {% else %}
                                    <span class="status status-inactive">Inactive</span>
                                {% endif %}
                            </td>
                            <td class="{{ model.FLAG_NAV_MTG_GAME }}">
                                <a href="{{ model.HASH_PAGE_MTG_GAME }}/{{ game.game_id }}" class="btn-tcg btn-join">Join Game</a>
                            </td>
                        </tr>
                    {% endfor %}
                {% else %}
                    <tr class="no-games-row">
                        <td colspan="6" class="no-games">
                            <div class="no-games-message">
                                <span class="no-games-icon">&#x2694;</span>
                                <p>No games found. Start a new battle!</p>
                            </div>
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>

    <!-- New Game Modal -->
    <div id="newGameModal" class="modal-overlay {{ model.FLAG_IS_COLLAPSED }}">
        <div class="modal-content tcg-card">
            <div class="modal-header">
                <h2 class="tcg-section-title">Create New Game</h2>
                <button class="modal-close">&times;</button>
            </div>
            <form id="newGameForm" class="new-game-form">
                <div class="form-group">
                    <label class="tcg-label" for="gameType">Game Type</label>
                    <select id="gameType" class="tcg-input" name="game_type">
                        <option value="commander" selected>Commander</option>
                        <option value="draft">Draft</option>
                        <option value="sealed">Sealed</option>
                        <option value="standard">Standard</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="tcg-label" for="locationName">Location</label>
                    <input type="text" id="locationName" name="location_name" class="tcg-input" placeholder="e.g., Local Game Store">
                </div>
                {#
                <div class="form-group">
                    <label class="tcg-label" for="playerCount">Number of Players</label>
                    <input type="number" id="playerCount" name="player_count" class="tcg-input" min="2" max="8" value="4">
                </div>
                #}
                <div class="form-group">
                    <label class="tcg-label" for="startingLife">Starting Life</label>
                    <input type="number" id="startingLife" name="starting_life" class="tcg-input" min="1" value="40">
                </div>
                <div class="form-group">
                    <label class="tcg-label" for="gameNotes">Notes</label>
                    <textarea id="gameNotes" name="notes" class="tcg-input" rows="3" placeholder="Optional notes about this game..."></textarea>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn-tcg btn-tcg-secondary">Cancel</button>
                    <button type="submit" class="btn-tcg">Create Game</button>
                </div>
            </form>
        </div>
    </div>

    {% include 'components/common/temporary/_overlay_confirm.html' %}
    {% include 'components/common/temporary/_overlay_error.html' %}

    <script>
        var games = {{ model.convert_list_objects_to_json(model.games) | tojson | safe }};
        var hashSaveGame = "{{ model.HASH_SAVE_MTG_GAME }}";
        var hashPageGame = "{{ model.HASH_PAGE_MTG_GAME }}";
        var flagGame = "{{ model.FLAG_GAME }}";
        var flagIsCommander = "{{ model.FLAG_IS_COMMANDER }}";
        var flagIsDraft = "{{ model.FLAG_IS_DRAFT }}";
        var flagIsSealed = "{{ model.FLAG_IS_SEALED }}";
        var flagLocationName = "{{ model.FLAG_LOCATION_NAME }}";
        var flagNotes = "{{ model.FLAG_NOTES }}";
        var flagStartOn = "{{ model.FLAG_START_ON }}";
        var flagStartingLife = "{{ model.FLAG_STARTING_LIFE }}";
    </script>
{% endblock %}