{% set hue = groups.index(spec.group) % 6 if spec.group in groups else 0 %}
{% set action = page_url ~ "/new" if pk is none else page_url ~ "/" ~ pk ~ "/edit" %}
<dialog class="modal" style="--hue: var(--hue-{{ hue }})"
        aria-label="{% if pk is none %}New {{ spec.label }}{% else %}Edit {{ spec.label }} {{ pk }}{% endif %}">
  {# The whole dialog is swapped for whatever the save returns: the record on
     success, this form again with per-field errors on rejection. #}
  <form method="post" action="{{ action }}"
        hx-post="{{ action }}" hx-target="#modal" hx-swap="innerHTML">
    <div class="modal-head">
      <div class="head">
        <div class="eyebrow"><span class="dot"></span>{{ spec.group }} · {{ spec.label }}</div>
        <h2 class="title">
          {% if pk is none %}New record{% else %}Edit <span class="pk">{{ pk }}</span>{% endif %}
        </h2>
      </div>
      <div class="actions">
        <button class="btn btn--primary" type="submit">Save</button>
        {% if pk is not none %}
        <a class="btn" href="{{ page_url }}/{{ pk }}"
           hx-get="{{ page_url }}/{{ pk }}" hx-target="#modal" hx-swap="innerHTML">Cancel</a>
        {% else %}
        <button class="btn" type="button" onclick="this.closest('dialog').close()">Cancel</button>
        {% endif %}
      </div>
    </div>
    {% if form_error %}
    <div class="form-error">{{ form_error }}</div>
    {% elif errors %}
    <div class="form-error">{{ errors | length }} field{{ "s" if errors | length != 1 }} need attention</div>
    {% endif %}
    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
    <div class="fields">{% include "_fields.html" %}</div>
  </form>
</dialog>