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

<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="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>

<!-- Credentials modal -->
<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>window._recaptchaSiteKey = {% raw json_encode(web_ui_options.get('recaptcha-site-key', '')) %};
window._allowUpstreamSpotting = {% raw json_encode(web_ui_options.get('allow-upstream-spotting', True)) %};</script>
<script src="/js/common.js?v=1781335058"></script>
<script src="/js/add-spot.js?v=1781335058"></script>
<script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>

{% end %}