<!-- Sentinel: non-empty when a filter is active; JS uses it to auto-open the modal after page reload -->
<div id="xymon-maint-filtered"
     data-active="&HOSTFILTER&PAGEFILTER&IPFILTER&CLASSFILTER"
     data-preselecthost="&PRESELECTHOST"
     data-preselecttest="&PRESELECTTEST"
     hidden></div>

<!-- Host filter — separate form so submitting it never triggers the disable action -->
<form method="POST" action="&SCRIPT_NAME" class="mb-3">
  <div class="row g-2 align-items-end">
    <div class="col">
      <input type="text" name="hostpattern"  value="&HOSTFILTER"  placeholder="Host pattern"  class="form-control form-control-sm">
    </div>
    <div class="col">
      <input type="text" name="pagepattern"  value="&PAGEFILTER"  placeholder="Page pattern"  class="form-control form-control-sm">
    </div>
    <div class="col">
      <input type="text" name="ippattern"    value="&IPFILTER"    placeholder="IP pattern"    class="form-control form-control-sm">
    </div>
    <div class="col">
      <input type="text" name="classpattern" value="&CLASSFILTER" placeholder="Class"         class="form-control form-control-sm">
    </div>
    <div class="col-auto">
      <button type="submit" name="go" value="Apply filters" class="btn btn-sm btn-secondary">Filter</button>
    </div>
  </div>
</form>

&DISABLELIST

&SCHEDULELIST

<!-- Disable form modal (triggered by the "Disable" button in the page header) -->
<div class="modal fade" id="disable-modal" tabindex="-1" aria-labelledby="disable-modal-label" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="disable-modal-label">
          <i class="fa-solid fa-bell-slash text-warning"></i> Disable Tests
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <form id="selectionform" method="POST" name="selectionform" action="&SCRIPT_NAME">

          <!-- Host + Test selection -->
          <div class="row xymon-field-row-tight">
            <div class="col-6">
              <label class="form-label">Hosts</label>
              <select multiple name="hostname" size="10" class="form-select" onchange="updateOptions();">
                &HOSTLIST
              </select>
            </div>
            <div class="col-6">
              <label class="form-label">Tests</label>
              <select multiple name="disabletest" size="10" class="form-select">
                <option value="">-- Select a host --</option>
              </select>
            </div>
          </div>

          <!-- Reason -->
          <div class="mb-3">
            <label class="form-label">Reason</label>
            <input name="cause" type="text" maxlength="80" class="form-control" placeholder="Required — why is this being disabled?">
          </div>

          <!-- Disable duration -->
          <fieldset class="border rounded p-3 mb-3">
            <legend class="float-none w-auto px-2 fs-6 fw-semibold">Duration</legend>

            <div class="mb-3">
              <div class="form-check">
                <input name="go2" type="radio" value="Disable for" checked class="form-check-input" id="go2-for">
                <label class="form-check-label" for="go2-for">Disable for</label>
              </div>
              <div class="d-flex gap-2 align-items-center ms-4 mt-1">
                <input name="duration" type="number" value="4" min="1" class="form-control maint-duration">
                <select name="scale" class="form-select w-auto">
                  <option value="1">minutes</option>
                  <option value="60" selected>hours</option>
                  <option value="1440">days</option>
                  <option value="10080">weeks</option>
                </select>
              </div>
            </div>

            <div>
              <div class="form-check">
                <input name="go2" type="radio" value="Disable until" class="form-check-input" id="go2-until">
                <label class="form-check-label" for="go2-until">Disable until date/time</label>
              </div>
              <div class="row g-2 ms-4 mt-1">
                <div class="col-auto">
                  <input type="date" name="end-date" class="form-control" onclick="checkRadio('go2-until')">
                </div>
                <div class="col-auto">
                  <input type="time" name="end-time" class="form-control" onclick="checkRadio('go2-until')">
                </div>
              </div>
              <div class="form-check ms-4 mt-2">
                <input name="untilok" type="checkbox" class="form-check-input" id="untilok" onclick="checkRadio('go2-until')">
                <label class="form-check-label" for="untilok">Until OK (re-enable when test recovers)</label>
              </div>
            </div>
          </fieldset>

          <!-- When to apply -->
          <fieldset class="border rounded p-3">
            <legend class="float-none w-auto px-2 fs-6 fw-semibold">When to apply</legend>

            <div class="mb-3">
              <div class="form-check">
                <input name="go" type="radio" value="Disable now" checked class="form-check-input" id="go-now">
                <label class="form-check-label" for="go-now">Disable now</label>
              </div>
            </div>

            <div>
              <div class="form-check">
                <input name="go" type="radio" value="Schedule disable" class="form-check-input" id="go-sched">
                <label class="form-check-label" for="go-sched">Schedule at</label>
              </div>
              <div class="row g-2 ms-4 mt-1">
                <div class="col-auto">
                  <input type="date" name="sched-date" class="form-control" onclick="checkRadio('go-sched')">
                </div>
                <div class="col-auto">
                  <input type="time" name="sched-time" class="form-control" onclick="checkRadio('go-sched')">
                </div>
              </div>
            </div>
          </fieldset>

        </form>
      </div><!-- /.modal-body -->

      <div class="modal-footer">
        <div class="form-check me-auto">
          <input type="checkbox" name="preview" class="form-check-input" id="preview" form="selectionform">
          <label class="form-check-label" for="preview">Preview</label>
        </div>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" onclick="validateDisable(document.getElementById('selectionform'))">Apply</button>
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /#disable-modal -->
