{% extends "theme_one.html" %}
{% load i18n static common crispy_forms_tags utils_tags django_tables2 %}
{% block head_title %}{{ view.page_header }}{% endblock %}
{% block head_media_css %}
    {% if filter %}
        {{ filter.form.media.css }}
    {% endif %}
    {% if dashboard_layout %}
        {{ dashboard_layout.media.css }}
    {% endif %}
    {{ block.super }}
    <style>

        tr[data-status='red'] {
            background-color: rgba(197, 37, 37, 0.5);
        }
        tr[data-status='red2'] {
            background-color: rgb(255, 0, 0);
        }
        tr[data-status='blue'] {
            background-color: rgba(57, 63, 206, 0.5);
        }
    </style>
{% endblock %}
{% block body_content %}
    {{ block.super }}
    <div class="container-fluid">

        <div class="d-flex bd-highlight py-2">
            <h4 class="flex-grow-1" style="font-weight: bold">
                {{ view.page_header }}
            </h4>
            <div class="btn-group">
                {% if view.get_back_url %}
                    <a class="btn btn-gray" href="{{ view.get_back_url }}">{% trans 'Back' %}</a>
                {% endif %}
                {% if view.add_url %}
                    <a class="btn btn-green" href="{{ view.add_url }}">{% trans 'Add' %}</a>
                {% endif %}
                {% if view.get_extra_buttons %}
                    {% for btn in view.get_extra_buttons %}
                        <a class="btn {{ btn.color }}" href="{{ btn.url }}">{{ btn.text }}</a>
                    {% endfor %}
                {% endif %}
            </div>

        </div>
        {% if filter %}
            <div class="row card-view">
                <form method="get">
                    {% crispy filter.form %}
                </form>
            </div>
        {% endif %}
        {% with view.get_consoles_data as console_data %}
            <div class="row justify-content-center p-3">
                <div class="col-auto card p-3 text-center m-1">
                    <div>Sum Unique Consoles</div>
                    <div>{{ console_data.sum_console_number }}</div>
                </div>
            </div>
        {% endwith %}

        {% if form %}
            {% include 'generic_views/partial/form_view.parial.html' %}
        {% endif %}

        {% if table %}
            <div class="row card py-2 table-responsive">
                {% include 'generic_views/partial/table_index_count.html' %}
                {% render_table table 'generic_views/partial/list_view_table.partial.html' %}
            </div>
        {% endif %}
    </div>
{% endblock body_content %}
{% block body_js %}
    {{ block.super }}
    {% if dashboard_layout %}
        {{ dashboard_layout.media.js }}
    {% endif %}
    {% if filter %}
        {{ filter.form.media.js }}
    {% endif %}
{% endblock %}