<div id="normal-modal-{{ case.pk }}" class="modal modal-blur fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <form method="post" hx-post="{% if normal %}{% url 'atlas:case_normal_edit' normal.pk %}{% else %}{% url 'atlas:case_create_normal' case.pk %}{% endif %}" hx-target="#normal-toggle-block" hx-swap="outerHTML">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title">{% if normal %}Edit normal for case {{ case.pk }}{% else %}Mark case {{ case.pk }} as Normal{% endif %}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {% load crispy_forms_tags %}
          {{ form.media }}
          {% crispy form %}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-link" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save Normal</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  // Show the modal after HTMX injects it
  (function(){
    try {
      var el = document.getElementById('normal-modal-{{ case.pk }}');
      if(el){
        var m = new bootstrap.Modal(el);
        m.show();
      }
    } catch(e) {
      console.error('Failed to show normal modal', e);
    }
  })();
</script>
