{% 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">
        <!-- TODO Remove when feature available -->
        <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" 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 class="col-auto">
                    <button type="submit" class="btn btn-primary mt-2em">Spot</button>
                </div>
            </form>

            <div id="upstream-area" class="mt-3" style="display:none;">
                <div class="row g-2 align-items-center">
                    <div class="col-auto">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="submit-upstream">
                            <label class="form-check-label" for="submit-upstream">
                                Send spot to <span id="upstream-provider-label"></span>
                            </label>
                        </div>
                    </div>
                    <div class="col-auto" id="upstream-provider-select-col" style="display:none;">
                        <select id="upstream-provider-select" class="form-select form-select-sm"></select>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="upstream-credentials-btn"
                                onclick="showCredentialsModal();" style="display:none;">
                            <i class="fa-solid fa-key"></i> Credentials
                        </button>
                    </div>
                </div>
            </div>

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

            <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=1790443101"></script>
<script>$(document).ready(function () {
    $("#nav-link-add-spot").addClass("active");
}); <!-- highlight active page in nav --></script>

{% end %}