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

<div class="mt-3">
    <div id="settingsButtonRow" 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 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">Spot Age</h5>
                            <p class="card-text spothole-card-text">Last
                                <select id="max-spot-age" class="storeable-select form-select ms-2 me-2 d-inline-block" oninput="filtersUpdated();" style="width: 5em; display: inline-block;">
                                </select>
                                minutes
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Theme</h5>
                                <div class="form-group">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input storeable-checkbox" type="checkbox" id="darkMode" value="darkMode" oninput="toggleDarkMode();">
                                        <label class="form-check-label" for="darkMode">Dark mode</label>
                                    </div>
                                    <p class="card-text spothole-card-text">
                                        Band color scheme<br/>
                                        <select id="band-color-scheme" class="storeable-select form-select d-inline-block" oninput="setBandColorSchemeFromUI();" style="display: inline-block;">
                                        </select>
                                    </p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

</div>

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

{% end %}