{% 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 text-white bg-primary">
            <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" id="dx-call" placeholder="N0CALL" style="max-width: 8em;">
                </div>
                <div class="col-auto">
                    <label for="freq" class="form-label">Frequency (kHz) *</label>
                    <input type="text" class="form-control" id="freq" placeholder="e.g. 14100" style="max-width: 8em;">
                </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" id="sig-ref" placeholder="e.g. GB-0001" style="max-width: 8em;">
                </div>
                <div class="col-auto">
                    <label for="dx-grid" class="form-label">DX Grid</label>
                    <input type="text" class="form-control" id="dx-grid" placeholder="e.g. AA00aa" style="max-width: 8em;">
                </div>
                <div class="col-auto">
                    <label for="comment" class="form-label">Comment</label>
                    <input type="text" class="form-control" id="comment" placeholder="e.g. 59 TNX QSO 73" style="max-width: 12em;">
                </div>
                <div class="col-auto">
                    <label for="de-call" class="form-label">Your Call *</label>
                    <input type="text" class="form-control storeable-text" id="de-call" placeholder="N0CALL" style="max-width: 8em;">
                </div>
                <div class="col-auto">
                    <button type="button" class="btn btn-primary" style="margin-top: 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/common.js?v=6"></script>
<script src="/js/add-spot.js?v=6"></script>
<script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>

{% end %}