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

<div id="map">
    <div id="settingsButtonRowMap" class="mt-3 px-3" style="z-index: 1002; position: relative;">
        <div class="row">
            <div class="col-auto me-auto pt-3"></div>
            <div class="col-auto">
                <p class="d-inline-flex gap-1">
                    {% module Template("widgets/filters-display-buttons.html", web_ui_options=web_ui_options) %}
                </p>
            </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 g-4 mb-4 row-cols-md-3">
                    <div class="col">
                        {% module Template("cards/bands.html", web_ui_options=web_ui_options) %}
                    </div>
                    <div class="col">
                        {% module Template("cards/sigs.html", web_ui_options=web_ui_options) %}
                    </div>
                    <div class="col">
                        {% module Template("cards/sources.html", web_ui_options=web_ui_options) %}
                    </div>
                </div>
                <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/de-continent.html", web_ui_options=web_ui_options) %}
                    </div>
                    <div class="col">
                        {% module Template("cards/modes.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-4 g-4">
                    <div class="col">
                        {% module Template("cards/spot-age.html", web_ui_options=web_ui_options) %}
                    </div>
                    <div class="col">
                        {% module Template("cards/map-features.html", web_ui_options=web_ui_options) %}
                    </div>
                    <div class="col">
                        {% module Template("cards/color-scheme-and-band-color-scheme.html", web_ui_options=web_ui_options) %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/dist/css/leaflet.extra-markers.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-providers@2.0.0/leaflet-providers.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.2/src/assets/js/leaflet.extra-markers.min.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
<script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>

<script>
    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script>
<script src="/js/common.js?v=8"></script>
<script src="/js/spotsbandsandmap.js?v=8"></script>
<script src="/js/map.js?v=8"></script>
<script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>

{% end %}