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

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

    <div id="filters-area" class="appearing-panel card mb-3">
        {% module Template("widgets/filters_area_header.html") %}
        <div class="card-body">
            <div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
                <div class="col">
                    {% module Template("cards/bands.html") %}
                    <div class="mt-4"></div>
                    {% module Template("cards/dx_continent.html") %}
                    <div class="mt-4"></div>
                    {% module Template("cards/de_continent.html") %}
                </div>
                <div class="col">
                    {% module Template("cards/activities.html",
                    activities=options["activities"], include_general_dx=True) %}
                </div>
                <div class="col">
                    {% module Template("cards/sources.html",
                    sources=options["spot_providers"],
                    sources_enabled_by_default=options["spot_providers_enabled_by_default"]) %}
                    <div class="mt-4"></div>
                    {% module Template("cards/modes.html") %}
                </div>
            </div>
        </div>
    </div>

    <div id="display-area" class="appearing-panel card mb-3">
        {% module Template("widgets/display_area_header.html") %}
        <div class="card-body">
            <div id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
                <div class="col">
                    {% module Template("cards/spot_age.html") %}
                </div>
                <div class="col">
                    {% module Template("cards/color_scheme_and_band_color_scheme.html") %}
                </div>
            </div>
        </div>
    </div>

    {% if web_ui_options["qrz_enabled"] or web_ui_options["hamqth_enabled"] %}
    <div id="data-area" class="appearing-panel card mb-3">
        {% module Template("widgets/your_data_area_header.html") %}
        <div class="card-body">
            <div class="row row-cols-1 row-cols-md-4 g-4">
                {% if web_ui_options["qrz_enabled"] %}
                <div class="col">
                    {% module Template("cards/qrz.html") %}
                </div>
                {% end %}
                {% if web_ui_options["hamqth_enabled"] %}
                <div class="col">
                    {% module Template("cards/hamqth.html") %}
                </div>
                {% end %}
                <div class="col">
                    {% module Template("cards/wanted_calls.html") %}
                </div>
            </div>
        </div>
    </div>
    {% end %}

    <div id="bands-container"></div>

</div>

<script>
    const BANDS = {% raw safe_json_dumps(options["bands"]) %};
</script>

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

{% end %}