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

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

{% block page_body %}
    <header class="game-header">
        <div class="header-left">{{ model.game.start_on.strftime('%-d %b %Y, %-I:%M %p') if model.game.start_on else '' }}</div>
        <div class="header-center">
            <div class="game-meta">
                {% if model.game.is_commander %}
                    <span class="badge badge-commander">Commander</span>
                {% elif model.game.is_draft %}
                    <span class="badge badge-draft">Draft</span>
                {% elif model.game.is_sealed %}
                    <span class="badge badge-sealed">Sealed</span>
                {% else %}
                    <span class="badge badge-standard">Standard</span>
                {% endif %}
                {% if model.game.location_name %}
                    <span class="location">{{ model.game.location_name }}</span>
                {% endif %}
            </div>
        </div>
        <div class="header-right">{{ model.game.end_on.strftime('%-d %b %Y, %-I:%M %p') if model.game.end_on else '' }}</div>

        {% set block_id = 'container_buttons_save_cancel' %}
        {% include 'components/common/buttons/_buttons_save_cancel.html' %}
    </header>

    <!-- Setup Section (shown when no players) -->
    <div class="setup-section tcg-card {% if model.players and model.players|length > 0 %}hidden{% endif %}" id="setupSection">
        <h2 class="tcg-section-title">Game Setup</h2>
        <div class="setup-controls">
            <div class="control-group">
                <label class="tcg-label" for="playerCount">Players:</label>
                <input type="number" id="playerCount" class="tcg-input" min="2" max="8" value="4">
            </div>
            <div class="control-group">
                <label class="tcg-label" for="startingLife">Starting Life:</label>
                <input type="number" id="startingLife" class="tcg-input" min="1" value="{{ model.game.starting_life }}">
            </div>
        </div>
        <div id="playerSetupSection">
            <!-- <h3 class="tcg-section-title" style="font-size: 1.1rem; margin-top: 2rem;">Player Names</h3> -->
            <div id="playerSetupGrid" class="player-names-grid"></div>
        </div>
        <div class="setup-actions">
            <button class="btn-tcg">Begin Battle</button>
        </div>
    </div>

    <!-- Game Section (shown when game is active) -->
    <div class="{% if not model.players or model.players|length == 0 %}hidden{% endif %}" id="gameSection">
        <div class="{{ model.FLAG_ROW }} {{ model.FLAG_CONTAINER }} {{ model.FLAG_ROUND }}">
            <div class="{{ model.FLAG_ROW }} {{ model.FLAG_CONTAINER }} {{ model.FLAG_ROUND }}">
                {#
                <label class="{{ model.FLAG_ROUND }}">Round</label>
                <input type="number" id="{{ model.ID_INPUT_ROUND }}" class="{{ model.FLAG_ROUND }}" />
                #}
                <span class="{{ model.FLAG_ROUND }} {{ model.FLAG_DISPLAY_ORDER }}">Round:</span>
                <div class="{{ model.FLAG_ROUND }} {{ model.FLAG_DISPLAY_ORDER}}">
                    <button class="{{ model.FLAG_ROUND_DISPLAY_ORDER_BUTTON }} {{ model.FLAG_ROUND_DISPLAY_ORDER_MINUS }}">&minus;</button>
                    <span class="{{ model.FLAG_ROUND }} {{ model.FLAG_DISPLAY_ORDER }}"></span>
                    <button class="{{ model.FLAG_ROUND_DISPLAY_ORDER_BUTTON }} {{ model.FLAG_ROUND_DISPLAY_ORDER_PLUS }}">+</button>
                </div>
            </div>
        </div>
        <div class="players-grid" id="playersGrid">
            {#
            {% for player in model.players %}
                {% set player_damage = [] %}
                {% for damage in model.damage_records %}
                    {% if damage.player_id == player.player_id %}
                        {% set _ = player_damage.append(damage) %}
                    {% endif %}
                {% endfor %}
                <div class="player-card {% if not player.active %}eliminated{% endif %}" data-player-id="{{ player.player_id }}">
                    <div class="player-header">
                        <div class="player-info">
                            <div class="player-name">{{ player.name }}</div>
                            <div class="commander-deaths">
                                <span>Commander Deaths:</span>
                                <div class="death-counter">
                                    <button class="death-btn" {{ model.ATTR_DATA_AMOUNT }}="-1">&minus;</button>
                                    <span class="death-display" id="deaths-{{ player.player_id }}">0</span>
                                    <button class="death-btn" {{ model.ATTR_DATA_AMOUNT }}="1">+</button>
                                </div>
                            </div>
                        </div>
                        <button class="eliminate-btn">
                            {% if not player.active %}Revive{% else %}Eliminate{% endif %}
                        </button>
                    </div>

                    <div class="life-total">
                        <div class="life-display" id="life-{{ player.player_id }}">40</div>
                        <div class="life-controls">
                            <button class="life-btn" {{ model.ATTR_DATA_AMOUNT }}="-5">-5</button>
                            <button class="life-btn" {{ model.ATTR_DATA_AMOUNT }}="-1">-1</button>
                            <button class="life-btn" {{ model.ATTR_DATA_AMOUNT }}="1">+1</button>
                            <button class="life-btn" {{ model.ATTR_DATA_AMOUNT }}="5">+5</button>
                        </div>
                    </div>

                    <div class="commander-damage-section">
                        <div class="section-title">Commander Damage Taken</div>
                        <div class="damage-grid" id="damage-grid-{{ player.player_id }}">
                            {% for other_player in model.players %}
                                {% if other_player.player_id != player.player_id %}
                                    <div class="damage-row">
                                        <span class="damage-source">from {{ other_player.name }}</span>
                                        <div class="damage-controls">
                                            <button class="damage-btn" {{ model.ATTR_DATA_AMOUNT }}="-1">&minus;</button>
                                            <span class="damage-display" id="cmd-dmg-{{ player.player_id }}-{{ other_player.player_id }}">0</span>
                                            <button class="damage-btn" {{ model.ATTR_DATA_AMOUNT }}="1">+</button>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endfor %}
            #}
        </div>
    </div>

    <div class="{{ model.FLAG_DAMAGE_LOG }} {{ model.FLAG_CONTAINER }}">
        <h2 class="tcg-section-title">Damage Log</h2>
        <table>
            <thead>
                <tr>
                    <th class="{{ model.ATTR_ROUND_ID }}">Round</th>
                    <th class="{{ model.ATTR_PLAYER_ID }}">Player</th>
                    <th class="{{ model.ATTR_RECEIVED_FROM_COMMANDER_PLAYER_ID }}">Received From Commander</th>
                    <th class="{{ model.FLAG_LIFE_GAIN }}">Life Gain</th>
                    <th class="{{ model.FLAG_LIFE_LOSS }}">Life Loss</th>
                    <th class="{{ model.FLAG_COMMANDER_DEATHS }}">Commander Deaths</th>
                    <th class="{{ model.FLAG_IS_ELIMINATED }}">Is Eliminated</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <div class="save-indicator" id="saveIndicator">Game Saved</div>

    <div id="{{ model.PLAYER_SETUP_WRAPPER_TEMPLATE_ID }}" class="player-name-input-wrapper {{ model.FLAG_IS_COLLAPSED }}">
        <label class="player-name-heading-label tcg-label">Player</label>
        <div class="playerUser">
            <label class="player-name-label tcg-label">User</label>
            <select>
                {% for user in model.users %}
                    {% set user_selected_attribute_text = 'selected' if user.user_id == model.user.user_id else '' %}
                    <option value="{{ user.user_id }}" {{ model.ATTR_USER_ID }}="{{ user.user_id }}" {{ user_selected_attribute_text }}>{{ user.firstname }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="playerDeck">
            <label class="player-name-label tcg-label">Deck</label>
            <select>
                {% for deck in model.decks %}
                    <option value="{{ deck.deck_id }}" {{ model.ATTR_DECK_ID }}="{{ deck.deck_id }}">{{ deck.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="playerName">
            <label class="player-name-label tcg-label">Name</label>
            <input type="text" placeholder="Blank for player + deck name" />
        </div>
    </div>

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

    <script>
        var attrGameId = "{{ model.ATTR_GAME_ID }}";
        var attrPlayerId = "{{ model.ATTR_PLAYER_ID }}";
        var attrReceivedFromCommanderPlayerId = "{{ model.ATTR_RECEIVED_FROM_COMMANDER_PLAYER_ID }}";
        var damageRecords = {{ model.convert_list_objects_to_json(model.damage_records) | tojson | safe }};
        var decks = {{ model.convert_list_objects_to_json(model.decks) | tojson | safe }};
        var flagDamageLog = "{{ model.FLAG_DAMAGE_LOG }}";
        var flagRoundDisplayOrderButton = "{{ model.FLAG_ROUND_DISPLAY_ORDER_BUTTON }}";
        var flagRoundDisplayOrderMinus = "{{ model.FLAG_ROUND_DISPLAY_ORDER_MINUS }}";
        var flagRoundDisplayOrderPlus = "{{ model.FLAG_ROUND_DISPLAY_ORDER_PLUS }}";
        var flagPlayer = "{{ model.FLAG_PLAYER }}";
        var game = {{ model.game.to_json() | tojson | safe }};
        var gameId = {{ model.game.game_id }};
        var hashSaveGamePlayer = "{{ model.HASH_SAVE_MTG_GAME_PLAYER }}";
        var hashSaveGameRound = "{{ model.HASH_SAVE_MTG_GAME_ROUND }}";
        var hashSaveGameRoundPlayerDamage = "{{ model.HASH_SAVE_MTG_GAME_ROUND_PLAYER_DAMAGE }}";
        var hashPageGames = "{{ model.HASH_PAGE_MTG_GAMES }}";
        var idInputRound = "#{{ model.ID_INPUT_ROUND }}";
        var players = {{ model.convert_list_objects_to_json(model.players) | tojson | safe }};
        var playerSetupWrapperTemplateId = "{{ model.PLAYER_SETUP_WRAPPER_TEMPLATE_ID }}";
        var rounds = {{ model.convert_list_objects_to_json(model.rounds) | tojson | safe }};
        var startingLife = 40;
        var user = {{ model.user.to_json() | tojson | safe }};
        var users = {{ model.convert_list_objects_to_dict_json_by_attribute_key_default(model.users) | tojson | safe }};
    </script>
{% endblock %}