{{define "title"}}Add a repeater · MeshTender{{end}}
{{define "header"}}
<div class="row g-2 align-items-center">
  <div class="col"><h1 class="page-title fs-1">Add a repeater</h1></div>
</div>
{{end}}
{{define "content"}}
<div class="row justify-content-center">
<div class="col-12 col-lg-9 col-xl-8">
{{if .Error}}<div class="alert alert-danger">{{.Error}}</div>{{end}}

<ul class="steps steps-counter mb-4">
  <li class="step-item {{if eq .Step "method"}}active{{end}}">Connection</li>
  <li class="step-item {{if eq .Step "consent"}}active{{end}}">Consent</li>
  {{if eq .Method "serial"}}
  <li class="step-item {{if eq .Step "serial"}}active{{end}}">Configure &amp; run</li>
  <li class="step-item">Finish</li>
  {{else}}
  <li class="step-item {{if eq .Step "details"}}active{{end}}">Repeater details</li>
  <li class="step-item">Confirm</li>
  {{end}}
</ul>

{{if eq .Step "method"}}
{{/* ---- Step 1: choose connection method ---- */}}
<div class="row row-cards">
  <div class="col-md-6">
    <div class="card card-link h-100">
      <div class="card-body d-flex flex-column">
        <h2 class="card-title">{{template "icon-antenna" "me-1"}}Add a repeater that's already on the network</h2>
        <p class="text-secondary">Register a repeater that's already configured and on the mesh, then control it
          remotely through a <strong>KISS modem</strong> over the air. You'll grant MeshTender admin yourself first.
          This is the usual choice.</p>
        <a class="btn btn-primary mt-auto align-self-start" href="/repeaters/add?step=consent&method=kiss">Add existing →</a>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card card-link h-100">
      <div class="card-body d-flex flex-column">
        <h2 class="card-title">{{template "icon-plug" "me-1"}}Set up a brand-new repeater</h2>
        <p class="text-secondary">Connect a freshly-flashed repeater over <strong>USB serial</strong> and let
          MeshTender generate and run the whole setup — identity, radio, region, name, and the admin grant —
          straight down the wire. Best for a repeater that isn't on the network yet.</p>
        <a class="btn mt-auto align-self-start" href="/repeaters/add?step=consent&method=serial">Set up over USB →</a>
      </div>
    </div>
  </div>
</div>
<div class="btn-list mt-3"><a class="btn" href="/">Cancel</a></div>

{{else if eq .Step "consent"}}
{{/* ---- Step 2: consent (wording adapts to the chosen method) ---- */}}
<div class="card">
  <div class="card-body">
    <h2 class="card-title">Step 2 · Grant MeshTender access</h2>
    <p class="text-secondary">
      MeshTender controls repeaters through a single MeshTender identity. Before it can do anything with
      your repeater, that identity must be granted admin access (permission level 3) on the device.
      <a href="{{.RootURL}}/docs#setperm">How does this work? →</a>
    </p>

    <div class="alert alert-danger" role="alert">
      <div>{{template "icon-alert" "alert-icon"}}</div>
      <div>
        <h3 class="alert-title">This grants full admin control to MeshTender</h3>
        <ul class="mb-0 text-secondary">
          <li>This grants admin to <strong>MeshTender itself</strong> — <strong>not</strong> to other
            MeshTender users. Letting specific people operate the repeater is a separate step you control later
            via sharing and contributing to organizations.</li>
          <li>MeshTender will not abuse this access — but that is a <strong>promise, not a technical limit</strong>.</li>
          <li>This is a standing grant. It remains until <strong>you</strong> revoke it on the repeater
            (see below) — removing the repeater from this site does not revoke MeshTender's access.</li>
        </ul>
      </div>
    </div>

    {{if ne .Method "serial"}}
    {{/* Add-existing only: USB setup sets the location explicitly, so there's no
    fetch to disclose there. */}}
    <div class="alert alert-info" role="alert">
      <div>{{template "icon-map-pin" "alert-icon"}}</div>
      <div>
        <h3 class="alert-title">MeshTender will read the repeater's location</h3>
        <p class="text-secondary mb-0">
          MeshTender reads this repeater's coordinates by running <code>get lat</code> / <code>get lon</code> through a
          connected modem, when someone permitted to run those commands asks for them with “Fetch location” in the
          console. Both sends are recorded in this repeater's command log, naming who asked — they're ordinary
          commands, not something the site does invisibly. The coordinates place the repeater on the map and tailor
          its <code>region</code> configuration. You stay in control: you decide who may run those commands, and you
          can keep the repeater off the public map.
        </p>
      </div>
    </div>
    {{end}}

    <div class="mb-3">
      <div class="form-label">MeshTender server public key</div>
      <code class="pubkey">{{.ServerPubKey}}</code>
    </div>

    {{if eq .Method "serial"}}
    <div class="alert alert-info" role="alert">
      <div>MeshTender will run this command <strong>for you</strong> as part of the USB setup — you don't need to run
      anything by hand. The command that will be sent to your repeater:</div>
    </div>
    <div class="mb-3">
      <code class="form-control font-monospace">{{.SetPermCommand}}</code>
    </div>
    {{template "revokedoc" .RevokeCommand}}
    <label class="form-check mt-3">
      <input class="form-check-input" type="checkbox" id="ack" data-consent-target="#continue">
      <span class="form-check-label">I consent to MeshTender being granted admin on this repeater during setup.</span>
    </label>
    <div class="btn-list mt-3">
      <a class="btn btn-primary disabled" id="continue" href="/repeaters/add?step=serial&method=serial" aria-disabled="true" tabindex="-1"
         data-gated>Continue →</a>
      <a class="btn" href="/repeaters/add?step=method">← Back</a>
    </div>
    {{else}}
    <div class="mb-3">
      <div class="form-label">Grant-access command — run this on your repeater</div>
      <div class="input-group">
        <code class="form-control font-monospace">{{.SetPermCommand}}</code>
        <button type="button" class="btn" data-copy-prev>{{template "icon-copy" ""}}Copy</button>
      </div>
      <small class="form-hint">Run it through the repeater console in the MeshCore companion app, or directly over USB serial.</small>
    </div>
    {{template "revokedoc" .RevokeCommand}}
    <label class="form-check mt-3">
      <input class="form-check-input" type="checkbox" id="ack" data-consent-target="#continue">
      <span class="form-check-label">I've granted MeshTender admin on this repeater (or I understand I must, before it will work here).</span>
    </label>
    <div class="btn-list mt-3">
      <a class="btn btn-primary disabled" id="continue" href="/repeaters/add?step=details&method=kiss" aria-disabled="true" tabindex="-1"
         data-gated>Continue →</a>
      <a class="btn" href="/repeaters/add?step=method">← Back</a>
    </div>
    {{end}}
  </div>
</div>

{{else if eq .Step "serial"}}
{{/* ---- Step 3 (serial): configure a brand-new repeater and run over USB ---- */}}
<div id="unsupported" class="alert alert-danger" role="alert" hidden>
  <div>
    This browser can't connect to USB devices. Use Chrome or Edge, or Firefox 151 or later,
    on desktop — or Chrome on Android — over HTTPS or on localhost.
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h2 class="card-title">Step 3 · Configure your repeater</h2>
    <p class="text-secondary">Fill in the details below. MeshTender will generate the exact command list, show it to
      you, and then run it over USB.</p>

    <div class="mb-3">
      <label class="form-label" for="name">Name</label>
      <input type="text" class="form-control" id="name" placeholder="Hilltop repeater" autofocus>
    </div>

    {{/* Identity / key */}}
    <div class="mb-2"><label class="form-label">Identity (private key)</label></div>
    <div class="mb-2">
      <label class="form-check"><input class="form-check-input" type="radio" name="keymode" value="random" checked>
        <span class="form-check-label">Generate a new random key</span></label>
      <label class="form-check"><input class="form-check-input" type="radio" name="keymode" value="prefix">
        <span class="form-check-label">Generate a key whose public key starts with a prefix (vanity)</span></label>
      <label class="form-check"><input class="form-check-input" type="radio" name="keymode" value="paste">
        <span class="form-check-label">Use an existing private key</span></label>
    </div>

    <div id="key-random" class="mb-2">
      <button type="button" class="btn" id="regen">Regenerate</button>
    </div>
    <div id="key-prefix" class="mb-2" hidden>
      <div class="input-group">
        <input type="text" class="form-control font-monospace" id="prefix" placeholder="e.g. beef" pattern="[0-9a-fA-F]*"
               aria-label="Desired public key prefix (hex)">
        <button type="button" class="btn" id="grind">Generate</button>
        <button type="button" class="btn btn-link" id="grind-stop" hidden>Stop</button>
      </div>
      <small class="form-hint">Hex only (0-9, a-f). Each extra character takes ~16× longer to find — long prefixes may take a very long time.</small>
    </div>
    <div id="key-paste" class="mb-2" hidden>
      <textarea class="form-control font-monospace" id="privkey" rows="2" placeholder="128 hex chars (64-byte key) or 64 hex chars (32-byte seed)"
                aria-label="Existing private key or seed (hex)"></textarea>
    </div>

    <div class="mb-3">
      <div class="form-label">Resulting public key</div>
      <code class="pubkey" id="pubkey">—</code>
      <div id="grind-status" class="form-hint"></div>
    </div>

    {{/* Configuration source */}}
    <div class="mb-3">
      <label class="form-label" for="org">Organization configuration</label>
      <select class="form-select" id="org">
        <option value="0">None — use a radio preset</option>
      </select>
      <small class="form-hint">An organization configuration supplies the radio settings, base settings, and location-based region.</small>
    </div>

    <div class="mb-3" id="profile-wrap" hidden>
      <label class="form-label" for="profile">Configuration profile</label>
      <select class="form-select" id="profile"></select>
    </div>

    <div id="preset-wrap">
      <div class="mb-3">
        <label class="form-label" for="region">Radio preset</label>
        <select class="form-select" id="region">
          {{range .Presets}}
          <option value="{{.ID}}" data-freq="{{.FreqHz}}" data-bw="{{.BwHz}}" data-sf="{{.SF}}" data-cr="{{.CR}}"{{if eq .ID $.DefaultPresetID}} selected{{end}}>{{.Label}}</option>
          {{end}}
          <option value="custom"{{if eq "custom" $.DefaultPresetID}} selected{{end}}>Custom…</option>
        </select>
      </div>
      <div class="row g-2">
        <div class="col-6 col-md-3"><label class="form-label" for="radio_freq_mhz">Freq (MHz)</label><input type="number" step="0.001" class="form-control" id="radio_freq_mhz" value="{{mhz .Defaults.FreqHz}}"></div>
        <div class="col-6 col-md-3"><label class="form-label" for="radio_bw_khz">Bandwidth (kHz)</label><input type="number" step="0.1" class="form-control" id="radio_bw_khz" value="{{khz .Defaults.BwHz}}"></div>
        <div class="col-6 col-md-3"><label class="form-label" for="radio_sf">SF</label><input type="number" class="form-control" id="radio_sf" value="{{.Defaults.SF}}" min="5" max="12"></div>
        <div class="col-6 col-md-3"><label class="form-label" for="radio_cr">CR</label><input type="number" class="form-control" id="radio_cr" value="{{.Defaults.CR}}" min="5" max="8"></div>
      </div>
    </div>

    {{/* Location */}}
    <div class="mt-3">
      <label class="form-label">Location</label>
      <p class="form-hint mt-0">Click the map to place this repeater. Used for its coordinates and (with an organization
        configuration) to pick the right region.</p>
      <div id="map" style="height:320px" class="rounded border"></div>
      <div class="form-hint" id="loc-status">No location selected.</div>
    </div>

    <label class="form-check mt-3">
      <input class="form-check-input" type="checkbox" id="show_on_public_org">
      <span class="form-check-label">Show this repeater on your organizations' <strong>public map</strong>.</span>
    </label>
    <label class="form-check mt-2">
      <input class="form-check-input" type="checkbox" id="expose_public_page">
      <span class="form-check-label">Publish a <strong>public page</strong> for this repeater with its docs, stewards, and location.</span>
    </label>

    <div class="btn-list mt-3">
      <button type="button" class="btn btn-primary" id="generate">Generate command list →</button>
      <a class="btn" href="/repeaters/add?step=consent&method=serial">← Back</a>
    </div>
  </div>
</div>

{{/* Review + run */}}
<div class="card mt-3" id="review-card" hidden>
  <div class="card-header"><h2 class="card-title">Step 4 · Review &amp; run</h2></div>
  <div class="card-body">
    <p class="text-secondary">These commands will be sent to your repeater over USB, in order. The private key is
      shown masked; it never leaves your browser.</p>
    <pre class="mb-3"><code id="cmdlist"></code></pre>
    <button id="run" class="btn btn-primary" type="button">{{template "icon-plug" "me-1"}}Connect over USB &amp; run</button>
    <ul id="log" class="evlog console mt-3" role="log" aria-live="polite" aria-label="Setup activity"></ul>
  </div>
</div>

<script nonce="{{.Nonce}}">
  window.SETUP_ORGS = {{.OrgsJS}};

  // Radio preset → fields (shared with the KISS details step's behavior).
  function trim(n) { return String(Math.round(n * 1e6) / 1e6); }
  function applyRegion() {
    var sel = document.getElementById("region");
    var opt = sel.options[sel.selectedIndex];
    if (!opt.dataset.freq) return;
    document.getElementById("radio_freq_mhz").value = trim(opt.dataset.freq / 1e6);
    document.getElementById("radio_bw_khz").value = trim(opt.dataset.bw / 1e3);
    document.getElementById("radio_sf").value = opt.dataset.sf;
    document.getElementById("radio_cr").value = opt.dataset.cr;
  }
  document.getElementById("region").addEventListener("change", applyRegion);
</script>
{{template "map-styles"}}
{{template "map-scripts"}}
<script src="{{ asset "/static/regionmap.js" }}"></script>
<script src="{{ asset "/static/serial-port.js" }}"></script>
<script src="{{ asset "/static/serial-setup.js" }}"></script>

{{else}}
{{/* ---- Step 3 (KISS): details for a repeater that's already on the network ---- */}}
<div class="card">
  <div class="card-body">
    <h2 class="card-title">Step 3 · Repeater details</h2>
    <p class="text-secondary">Tell MeshTender which repeater you just granted access to, and how its radio is configured.</p>
    <form method="post" action="/repeaters">
      <div class="mb-3">
        <label class="form-label" for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="Hilltop repeater" required autofocus>
      </div>
      <div class="mb-3">
        <label class="form-label" for="public_key">Repeater public key (64 hex chars)</label>
        <input type="text" class="form-control font-monospace" id="public_key" name="public_key" pattern="[0-9a-fA-F]{64}" placeholder="a1b2…" required>
      </div>
      <div class="mb-3">
        <label class="form-label" for="region">Region preset</label>
        <select class="form-select" id="region">
          {{range .Presets}}
          <option value="{{.ID}}" data-freq="{{.FreqHz}}" data-bw="{{.BwHz}}" data-sf="{{.SF}}" data-cr="{{.CR}}"{{if eq .ID $.DefaultPresetID}} selected{{end}}>{{.Label}}</option>
          {{end}}
          <option value="custom"{{if eq "custom" $.DefaultPresetID}} selected{{end}}>Custom…</option>
        </select>
      </div>
      <div class="row g-2">
        <div class="col-6 col-md-3"><label class="form-label" for="radio_freq_mhz">Freq (MHz)</label><input type="number" step="0.001" class="form-control" id="radio_freq_mhz" name="radio_freq_mhz" value="{{mhz .Defaults.FreqHz}}" required></div>
        <div class="col-6 col-md-3"><label class="form-label" for="radio_bw_khz">Bandwidth (kHz)</label><input type="number" step="0.1" class="form-control" id="radio_bw_khz" name="radio_bw_khz" value="{{khz .Defaults.BwHz}}" required></div>
        <div class="col-6 col-md-3"><label class="form-label" for="radio_sf">SF</label><input type="number" class="form-control" id="radio_sf" name="radio_sf" value="{{.Defaults.SF}}" min="5" max="12" required></div>
        <div class="col-6 col-md-3"><label class="form-label" for="radio_cr">CR</label><input type="number" class="form-control" id="radio_cr" name="radio_cr" value="{{.Defaults.CR}}" min="5" max="8" required></div>
      </div>

      <label class="form-check mt-3">
        <input class="form-check-input" type="checkbox" name="show_on_public_org" value="1">
        <span class="form-check-label">Show this repeater on your organizations' <strong>public map</strong>.</span>
      </label>
      <label class="form-check mt-2">
        <input class="form-check-input" type="checkbox" name="expose_public_page" value="1">
        <span class="form-check-label">Publish a <strong>public page</strong> for this repeater with its docs, stewards, and location.</span>
      </label>

      <div class="btn-list mt-3">
        <button type="submit" class="btn btn-primary">Add repeater</button>
        <a class="btn" href="/repeaters/add?step=consent&method=kiss">← Back</a>
      </div>
    </form>
  </div>
</div>
<script nonce="{{.Nonce}}">
  var RADIO_FIELDS = ["radio_freq_mhz", "radio_bw_khz", "radio_sf", "radio_cr"];
  function trim(n) { return String(Math.round(n * 1e6) / 1e6); }
  function applyRegion() {
    var sel = document.getElementById("region");
    var opt = sel.options[sel.selectedIndex];
    if (!opt.dataset.freq) return;
    document.getElementById("radio_freq_mhz").value = trim(opt.dataset.freq / 1e6);
    document.getElementById("radio_bw_khz").value = trim(opt.dataset.bw / 1e3);
    document.getElementById("radio_sf").value = opt.dataset.sf;
    document.getElementById("radio_cr").value = opt.dataset.cr;
  }
  function syncPreset() {
    var sel = document.getElementById("region");
    var freqHz = Math.round(parseFloat(document.getElementById("radio_freq_mhz").value) * 1e6);
    var bwHz = Math.round(parseFloat(document.getElementById("radio_bw_khz").value) * 1e3);
    var sf = document.getElementById("radio_sf").value;
    var cr = document.getElementById("radio_cr").value;
    for (var i = 0; i < sel.options.length; i++) {
      var o = sel.options[i];
      if (o.dataset.freq && +o.dataset.freq === freqHz && +o.dataset.bw === bwHz &&
          o.dataset.sf === sf && o.dataset.cr === cr) {
        sel.value = o.value;
        return;
      }
    }
    sel.value = "custom";
  }
  RADIO_FIELDS.forEach(function (id) {
    document.getElementById(id).addEventListener("input", syncPreset);
  });
  document.getElementById("region").addEventListener("change", applyRegion);
</script>
{{end}}
</div>
</div>
{{end}}