<div class="card xymon-form-card">
  <div class="card-header fw-semibold">Edit Critical Systems</div>
  <div class="card-body">
    <form method="GET" action="criticaleditor.sh">

      <!-- Host / service search -->
      <div class="row align-items-end xymon-field-row-tight">
        <div class="col-auto">
          <label class="form-label">Host</label>
          <input name="HOSTNAME" type="text" value="&XYMWEBHOST" class="form-control">
        </div>
        <div class="col-auto">
          <label class="form-label">Test</label>
          <input name="SERVICE" type="text" value="&XYMWEBSVC" class="form-control critedit-service">
        </div>
        <div class="col-auto">
          <button type="submit" name="Find" value="Search" class="btn btn-primary">Search</button>
          <button type="submit" name="Next" value="Next" class="btn btn-outline-secondary">Next</button>
        </div>
      </div>
      <div class="xymon-field text-muted small">Last update by: &CRITEDITUPDINFO</div>

      <hr>

      <!-- Priority -->
      <div class="xymon-field">
        <label class="form-label">Priority</label>
        <select name="PRIORITY" class="form-select w-auto">&CRITEDITPRIOLIST</select>
      </div>

      <!-- Monitoring time -->
      <div class="xymon-field">
        <label class="form-label">Monitoring time</label>
        <div class="d-flex flex-wrap align-items-center xymon-option-group">
          <select name="CRITWKDAYS" multiple size="3" class="form-select w-auto">&CRITEDITWKDAYS</select>
          <span class="text-muted">from</span>
          <select name="CRITSTARTHOUR" class="form-select w-auto">&CRITEDITSTART</select>
          <span class="text-muted">to</span>
          <select name="CRITENDHOUR" class="form-select w-auto">&CRITEDITEND</select>
        </div>
      </div>

      <!-- Start / stop monitoring dates -->
      <div class="row xymon-field-row">
        <div class="col-md-6">
          <label class="form-label">Start monitoring</label>
          <div class="critedit-date-picker">
            <div class="input-group">
              <input type="text" class="form-control critedit-date-display" placeholder="Not set — starts immediately" readonly>
              <button type="button" class="btn btn-outline-secondary critedit-date-btn" title="Pick date"><i class="fa-solid fa-calendar-days"></i></button>
              <button type="button" class="btn btn-outline-secondary critedit-date-clear" title="Clear"><i class="fa-solid fa-xmark"></i></button>
            </div>
            <input type="hidden" name="start-date" value="&CRITEDITSTART_DATE" class="critedit-date-hidden">
            <div class="critedit-cal-drop"></div>
          </div>
          <div class="form-text">Leave blank to start immediately</div>
        </div>
        <div class="col-md-6">
          <label class="form-label">Stop monitoring</label>
          <div class="critedit-date-picker">
            <div class="input-group">
              <input type="text" class="form-control critedit-date-display" placeholder="Not set — no end date" readonly>
              <button type="button" class="btn btn-outline-secondary critedit-date-btn" title="Pick date"><i class="fa-solid fa-calendar-days"></i></button>
              <button type="button" class="btn btn-outline-secondary critedit-date-clear" title="Clear"><i class="fa-solid fa-xmark"></i></button>
            </div>
            <input type="hidden" name="end-date" value="&CRITEDITEND_DATE" class="critedit-date-hidden">
            <div class="critedit-cal-drop"></div>
          </div>
          <div class="form-text">Leave blank to monitor indefinitely</div>
        </div>
      </div>

      <!-- Resolver group + instruction -->
      <div class="row xymon-field-row">
        <div class="col-md-4">
          <label class="form-label">Resolver group</label>
          <input name="GROUP" type="text" value="&CRITEDITGROUP" class="form-control">
        </div>
        <div class="col-md-8">
          <label class="form-label">Instruction</label>
          <input name="EXTRA" type="text" value="&CRITEDITEXTRA" class="form-control">
        </div>
      </div>

      <hr>

      <!-- Update / Drop -->
      <div class="d-flex flex-wrap align-items-center xymon-action-row">
        <button type="submit" name="Update" value="Update record" class="btn btn-primary">Update record</button>
        <div class="d-flex align-items-center xymon-item-group">
          <button type="submit" name="Drop" value="Drop record" class="btn btn-danger">Drop record</button>
          <div class="form-check xymon-inline-check">
            <input type="checkbox" name="DROPEVENIFCLONED" class="form-check-input" id="dropevenifcloned">
            <label class="form-check-label" for="dropevenifcloned">Even if it has clones</label>
          </div>
        </div>
      </div>

      <hr>

      <!-- Clone management -->
      <div class="row xymon-field-row">
        <div class="col-md-6">
          <label class="form-label">Clones of this host</label>
          <select name="CRITEDITCLONELIST" multiple size="5" class="form-select">&CRITEDITCLONELIST</select>
        </div>
        <div class="col-md-6">
          <label class="form-label">Clone this host to</label>
          <input name="CRITEDITADDCLONES" type="text" class="form-control xymon-field-compact">
          <button type="submit" name="Clone" value="Add/remove clones" class="btn btn-outline-secondary">Add/remove clones</button>
        </div>
      </div>

    </form>
  </div>
</div>
