{% 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">
        <div class="col-4">
            <p class="d-inline-flex gap-1">
                {% module Template("widgets/run-pause.html", web_ui_options=web_ui_options) %}
                {% raw web_ui_options["support-button-html"] %}
            </p>
        </div>
        <div class="col-8 text-end">
            <p class="d-inline-flex gap-1">
                {% module Template("widgets/search.html", web_ui_options=web_ui_options) %}
                {% 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/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/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 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>
        </div>
    </div>

    <div id="table-container">
        <table id="table" class="table"><thead><tr class="table-primary"></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/common.js?v=8"></script>
<script src="/js/spotsbandsandmap.js?v=8"></script>
<script src="/js/spots.js?v=8"></script>
<script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>

{% end %}