{% set error = errors[field.field_name] %}
<div class="form-group control-full{% if error %} error{% endif %}">

  <label class="control-label" for="facility-picker-select">Test Facility</label>
  <div class="controls" style="margin-bottom: 12px">
    <select id="facility-picker-select" class="form-control">
      <option value="">Loading facilities…</option>
    </select>
    {% if error %}
      <span class="error-block">{{ error[0] }}</span>
    {% endif %}
    <p id="facility-picker-msg" style="display: none; margin-top: 4px;"></p>
  </div>

  <label class="control-label" for="equipment-picker-select">Equipment <span class="label-optional">(optional)</span></label>
  <div class="controls">
    <select id="equipment-picker-select" class="form-control" disabled>
      <option value="">— select a facility first —</option>
    </select>
    {% if field.help_text %}
      <p class="help-block">{{ field.help_text }}</p>
    {% endif %}
  </div>

  {# Hidden inputs written by the picker. facility_name and equipment_name have
     form_snippet: null in the schema so their only submission path is here. #}
  <input type="hidden" name="facility_ref"   id="field-facility-ref"   value="{{ data['facility_ref']   or '' }}" />
  <input type="hidden" name="facility_name"  id="field-facility-name"  value="{{ data['facility_name']  or '' }}" />
  <input type="hidden" name="equipment_name" id="field-equipment-name" value="{{ data['equipment_name'] or '' }}" />
</div>

<script>
(function () {
  var currentRef  = document.getElementById('field-facility-ref').value;
  var currentEq   = document.getElementById('field-equipment-name').value;
  var facilityEl  = document.getElementById('facility-picker-select');
  var equipmentEl = document.getElementById('equipment-picker-select');
  var msgEl       = document.getElementById('facility-picker-msg');

  function showMsg(text, cls) {
    msgEl.textContent = text;
    msgEl.className = cls || '';
    msgEl.style.display = text ? 'block' : 'none';
  }

  function resetEquipment(placeholder) {
    equipmentEl.innerHTML = '<option value="">' + (placeholder || '— select a facility first —') + '</option>';
    equipmentEl.disabled = true;
    document.getElementById('field-equipment-name').value = '';
  }

  function loadEquipment(djangoId) {
    resetEquipment('Loading equipment…');

    if (!djangoId) {
      resetEquipment();
      return;
    }

    fetch('/api/action/marinerg_equipment_list?facility_id=' + encodeURIComponent(djangoId))
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (!data.success || !data.result.length) {
          resetEquipment('— no equipment registered for this facility —');
          return;
        }

        equipmentEl.innerHTML = '<option value="">— select equipment —</option>';
        data.result.forEach(function (eq) {
          var opt = document.createElement('option');
          opt.value = eq.name;
          opt.textContent = eq.name;
          if (eq.description) opt.title = eq.description;
          if (currentEq && eq.name === currentEq) opt.selected = true;
          equipmentEl.appendChild(opt);
        });
        equipmentEl.disabled = false;

        if (equipmentEl.value) {
          document.getElementById('field-equipment-name').value = equipmentEl.value;
        }
      })
      .catch(function () { resetEquipment('— could not load equipment —'); });
  }

  function onFacilityChange() {
    var selected = facilityEl.options[facilityEl.selectedIndex];
    if (!selected || !selected.value) {
      document.getElementById('field-facility-ref').value  = '';
      document.getElementById('field-facility-name').value = '';
      resetEquipment();
      return;
    }
    document.getElementById('field-facility-ref').value  = selected.value;
    document.getElementById('field-facility-name').value = selected.dataset.name || '';
    loadEquipment(selected.dataset.djangoId || '');
  }

  facilityEl.addEventListener('change', onFacilityChange);

  equipmentEl.addEventListener('change', function () {
    document.getElementById('field-equipment-name').value = equipmentEl.value;
  });

  fetch('/api/action/marinerg_facility_list')
    .then(function (r) { return r.json(); })
    .then(function (data) {
      facilityEl.innerHTML = '<option value="">— select a facility —</option>';

      if (!data.success || !data.result.length) {
        showMsg('No facilities available — is the facility API configured?', 'text-warning');
        return;
      }

      data.result.forEach(function (f) {
        var opt = document.createElement('option');
        opt.value = f.facility_ref || '';
        opt.textContent = f.name;
        opt.dataset.name = f.name;
        opt.dataset.djangoId = f.django_id != null ? f.django_id : '';
        if (currentRef && f.facility_ref === currentRef) opt.selected = true;
        facilityEl.appendChild(opt);
      });

      if (facilityEl.value) {
        var sel = facilityEl.options[facilityEl.selectedIndex];
        loadEquipment(sel ? sel.dataset.djangoId : '');
      }
    })
    .catch(function (err) {
      facilityEl.innerHTML = '<option value="">— facility list unavailable —</option>';
      showMsg('Could not load facilities: ' + err.message, 'text-danger');
    });
}());
</script>