{% 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="/help"
                                                                                                       class="alert-link">Help
        pages</a>. If that sounds like nonsense to you, you can visit <a href="/help/faq" class="alert-link">the FAQ
        page</a> to learn more.
        <button type="button" id="intro-box-dismiss" class="btn-close" data-bs-dismiss="alert"
                aria-label="Close"></button>
    </div>
</div>

{% if telnet_server_enabled %}
<div id="intro-box-telnet" 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 now has a telnet server!</strong><br/>If you'd like to
        add Spothole as a source of data to your desktop logging application, now you can. Use server address
        <code>{{ telnet_server_address }}</code> and port <code>{{ telnet_server_port }}</code>.
        <button type="button" id="intro-box-telnet-dismiss" class="btn-close" data-bs-dismiss="alert"
                aria-label="Close"></button>
    </div>
</div>
{% end %}

<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") %}
                <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") %}
                {% 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/time_zone.html") %}
                    <div class="mt-4"></div>
                    {% module Template("cards/audio.html") %}
                </div>
                <div class="col">
                    {% module Template("cards/number_of_spots.html") %}
                </div>
                <div class="col">
                    {% module Template("cards/color_scheme_and_band_color_scheme.html") %}
                </div>
                <div class="col">
                    {% module Template("cards/table_columns_spots.html") %}
                </div>
            </div>
        </div>
    </div>

    <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/location.html") %}
                    <div class="mt-4"></div>
                    {% module Template("cards/worked_calls.html") %}
                </div>
                <div class="col">
                    {% module Template("cards/wanted_calls.html") %}
                </div>
            </div>
        </div>
    </div>

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

</div>

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

{% end %}