{% 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/>
        {% if web_ui_options["allow_upstream_spotting"] %}
        Spots added here are visible within Spothole. You can also choose to send your spot "upstream" to the DX
        cluster or other sites, in which case it is posted using the callsign you enter in "Your Call". Sending spots
        upstream to other spotting sites is currently a work in progress, so not all sites are supported yet.
        {% else %}
        Spots added here are only visible within Spothole. This server does not allow spots to be sent "upstream" to DX
        clusters or other spotting sites such as POTA and SOTA.
        {% end %}
        <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" onsubmit="return addSpot();">
                <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" required>
                </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" required>
                </div>
                <div class="col-auto">
                    <label for="mode" class="form-label">Mode</label>
                    <select id="mode" class="form-select">
                        <option value="" selected></option>
                        {% for m in options["modes"] %}
                        <option value="{{ m }}">{{ m }}</option>
                        {% end %}
                    </select>
                </div>
                <div class="col-auto">
                    <label for="activity" class="form-label">Activity</label>
                    <select id="activity" class="form-select">
                        <option value="" selected></option>
                        {% for a in options["activities"] %}
                        <option value="{{ a.name }}">{{ a.name }}</option>
                        {% end %}
                    </select>
                </div>
                <div class="col-auto">
                    <label for="activity-ref" class="form-label">Activity Reference</label>
                    <input type="text" class="form-control input-narrow" id="activity-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" required>
                </div>

                <div id="upstream-area" class="mt-3" style="display:none;">
                    <div class="form-label">Spot to:</div>
                    <div class="form-check mb-1">
                        <input class="form-check-input" type="checkbox" id="spothole-only" checked>
                        <label class="form-check-label" for="spothole-only">Spothole only</label>
                    </div>
                    <div id="upstream-providers"></div>
                </div>

                <div id="recaptcha-area" class="mt-3" style="display:none;">
                    <div id="recaptcha-widget"></div>
                </div>

                <div class="col-auto">
                    <button type="submit" id="add-spot-submit" class="btn btn-primary">
                        <span id="add-spot-spinner" class="spinner-border spinner-border-sm me-1" aria-hidden="true"
                              style="display:none;"></span>
                        <span id="add-spot-submit-text" role="status">Spot</span>
                    </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>

<div class="modal fade" id="credentials-modal" tabindex="-1" aria-labelledby="credentials-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="credentials-modal-label">Credentials for
                    <span id="credentials-provider-name"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="small text-muted">Credentials are stored only in your browser and are never saved on the
                    server.</p>
                <div id="credentials-fields"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveCredentials();">Save</button>
            </div>
        </div>
    </div>
</div>

<script>
    const SPOT_SUBMIT_PROVIDERS = {% raw safe_json_dumps(options["spot_submit_providers"]) %};
    const RECAPTCHA_SITE_KEY = {% raw safe_json_dumps(web_ui_options["recaptcha_site_key"]) %};
    const ALLOW_UPSTREAM_SPOTTING = {% raw safe_json_dumps(web_ui_options["allow_upstream_spotting"]) %};
</script>

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

{% end %}