{{define "title"}}Edit {{.Repeater.Name}} · MeshTender{{end}}
{{define "header"}}
<div class="row g-2 align-items-center">
  <div class="col">
    <div class="page-pretitle">Edit repeater</div>
    <h1 class="page-title fs-1">{{.Repeater.Name}}</h1>
  </div>
</div>
{{end}}
{{define "content"}}
{{if .Error}}<div class="alert alert-danger">{{.Error}}</div>{{end}}
<div class="card">
  <div class="card-body">
    <p class="text-secondary">The public key identifies the repeater and can't be changed — delete and re-add to change it.</p>
    <code class="pk">{{.Repeater.PublicKeyHex}}</code>

    <form method="post" action="/repeaters/{{.Repeater.PublicID}}/edit" class="mt-3">
      <div class="mb-3">
        <label class="form-label" for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" value="{{.Repeater.Name}}" 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 $.SelectedPreset}} selected{{end}}>{{.Label}}</option>
          {{end}}
          <option value="custom"{{if eq "custom" $.SelectedPreset}} 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 .Repeater.RadioFreqHz}}" 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 .Repeater.RadioBwHz}}" 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="{{.Repeater.RadioSF}}" 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="{{.Repeater.RadioCR}}" 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"{{if .Repeater.ShowOnPublicOrg}} checked{{end}}>
        <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"{{if .Repeater.ExposePublicPage}} checked{{end}}>
        <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">Save changes</button>
        <a class="btn" href="/">Cancel</a>
      </div>
    </form>

    {{template "revokedoc" .RevokeCommand}}
  </div>
</div>
<script nonce="{{.Nonce}}">
  // The form fields display MHz/kHz; preset data-* attributes are Hz-canonical.
  var RADIO_FIELDS = ["radio_freq_mhz", "radio_bw_khz", "radio_sf", "radio_cr"];
  function trim(n) { return String(Math.round(n * 1e6) / 1e6); } // drop float fuzz

  // Seed the radio fields from the chosen preset. Fields stay editable — a
  // preset is a starting point, not a lock.
  function applyRegion() {
    var sel = document.getElementById("region");
    var opt = sel.options[sel.selectedIndex];
    if (!opt.dataset.freq) return; // "Custom" — leave the current values alone
    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;
  }

  // When a field is edited by hand, point the dropdown at whichever preset now
  // matches (or "Custom" if none do), so it always reflects the actual values.
  // Compare in Hz so display rounding can't cause a spurious mismatch.
  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}}