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

<div id="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>What is Spothole?</strong><br/>Spothole is an aggregator of
        amateur radio spots from DX clusters and outdoor activity programmes. It's free for anyone to use and includes
        an API that developers can build other applications on. For more information, check out the <a href="/about"
                                                                                                       class="alert-link">"About"
        page</a>. If that sounds like nonsense to you, you can visit <a href="/about#faq" class="alert-link">the FAQ
        section</a> to learn more.
        <button type="button" id="intro-box-dismiss" class="btn-close" data-bs-dismiss="alert"
                aria-label="Close"></button>
    </div>
</div>

<div class="mt-3">
    <div id="settingsButtonRow" class="row mb-3">
        <div class="col-md-4 mb-3 mb-md-0">
            <div class="d-inline-flex gap-3">
                {% module Template("widgets/run-pause.html", web_ui_options=web_ui_options) %}
                <div class="d-inline-flex">{% raw web_ui_options["support-button-html"] %}</div>
            </div>
        </div>
        <div class="col-md-8 text-end">
            <div class="d-inline-flex gap-3">
                {% module Template("widgets/search.html", web_ui_options=web_ui_options) %}
                {% 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/time-zone.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
                    {% module Template("cards/number-of-spots.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 class="col">
                    {% module Template("cards/table-columns-spots.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
                    {% module Template("cards/audio.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 class="col">
                    {% module Template("cards/location.html", web_ui_options=web_ui_options) %}
                </div>
                <div class="col">
                    {% module Template("cards/worked-calls.html", web_ui_options=web_ui_options) %}
                </div>
            </div>
        </div>
    </div>

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

</div>

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

{% end %}