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

<div id="add-spot-intro-box" class="permanently-dismissible-box mt-3">
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
        <i class="fa-solid fa-circle-info"></i> <strong>Adding spots to Spothole</strong><br/>This page is implemented
        as a proof of concept for adding spots to the Spothole system. Currently, spots added in this way are only
        visible within Spothole and are not sent "upstream" to DX clusters or xOTA spotting sites. The functionality
        might be extended to include this in future if there is demand for it. If you'd like this to be added, please
        give a thumbs-up on <a href="https://git.ianrenton.com/ian/spothole/issues/39" target="_new" class="alert-link">issue
        #39</a> or get in touch via email.
        <button type="button" id="add-spot-intro-box-dismiss" class="btn-close" data-bs-dismiss="alert"
                aria-label="Close"></button>
    </div>
</div>

<div class="mt-3">
    <div id="add-spot-area" class="card mb-3">
        <div class="card-header">
            <div class="row">
                <div class="col-auto me-auto">
                    Add a Spot
                </div>
            </div>
        </div>
        <div class="card-body">
            <form class="row g-3">
                <div class="col-auto">
                    <label for="dx-call" class="form-label">DX Call *</label>
                    <input type="text" class="form-control input-narrow" id="dx-call" placeholder="N0CALL">
                </div>
                <div class="col-auto">
                    <label for="freq" class="form-label">Frequency (kHz) *</label>
                    <input type="text" class="form-control input-narrow" id="freq" placeholder="e.g. 14100">
                </div>
                <div class="col-auto">
                    <label for="mode" class="form-label">Mode</label>
                    <select id="mode" class="form-select">
                        <option value="" selected></option>
                    </select>
                </div>
                <div class="col-auto">
                    <label for="sig" class="form-label">SIG</label>
                    <select id="sig" class="form-select">
                        <option value="" selected></option>
                    </select>
                </div>
                <div class="col-auto">
                    <label for="sig-ref" class="form-label">SIG Reference</label>
                    <input type="text" class="form-control input-narrow" id="sig-ref" placeholder="e.g. GB-0001">
                </div>
                <div class="col-auto">
                    <label for="dx-grid" class="form-label">DX Grid</label>
                    <input type="text" class="form-control input-narrow" id="dx-grid" placeholder="e.g. AA00aa">
                </div>
                <div class="col-auto">
                    <label for="comment" class="form-label">Comment</label>
                    <input type="text" class="form-control input-medium" id="comment" placeholder="e.g. 59 TNX QSO 73">
                </div>
                <div class="col-auto">
                    <label for="de-call" class="form-label">Your Call *</label>
                    <input type="text" class="form-control storeable-text input-narrow" id="de-call"
                           placeholder="N0CALL">
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-primary mt-2em" onclick="addSpot();">Spot</button>
                </div>
            </form>

            <div id="result-good"></div>
            <div id="result-bad"></div>

            <p class="small mt-4 mb-1">* Required field</p>
        </div>
    </div>

</div>

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

{% end %}