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

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

{% block page_body %}
    {#
    <div class="section-header">
        <h2 class="tcg-section-title">Decks</h2>
    </div>
    #}

    <!-- Filters Form -->
        <form id="{{ model.ID_FORM_FILTERS }}" class="tcg-card {{ model.FLAG_FILTER }} {{ model.FLAG_ROW }} {{ model.FLAG_CARD }}">
        {{ model.form_filters.hidden_tag() }}
        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
            <div class="{{ model.FLAG_CONTAINER_INPUT }} {{ model.FLAG_COLUMN }} {{ model.FLAG_FILTER }} {{ model.FLAG_SEARCH }}"
                {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.form_filters.search.data }}">
                {{ model.form_filters.search.label(class="tcg-label") }}
                {{ model.form_filters.search(class="tcg-input", placeholder="Search decks...") }}
            </div>
            <div class="{{ model.FLAG_CONTAINER_INPUT }} {{ model.FLAG_COLUMN }} {{ model.FLAG_FILTER }} {{ model.FLAG_ACTIVE }}"
                {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.form_filters.active_only.data }}">
                {{ model.form_filters.active_only() }}
                {{ model.form_filters.active_only.label(class="tcg-label") }}
            </div>
            <div class="{{ model.FLAG_CONTAINER_INPUT }} {{ model.FLAG_COLUMN }} {{ model.FLAG_FILTER }} {{ model.FLAG_IS_COMMANDER }}"
                {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.form_filters.is_commander.data }}">
                {{ model.form_filters.is_commander() }}
                {{ model.form_filters.is_commander.label(class="tcg-label") }}
            </div>
        </div>
        {% set block_id = 'buttons_table_default' %}
        {% include 'components/common/buttons/_buttons_save_cancel.html' %}
    </form>
    {#
        {% set block_id = 'container_buttons_save_cancel' %}
        {% include 'components/common/buttons/_buttons_save_cancel.html' %}
    </form>
    #}

    <div class="decks-section tcg-card">
        <!-- Decks Table -->
        <table class="decks-table {{ model.FLAG_TABLE_MAIN }} {{ model.FLAG_ROW }} {{ model.FLAG_CARD }} {{ model.FLAG_DECK }}" id="{{ model.ID_TABLE_MAIN }}">
            <thead>
                <tr>
                    <th class="{{ model.FLAG_NAME }}">Name</th>
                    <th class="{{ model.FLAG_IS_COMMANDER }}">Is Commander</th>
                    <th class="{{ model.ATTR_COMMANDER_BRACKET_ID }}">Commander Bracket</th>
                    <th class="{{ model.FLAG_ACTIVE }}">
                        {% set class_name = model.FLAG_ACTIVE %}
                        {% set attribute_text = '' %}
                        {% include 'components/common/buttons/_icon_add.html' %}
                    </th>
                </tr>
            </thead>
            <tbody>
                {% set is_blank_row = False %}
                {% for deck in model.decks %}
                    {% include 'components/tcg/_row_deck.html' %}
                {% endfor %}
            </tbody>
        </table>

        <!-- Statistics -->
        <div class="section-header">
            <h2 class="tcg-section-title">Statistics</h2>
        </div>
        <table class="{{ model.FLAG_STATISTICS }} {{ model.FLAG_ROW }} {{ model.FLAG_CARD }} {{ model.FLAG_DECK }}">
            <thead>
                <tr>
                    <th class="{{ model.FLAG_DECK }}">Deck</th>
                    <th class="{{ model.FLAG_NAME }}">Name</th>
                    <th class="{{ model.FLAG_VALUE }}">Value</th>
                </tr>
            </thead>
            <tbody>
                {% for statistic in model.statistics %}
                    <tr class="{{ model.FLAG_ROW_NEW }} {{ model.FLAG_STATISTIC }}" {{ model.ATTR_STATISTIC_ID }}>
                        <td class="{{ model.ATTR_DECK_ID }} {{ model.ATTR_ENTITY_RECORD_ID }}">{{ statistic.entity_record_name }}</td>
                        <td class="{{ model.FLAG_NAME }}">{{ statistic.name }}</td>
                        <td class="{{ model.FLAG_VALUE }}">{{ statistic.get_formatted_value() }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

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

    <div id="{{ model.ID_CONTAINER_TEMPLATE_ELEMENTS }}">
        <!-- Active column -->
        <!-- Delete -->
        {% set class_name = '' %}
        {% include 'components/common/buttons/_icon_trash.html' %}
        <!-- Undelete -->
        {% set class_name = model.FLAG_ACTIVE %}
        {% set attribute_text = '' %}
        {% include 'components/common/buttons/_icon_add.html' %}
    </div>

    <script>
        var attrCommanderBracketId = "{{ model.ATTR_COMMANDER_BRACKET_ID }}";
        var commanderBrackets = {{ model.convert_list_objects_to_json(model.commander_brackets) | tojson | safe }};
        var decks = {{ model.convert_list_objects_to_json(model.decks) | tojson | safe }};
        var flagStatistics = "{{ model.FLAG_STATISTICS }}";
        var flagIsCommander = "{{ model.FLAG_IS_COMMANDER }}";
    </script>
{% endblock %}