{% load crispy_forms_tags %}
<script>
function _close_rota_options_modal(){
  try{ var m=document.getElementById('modal'); if(m) m.innerHTML=''; }catch(e){}
}
</script>
<div class="modal is-active" id="rota-options-modal">
  <div class="modal-background" onclick="_close_rota_options_modal()"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Edit Rota Options</p>
      <button class="delete" aria-label="close" onclick="_close_rota_options_modal()"></button>
    </header>
    <section class="modal-card-body">
      {% if form %}
      <form method="post" hx-post="{{ form_action }}" hx-target="#modal" hx-swap="innerHTML">
        {% csrf_token %}
        {% comment %} Render only option fields (those prefixed with `opt__`) so the modal
            focuses on rota-builder options and constraints. {% endcomment %}
        {% for field in form.visible_fields %}
          {% if field.name|slice:":5" == "opt__" %}
            <div class="field">
              <label class="label">{{ field.label }}</label>
              <div class="control">{{ field }}</div>
              {% if field.help_text %}<p class="help">{{ field.help_text }}</p>{% endif %}
              {% for err in field.errors %}<p class="help is-danger">{{ err }}</p>{% endfor %}
            </div>
          {% endif %}
        {% endfor %}
        <div class="field">
          <div class="control">
            <button class="button is-primary" type="submit">Save</button>
            <button type="button" class="button" onclick="_close_rota_options_modal()">Cancel</button>
          </div>
        </div>
      </form>
      {% else %}
      <form method="post" hx-post="{{ form_action }}" hx-target="#modal" hx-swap="innerHTML">
        {% csrf_token %}
        <div class="field">
          <label class="label">Options (JSON)</label>
          <div class="control">
            <textarea name="options_json" class="textarea" rows="10">{{ initial.options_json }}</textarea>
          </div>
          <p class="help">Edit rota options as JSON. See available constraint keys on the rota detail page.</p>
        </div>
        <div class="field">
          <div class="control">
            <button class="button is-primary" type="submit">Save</button>
            <button type="button" class="button" onclick="_close_rota_options_modal()">Cancel</button>
          </div>
        </div>
      </form>
      {% endif %}
    </section>
  </div>
</div>