% 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> Many features of the user interface have not been completed yet, the API will almost certainly change, and even the URL is not final. 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 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">Filters</button>
                <button id="status-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button">Status</button>
            </p>
        </div>
    </div>

    <div id="status-area" class="appearing-panel card mb-3">
        <div class="card-header text-white bg-primary">
            <div class="row">
                <div class="col-auto me-auto">
                    Status
                </div>
                <div class="col-auto d-inline-flex">
                    <button id="close-status-button" type="button" class="btn-close btn-close-white" aria-label="Close"></button>
                </div>
            </div>

        </div>
        <div class="card-body">
            <div id="status-container" class="row row-cols-1 row-cols-md-4 g-4"></div>
        </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"></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="table-container"></div>

    <p>Spots to view:
        <select id="spots-to-fetch" class="storeable-select form-select ms-2" 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>
    </p>
</div>