{% extends "base.html" %}
{% block content %}

<div class="mt-3">
    <div id="settingsButtonRow" class="row mb-3">
        <div class="col-auto me-auto pt-3">
            {% module Template("widgets/refresh-timer.html", web_ui_options=web_ui_options) %}
        </div>
        <div class="col-auto">
            <div class="d-inline-flex gap-1">
                {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
            </div>
        </div>
    </div>

    <div id="filters-area" class="appearing-panel card mb-3">
        {% module Template("widgets/filters-area-header.html", web_ui_options=web_ui_options) %}
        <div class="card-body">
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
                    {% module Template("cards/dx-continent.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
                    {% module Template("cards/sources.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
                    {% module Template("cards/duration-limit-alerts.html", web_ui_options=web_ui_options) %}
                </div>
            </div>
        </div>
    </div>

    <div id="display-area" class="appearing-panel card mb-3">
        {% module Template("widgets/display-area-header.html", web_ui_options=web_ui_options) %}
        <div class="card-body">
            <div id="display-container" class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
                    {% module Template("cards/time-zone.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
                    {% module Template("cards/number-of-alerts.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
                    {% module Template("cards/color-scheme.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
                    {% module Template("cards/table-columns-alerts.html", web_ui_options=web_ui_options) %}
                </div>
            </div>
        </div>
    </div>

    <div id="table-container">
        <table id="table" class="table"><thead><tr class="table-primary"></tr></thead><tbody></tbody></table>
    </div>

</div>

<script src="/js/common.js?v=8"></script>
<script src="/js/alerts.js?v=8"></script>
<script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>

{% end %}