{% extends "skeleton.html" %}
{% block head_extra %}
<link rel="stylesheet" href="/css/style.css?v=1781958515" type="text/css">
<link href="/vendor/css/bootstrap-5.3.8.min.css" rel="stylesheet">
<link href="/vendor/css/fontawesome-6.7.2.min.css" rel="stylesheet">
<link href="/vendor/css/solid-6.7.2.min.css" rel="stylesheet">

<script src="/vendor/js/jquery-3.7.1.min.js"></script>
<script src="/vendor/js/moment-2.29.4.min.js"></script>
<script src="/vendor/js/bootstrap-5.3.8.bundle.min.js"></script>
<script src="/vendor/js/tinycolor2-1.6.0.min.js"></script>

<script src="/js/utils.js?v=1781958515"></script>
<script src="/js/ui-ham.js?v=1781958515"></script>
<script src="/js/geo.js?v=1781958515"></script>
<script src="/js/common.js?v=1781958515"></script>
{% end %}
{% block body %}
<div class="container">
    <nav id="header" class="navbar navbar-expand-lg bg-body p-0 border-bottom">
        <div class="container-fluid p-0">
            <a class="navbar-brand" href="/">
                <img src="/img/logo.png" class="logo" width="192" height="60" alt="Spothole">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbar-toggler-content" aria-controls="navbar-toggler-content"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar-toggler-content">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item ms-4"><a href="/" class="nav-link" id="nav-link-spots"><i
                            class="fa-solid fa-tower-cell"></i> Spots</a></li>
                    <li class="nav-item ms-4"><a href="/map" class="nav-link" id="nav-link-map"><i
                            class="fa-solid fa-map"></i> Map</a></li>
                    <li class="nav-item ms-4"><a href="/bands" class="nav-link" id="nav-link-bands"><i
                            class="fa-solid fa-ruler-vertical"></i> Bands</a></li>
                    <li class="nav-item ms-4"><a href="/alerts" class="nav-link" id="nav-link-alerts"><i
                            class="fa-solid fa-clock"></i> Upcoming</a></li>
                    {% if allow_spotting %}
                    <li class="nav-item ms-4"><a href="/add-spot" class="nav-link" id="nav-link-add-spot"><i
                            class="fa-solid fa-comment"></i> Add&nbsp;Spot</a></li>
                    {% end %}
                    <li class="nav-item ms-4"><a href="/conditions" class="nav-link" id="nav-link-conditions"><i
                            class="fa-solid fa-sun"></i> Conditions</a></li>
                    <li class="nav-item ms-4"><a href="/status" class="nav-link" id="nav-link-status"><i
                            class="fa-solid fa-chart-simple"></i> Status</a></li>
                    <li class="nav-item ms-4"><a href="/about" class="nav-link" id="nav-link-about"><i
                            class="fa-solid fa-circle-info"></i> About</a></li>
                    <li class="nav-item ms-4"><a href="/apidocs" class="nav-link" id="nav-link-api"><i
                            class="fa-solid fa-gear"></i> API</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <main>

        {% block content %}{% end %}

    </main>

    <div id="footer" class="hideonmobile hideonmap">
        <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
            <p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com"
                                                                              class="text-body-secondary">Ian, MØTRT</a>
                and other contributors.</p>
            <p class="col-md-4 mb-0 justify-content-center text-body-secondary text-center">Spothole
                v{{software_version}}</p>
            <ul class="nav col-md-4 justify-content-end">
                <li class="nav-item">
                    <a href="/about#faq" class="nav-link px-3 text-body-secondary">FAQ</a>
                </li>
                <li class="nav-item">
                    <a href="/about#privacy" class="nav-link px-3 text-body-secondary">Privacy</a>
                </li>
                <li class="nav-item">
                    <a href="https://git.ianrenton.com/ian/spothole" class="nav-link px-3 text-body-secondary">Source
                        Code</a>
                </li>
                <li class="nav-item">
                    <a href="https://git.ianrenton.com/ian/spothole/issues" class="nav-link px-3 text-body-secondary">Issue
                        Tracker</a>
                </li>
            </ul>
        </footer>
    </div>
</div>

<div id="embeddedModeFooter" class="text-body-secondary pt-2 px-3 pb-1">Powered by <img src="/img/logo.png" class="logo"
                                                                                        width="96" height="30"
                                                                                        alt="Spothole"></div>

{% end %}