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

<div id="map-intro-box" class="permanently-dismissible-box mt-3">
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
        <i class="fa-solid fa-circle-info"></i> <strong>Spothole's map</strong><br/>Spothole pulls in location data from
        a number of sources to try and provide the best map possible. However, please don't trust them to be anything
        other than a rough guide. In particular, if you are seeing lots of spots in the centre of a country, please
        consider opening the "Your Data" menu and providing QRZ.com and/or HamQTH credentials so that Spothole can find
        more accurate locations for these spots. More information can be found in the
        <a href="/about#accuracy" class="alert-link">Data Accuracy section of the About page</a>.
        <button type="button" id="map-intro-box-dismiss" class="btn-close" data-bs-dismiss="alert"
                aria-label="Close"></button>
    </div>
</div>

<div id="map">
    <div id="settingsButtonRowMap" class="mt-3 px-3">
        <div 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", 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 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/basemap.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 id="data-area" class="appearing-panel card mb-3">
            {% module Template("widgets/data-area-header.html", web_ui_options=web_ui_options) %}
            <div class="card-body">
                <div class="row row-cols-1 row-cols-md-4 g-4">
                    <div class="col">
                        {% module Template("cards/qrz.html", web_ui_options=web_ui_options) %}
                    </div>
                    <div class="col">
                        {% module Template("cards/hamqth.html", web_ui_options=web_ui_options) %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="/static/vendor/css/leaflet-1.9.4.min.css">
<link rel="stylesheet" href="/static/vendor/css/leaflet-extra-markers-1.2.2.min.css">
<script src="/static/vendor/js/leaflet-1.9.4.min.js"></script>
<script src="/static/vendor/js/oms-leaflet-0.2.7.min.js"></script>
<script src="/static/vendor/js/leaflet-providers-2.0.0.js"></script>
<script src="/static/vendor/js/leaflet-extra-markers-1.2.2.min.js"></script>
<script src="/static/vendor/js/leaflet-geodesic-2.7.2.umd.min.js"></script>
<script src="/static/vendor/js/leaflet-vectorgrid-1.3.0.js"></script>
<script src="/static/vendor/js/text-image-0.7.0.js"></script>
<script src="/static/vendor/js/leaflet-terminator-1.1.0.min.js"></script>
<script src="/static/vendor/js/leaflet-maidenhead.js"></script>
<script src="/static/vendor/js/leaflet-ituzones.js"></script>
<script src="/static/vendor/js/leaflet-cqzones.js"></script>
<script src="/static/vendor/js/leaflet-workedallbritainireland.js"></script>

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

{% end %}