<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="color-scheme" content="light">
    <meta name="theme-color" content="white"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">

    <meta property="og:title" content="Spothole"/>
    <meta property="twitter:title" content="Spothole"/>
    <meta name="description" content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
    <meta property="og:description" content="An Amateur Radio spotting tool bringing together DX clusters and outdoor programmes, providing a universal JSON API and web interface."/>
    <link rel="canonical" href="https://spothole.app/"/>
    <meta property="og:url" content="https://spothole.app/"/>
    <meta property="og:image" content="https://spothole.app/img/banner.png"/>
    <meta property="twitter:image" content="https://spothole.app/img/banner.png"/>
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="author" content="Ian Renton"/>
    <meta property="og:locale" content="en_GB"/>
    <meta property="og:type" content="website"/>

    <title>Spothole</title>

    <link rel="stylesheet" href="/css/style.css" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link href="/fa/css/fontawesome.min.css" rel="stylesheet" />
    <link href="/fa/css/solid.min.css" rel="stylesheet" />

    <link rel="icon" type="image/png" href="/img/icon-512.png">
    <link rel="apple-touch-icon" href="img/icon-512-pwa.png">
    <link rel="alternate icon" type="image/png" href="/img/icon-192.png">
    <link rel="alternate icon" type="image/png" href="/img/icon-32.png">
    <link rel="alternate icon" type="image/png" href="/img/icon-16.png">
    <link rel="alternate icon" type="image/x-icon" href="/img/favicon.ico">

    <link rel="manifest" href="manifest.webmanifest">

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
            crossorigin="anonymous"></script>

</head>
<body>
<div class="container">
    <nav 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" width="192" height="60" alt="Spothole">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                <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-bell"></i> Alerts</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 Spot</a></li>
                  % end
                    <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>

{{!base}}

    </main>

    <div 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" style="text-align: 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>

</body>
</html>
