{% 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">
                <span class="btn-group" role="group">
                  <input type="radio" class="btn-check" name="runPause" id="runButton" autocomplete="off" checked>
                    <label class="btn btn-outline-primary" for="runButton"><i class="fa-solid fa-play"></i><span class="hideonmobile">&nbsp;Run</span></label>

                  <input type="radio" class="btn-check" name="runPause" id="pauseButton" autocomplete="off">
                    <label class="btn btn-outline-primary" for="pauseButton"><i class="fa-solid fa-pause"></i><span class="hideonmobile">&nbsp;Pause</span></label>
                </span>
                {% raw web_ui_options["support-button-html"] %}
            </p>
        </div>
        <div class="col-8 text-end">
            <p class="d-inline-flex gap-1">
                <span style="position: relative;">
                    <i id="searchicon" class="fa-solid fa-magnifying-glass"></i>
                    <input id="search" type="search" class="form-control" oninput="filtersUpdated();" placeholder="Search">
                </span>
                <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i><span class="hideonmobile">&nbsp;Filters</span></button>
                <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i><span class="hideonmobile">&nbsp;Display</span></button>
            </p>
        </div>
    </div>

    <div id="filters-area" class="appearing-panel card mb-3">
        <div class="card-header text-white bg-primary">
            <div class="row">
                <div class="col-auto me-auto">
                    Filters
                </div>
                <div class="col-auto d-inline-flex">
                    <button id="close-filters-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeFiltersPanel();"></button>
                </div>
            </div>

        </div>
        <div class="card-body">
            <div class="row row-cols-1 g-4 mb-4 row-cols-md-3">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Bands</h5>
                            <p id="band-options" class="card-text spothole-card-text"></p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">SIGs</h5>
                            <p id="sig-options" class="card-text spothole-card-text"></p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Sources</h5>
                            <p id="source-options" class="card-text spothole-card-text"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">DX Continent</h5>
                            <p id="dx-continent-options" class="card-text spothole-card-text"></p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">DE Continent</h5>
                            <p id="de-continent-options" class="card-text spothole-card-text"></p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Modes</h5>
                            <p id="mode-options" class="card-text spothole-card-text"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="display-area" class="appearing-panel card mb-3">
        <div class="card-header text-white bg-primary">
            <div class="row">
                <div class="col-auto me-auto">
                    Display
                </div>
                <div class="col-auto d-inline-flex">
                    <button id="close-display-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeDisplayPanel();"></button>
                </div>
            </div>

        </div>
        <div class="card-body">
            <div id="display-container" class="row row-cols-1 row-cols-md-4 g-4">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Time Zone</h5>
                            <p class="card-text spothole-card-text"> Use
                                <select id="timeZone" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="timeZoneUpdated();" style="width: 8em; display: inline-block;">
                                    <option value="UTC" selected>UTC</option>
                                    <option value="local">Local time</option>
                                </select>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Number of Spots</h5>
                            <p class="card-text spothole-card-text">Show up to
                                <select id="spots-to-fetch" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
                                {% for c in web_ui_options["spot-count"] %}
                                    <option value="{{c}}" {% if web_ui_options["spot-count-default"] == c %}selected{% end %}>{{c}}</option>
                                {% end %}
                                </select>
                                spots
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Location</h5>
                                <div class="form-group spothole-card-text">
                                    <label for="userGrid">Your grid:</label>
                                    <input type="text" class="storeable-text form-control" id="userGrid" placeholder="AA00aa" oninput="userGridUpdated();" style="width: 10em; display: inline-block;">
                                </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Theme</h5>
                            <p class="card-text spothole-card-text">
                                <label class="form-check-label" for="color-scheme">UI color scheme</label>
                                <select id="color-scheme" class="storeable-select form-select d-inline-block" oninput="setColorSchemeFromUI();" style="display: inline-block;">
                                    <option value="auto" {% if web_ui_options["color-scheme-default"] == "auto" %}selected{% end %}>Automatic</option>
                                    <option value="light" {% if web_ui_options["color-scheme-default"] == "light" %}selected{% end %}>Light</option>
                                    <option value="dark" {% if web_ui_options["color-scheme-default"] == "dark" %}selected{% end %}>Dark</option>
                                </select>
                            </p>
                            <p class="card-text spothole-card-text">
                                <label class="form-check-label" for="band-color-scheme">Band color scheme</label><br/>
                                <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
                                    <option value="PSK Reporter" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter" %}selected{% end %}>PSK Reporter</option>
                                    <option value="PSK Reporter (Adjusted)" {% if web_ui_options["band-color-scheme-default"] == "PSK Reporter (Adjusted)" %}selected{% end %}>PSK Reporter (Adjusted)</option>
                                    <option value="RBN" {% if web_ui_options["band-color-scheme-default"] == "RBN" %}selected{% end %}>RBN</option>
                                    <option value="Ham Rainbow" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow" %}selected{% end %}>Ham Rainbow</option>
                                    <option value="Ham Rainbow (Reverse)" {% if web_ui_options["band-color-scheme-default"] == "Ham Rainbow (Reverse)" %}selected{% end %}>Ham Rainbow (Reverse)</option>
                                    <option value="Kate Morley" {% if web_ui_options["band-color-scheme-default"] == "Kate Morley" %}selected{% end %}>Kate Morley</option>
                                    <option value="ColorBrewer" {% if web_ui_options["band-color-scheme-default"] == "ColorBrewer" %}selected{% end %}>ColorBrewer</option>
                                    <option value="IWantHue" {% if web_ui_options["band-color-scheme-default"] == "IWantHue" %}selected{% end %}>IWantHue</option>
                                    <option value="IWantHue (Color Blind)" {% if web_ui_options["band-color-scheme-default"] == "IWantHue (Color Blind)" %}selected{% end %}>IWantHue (Color Blind)</option>
                                    <option value="Mokole" {% if web_ui_options["band-color-scheme-default"] == "Mokole" %}selected{% end %}>Mokole</option>
                                </select>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Table Columns</h5>
                            <div class="form-group">
                                <div class="form-check form-check-inline">
                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowTime" value="tableShowTime" oninput="columnsUpdated();" checked>
                                  <label class="form-check-label" for="tableShowTime">Time</label>
                                </div>
                                <div class="form-check form-check-inline">
                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDX" value="tableShowDX" oninput="columnsUpdated();" checked>
                                  <label class="form-check-label" for="tableShowDX">DX</label>
                                </div>
                                <div class="form-check form-check-inline">
                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowFreq" value="tableShowFreq" oninput="columnsUpdated();" checked>
                                  <label class="form-check-label" for="tableShowFreq">Frequency</label>
                                </div>
                                <div class="form-check form-check-inline">
                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowMode" value="tableShowMode" oninput="columnsUpdated();" checked>
                                  <label class="form-check-label" for="tableShowMode">Mode</label>
                                </div>
                                <div class="form-check form-check-inline">
                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowComment" value="tableShowComment" oninput="columnsUpdated();" checked>
                                  <label class="form-check-label" for="tableShowComment">Comment</label>
                                </div>
                                <div class="form-check form-check-inline">
                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowBearing" value="tableShowBearing" oninput="columnsUpdated();">
                                  <label class="form-check-label" for="tableShowBearing">Bearing</label>
                                </div>
                                <div class="form-check form-check-inline">
                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowType" value="tableShowType" oninput="columnsUpdated();" checked>
                                  <label class="form-check-label" for="tableShowType">Type</label>
                                </div>
                                <div class="form-check form-check-inline">
                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowRef" value="tableShowRef" oninput="columnsUpdated();" checked>
                                  <label class="form-check-label" for="tableShowRef">Ref.</label>
                                </div>
                                <div class="form-check form-check-inline">
                                  <input class="form-check-input storeable-checkbox" type="checkbox" id="tableShowDE" value="tableShowDE" oninput="columnsUpdated();" checked>
                                  <label class="form-check-label" for="tableShowDE">DE</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </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=7"></script>
<script src="/js/spotsbandsandmap.js?v=7"></script>
<script src="/js/spots.js?v=7"></script>
<script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>

{% end %}