% rebase('webpage_base.tpl')

<!-- todo remove on release -->
<div class="mt-3">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <i class="fa-solid fa-triangle-exclamation"></i> <strong>This is a pre-release version of Spothole!</strong><br/>Several features of the user interface have not been completed yet, and the API could change between now and the time that the software is released. Please do not build anything on the Spothole API yet. You can <a href="https://git.ianrenton.com/ian/spothole/issues" class="alert-link">check the list of outstanding features here</a>. There are contact details on <a href="https://ianrenton.com/" class="alert-link">my website</a> if you need to get in touch. There is no timescale to complete it as it's just a hobby project, but it's open source so feel free to contribute!<br/>QRX QRX DE M0TRT SK :)
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>

<div id="intro-box" class="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 class="row">
        <div class="col-auto me-auto pt-3">
            <p id="timing-container">Loading...</p>
        </div>
        <div class="col-auto">
            <p class="d-inline-flex gap-1">
                <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i> Filters</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> Display</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 id="filters-container-1" class="row row-cols-1 g-4 mb-4"></div>
            <div id="filters-container-2" class="row row-cols-1 row-cols-md-4 g-4"></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;">
                                    <option value="10">10</option>
                                    <option value="25">25</option>
                                    <option value="50" selected>50</option>
                                    <option value="100">100</option>
                                </select>
                                spots
                            </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="tableShowSource" value="tableShowSource" oninput="columnsUpdated();" checked>
                                  <label class="form-check-label" for="tableShowSource">Source</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 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>
        </div>
    </div>

    <div id="table-container"></div>

</div>

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