{# GENERATED by FlaskForge Core 0.36.0 from resolved page pg_drv_episode_form — do not edit.
   Each .row below corresponds 1:1 to a layout row in the resolved IR.
   Injection point: custom/episode_form_extra.html (before buttons). #}
{% extends "base.html" %}
{% block title %}{{ "Edit Episode" if obj else "New Episode" }}{% endblock %}

{% block content %}
<h1 class="h3 mb-4">{{ "Edit Episode" if obj else "New Episode" }}</h1>

<form method="post" enctype="multipart/form-data" novalidate>
  {{ form.hidden_tag() }}
  {% for e in form.form_errors %}<div class="alert alert-danger">{{ e }}</div>{% endfor %}

  <div class="row mb-3">
    <div class="col-md-6">
      <label class="form-label" for="{{ form.start_date.id }}">{{ form.start_date.label.text }}</label>
      {{ form.start_date(class="form-control" + (" is-invalid" if form.start_date.errors else "")) }}
      {% for e in form.start_date.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
    </div>
  </div>

  <div class="row mb-3">
    <div class="col-md-6">
      <label class="form-label" for="{{ form.status.id }}">{{ form.status.label.text }}</label>
      {{ form.status(class="form-control" + (" is-invalid" if form.status.errors else "")) }}
      {% for e in form.status.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
    </div>
  </div>

  <div class="row mb-3">
    <div class="col-md-6">
      <label class="form-label" for="{{ form.patient_id.id }}">{{ form.patient_id.label.text }}</label>
      <input type="search" class="form-control form-control-sm mb-1 ff-rel-search" data-target="{{ form.patient_id.id }}" data-url="{{ url_for('episodes.episode_form_patient_choices') }}" placeholder="Search related records…" autocomplete="off">
      {{ form.patient_id(class="form-select ff-rel-select") }}
    </div>
  </div>

  {% include "custom/episode_form_extra.html" ignore missing %}

  <div class="mt-4">
    <a class="btn btn-outline-secondary" href="{{ url_for('episodes.episodes_list') }}">Cancel</a>
    <button type="submit" class="btn btn-primary">Save</button>
  </div>
</form>
<script>
(() => {
  document.querySelectorAll('.ff-rel-search').forEach(input => {
    const select = document.getElementById(input.dataset.target);
    if (!select) return;
    let timer = null;
    input.addEventListener('input', () => {
      clearTimeout(timer);
      timer = setTimeout(async () => {
        const q = input.value.trim();
        if (q.length === 1) return;
        try {
          const r = await fetch(input.dataset.url + '?q=' + encodeURIComponent(q), {headers:{'Accept':'application/json'}});
          if (!r.ok) return;
          const rows = await r.json();
          const selected = new Map(Array.from(select.selectedOptions).map(o => [String(o.value), o.textContent]));
          const blank = Array.from(select.options).find(o => String(o.value) === '0');
          select.innerHTML = '';
          if (blank) select.add(new Option(blank.textContent, '0', false, false));
          for (const [id, text] of selected) if (id !== '0') select.add(new Option(text, id, true, true));
          for (const row of rows) if (!selected.has(String(row.id))) select.add(new Option(row.text, row.id));
        } catch (_) { /* keep existing choices when search is unavailable */ }
      }, 220);
    });
  });
})();
</script>
{% endblock %}