{# Inline related records -- see docs/inlines.md. One entry in the
   `inlines` context list per ModelAdmin.inlines declaration;
   render_inline_section dispatches on .mode and .layout. #}
{% from "admin/components/ui/field.html" import render_form_input with context %}
{% from "admin/components/field.html" import render_field_value with context %}
{% from "admin/components/icons.html" import icon %}
{% from "admin/components/ui/combobox.html" import combobox %}
{% from "admin/components/ui/select.html" import select %}
{% from "admin/components/ui/multi-select.html" import multi_select %}
{% from "admin/components/ui/delete-preview.html" import delete_refusal %}

{% macro render_inline_section(inline) %}
<div id="inline-{{ inline.slug }}" class="mt-8">
  {# Set only by the inline delete route, when the child's delete_preview
     refused; undefined (and so falsy) everywhere else. #}
  {% if refusal %}<div class="mb-3">{{ delete_refusal(refusal) }}</div>{% endif %}
  <h3 class="{{ ui('text', 'heading') }}">{{ _(inline.label) }}</h3>
  {% if inline.mode == "placeholder" %}
  <div class="{{ ui('panel', 'dashed') }}">
    {{ _("Save to add %(label)s.", label=_(inline.label)) }}
  </div>
  {% elif inline.mode == "readonly" %}
    {% if inline.layout == "tabular" %}{{ render_inline_readonly_table(inline) }}
    {% else %}{{ render_inline_readonly_stacked(inline) }}{% endif %}
  {% else %}
    {% if inline.layout == "tabular" %}{{ render_inline_editable_table(inline) }}
    {% else %}{{ render_inline_editable_stacked(inline) }}{% endif %}
  {% endif %}
</div>
{% endmacro %}

{# -- stacked, editable ---------------------------------------------- #}
{% macro render_inline_editable_stacked(inline) %}
{% for row in inline.rows %}
<form class="{{ ui('panel') }}"
      hx-post="{{ row.update_url }}" hx-target="#inline-{{ inline.slug }}" hx-swap="outerHTML">
  <div class="{{ ui('panel', 'body') }}">
  {% for name in inline.field_names %}
  {% set field = inline.child_admin.get_field(name) %}
  {% set value = row.data.get(name) if row.data is not none else field.get_value(row.obj) %}
  {{ render_form_input(field, value, row.errors.get(name), row.relation_options.get(name), key=inline.slug ~ "-" ~ row.pk) }}
  {% endfor %}
  </div>
  <div class="flex gap-2 pt-3">
    {% if inline.can_change %}
    <button type="submit"
            class="{{ ui('button', 'size-xs') }}">
      {{ icon("check", "w-3.5 h-3.5") }} {{ _("Save") }}
    </button>
    {% endif %}
    {% if inline.can_delete %}
    <button type="button" hx-delete="{{ row.delete_url }}" hx-target="#inline-{{ inline.slug }}"
            hx-swap="outerHTML swap:0.2s" hx-confirm="{{ _('Remove this %(label)s?', label=_(inline.label)) }}"
            class="{{ ui('button', 'ghost-destructive', 'size-xs') }}">
      {{ icon("delete", "w-3.5 h-3.5") }} {{ _("Remove") }}
    </button>
    {% endif %}
  </div>
</form>
{% endfor %}
{% if inline.add_row %}
<form class="{{ ui('panel', 'dashed') }}"
      hx-post="{{ inline.add_row.create_url }}" hx-target="#inline-{{ inline.slug }}" hx-swap="outerHTML">
  {% for name in inline.field_names %}
  {% set field = inline.child_admin.get_field(name) %}
  {% set value = inline.add_row.data.get(name) if inline.add_row.data is not none else none %}
  {{ render_form_input(field, value, inline.add_row.errors.get(name), inline.add_row.relation_options.get(name), key=inline.slug ~ "-new") }}
  {% endfor %}
  <button type="submit"
          class="{{ ui('button', 'outline', 'size-xs') }}">
    {{ icon("plus", "w-3.5 h-3.5") }} {{ _("Add") }}
  </button>
</form>
{% endif %}
{% if not inline.rows and not inline.add_row %}
<p class="text-sm text-muted-foreground">{{ _("No %(label)s.", label=_(inline.label)) }}</p>
{% endif %}
{% endmacro %}

{# No <form> element: HTML forbids one as a table row or cell
   descendant. Save uses hx-post plus hx-include="closest tr", since
   there is no enclosing <form> to submit. #}
{% macro render_inline_table_cell_input(field, value, errors, relation, key="") %}
{# Called, not quoted. This was a string literal containing Jinja
   delimiters -- Jinja never re-renders a value, so the raw text landed
   in the class attribute and every control in an inline edit row
   rendered unstyled: white on white in dark mode. #}
{% set field_classes = ui('input', 'size-sm') %}
{% set select_classes = ui('select', 'cell') %}
{% if field.field_type == "boolean" %}
<input type="checkbox" name="{{ field.name }}" value="true" autocomplete="off" {% if value %}checked{% endif %}
       class="{{ ui('checkbox') }}">
{% elif field.field_type in ("foreignkey", "onetoone") and relation and relation.autocomplete %}
{# An autocomplete relation loads no options into the page, so the plain
   select below would be empty. Same combobox the full form uses. #}
{{ combobox(name=field.name,
            id="combobox-results-" ~ key ~ "-" ~ field.name,
            selected_pk=relation.selected_pk,
            selected_label=relation.selected_label,
            lookup_url=base_path ~ "/" ~ relation.lookup_target ~ "/lookup",
            placeholder=_('Search…')) }}
{% elif field.field_type in ("foreignkey", "onetoone") %}
{{ select(field.name, [(none, "—")] + (relation.options|list if relation else []),
          selected=(relation.selected_pk if relation else none), placeholder="—", compact=true) }}
{% elif field.field_type == "manytomany" %}
{# The same shadcn control the full form uses: a trigger with chips and
   a portalled popover, so a row stays one line tall however many options
   there are -- the native <select multiple> it replaces had to be capped
   and scrolled internally to avoid 195px rows. #}
{% set m2m = namespace(pairs=[]) %}
{% for pk, label in (relation.options if relation else []) %}
{% set m2m.pairs = m2m.pairs + [(pk, label, relation and pk in relation.selected_pks)] %}
{% endfor %}
{{ multi_select(field.name, m2m.pairs, placeholder=_("Select…"), compact=true) }}
{% elif field.field_type == "enum" %}
<select name="{{ field.name }}" autocomplete="off" class="{{ select_classes }}">
  {% for choice in field.choices %}
  <option value="{{ choice }}" {% if choice == value %}selected{% endif %}>{{ choice }}</option>
  {% endfor %}
</select>
{% else %}
<input type="text" name="{{ field.name }}" value="{{ value|form_value(field.field_type) }}" autocomplete="off" class="{{ field_classes }}">
{% endif %}
{% for error in errors or [] %}
<p class="{{ ui('text', 'error') }}">{{ error }}</p>
{% endfor %}
{% endmacro %}

{% macro render_inline_editable_table(inline) %}
<div class="{{ ui('table', 'wrapper') }}">
{# The wrapper is overflow-hidden (it owns the rounded border), so
   without this the table is clipped at the card's edge and the row's own
   actions become unreachable. Bounded (not the plain list's "scroll")
   because this sits inside a parent's own page instead of being the
   page -- many child rows should scroll in place, not stretch it.
   bg-card (not bg-muted/50) keeps the sticky header opaque over rows
   scrolling underneath it. #}
<div class="{{ ui('table', 'inline-scroll') }}">
<table class="min-w-full divide-y divide-border">
  <thead class="sticky top-0 z-10 bg-card"><tr>
    {% for name in inline.field_names %}
    <th class="{{ ui('table', 'th-compact') }}">{{ _(inline.child_admin.get_field(name).label) }}</th>
    {% endfor %}
    <th></th>
  </tr></thead>
  <tbody class="divide-y divide-border">
    {% for row in inline.rows %}
    <tr>
      {% for name in inline.field_names %}
      {% set field = inline.child_admin.get_field(name) %}
      {% set value = row.data.get(name) if row.data is not none else field.get_value(row.obj) %}
      <td class="px-3 py-2">{{ render_inline_table_cell_input(field, value, row.errors.get(name), row.relation_options.get(name), inline.slug ~ "-" ~ row.pk) }}</td>
      {% endfor %}
      <td class="px-3 py-2 text-right whitespace-nowrap">
        {% if inline.can_change %}
        <button type="button" hx-post="{{ row.update_url }}" hx-include="closest tr"
                hx-target="#inline-{{ inline.slug }}" hx-swap="outerHTML"
                class="{{ ui('button', 'ghost-muted', 'size-icon-sm') }}">
          {{ icon("check", "w-4 h-4") }}<span class="sr-only">{{ _("Save") }}</span>
        </button>
        {% endif %}
        {% if inline.can_delete %}
        <button type="button" hx-delete="{{ row.delete_url }}" hx-target="#inline-{{ inline.slug }}"
                hx-swap="outerHTML swap:0.2s" hx-confirm="{{ _('Remove this %(label)s?', label=_(inline.label)) }}"
                class="{{ ui('button', 'ghost-destructive', 'size-icon-sm') }}">
          {{ icon("delete", "w-4 h-4") }}<span class="sr-only">{{ _("Remove") }}</span>
        </button>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
    {% if inline.add_row %}
    <tr>
      {% for name in inline.field_names %}
      {% set field = inline.child_admin.get_field(name) %}
      {% set value = inline.add_row.data.get(name) if inline.add_row.data is not none else none %}
      <td class="px-3 py-2">{{ render_inline_table_cell_input(field, value, inline.add_row.errors.get(name), inline.add_row.relation_options.get(name), inline.slug ~ "-new") }}</td>
      {% endfor %}
      <td class="px-3 py-2 text-right">
        <button type="button" hx-post="{{ inline.add_row.create_url }}" hx-include="closest tr"
                hx-target="#inline-{{ inline.slug }}" hx-swap="outerHTML"
                class="{{ ui('button', 'ghost-muted', 'size-icon-sm') }}">
          {{ icon("plus", "w-4 h-4") }}<span class="sr-only">{{ _("Add") }}</span>
        </button>
      </td>
    </tr>
    {% endif %}
  </tbody>
</table>
</div>
{# The empty state sits outside the scroller: there is nothing to
   scroll, and a centred message inside a scrolling box drifts. #}
{% if not inline.rows and not inline.add_row %}
<p class="{{ ui('table', 'empty') }}">{{ _("No %(label)s.", label=_(inline.label)) }}</p>
{% endif %}
</div>
{% endmacro %}

{# -- read-only (detail page) ------------------------------------------ #}
{% macro render_inline_readonly_stacked(inline) %}
{% for row in inline.rows %}
<div class="{{ ui('panel') }}">
  <a href="{{ row.detail_url }}" class="{{ ui('text', 'link') }}">{{ row.pk }}</a>
  <dl class="{{ ui('panel', 'body') }} mt-2 divide-y divide-border">
    {% for name in inline.detail_field_names %}
    {% set field = inline.child_admin.get_field(name) %}
    <div class="flex justify-between gap-4 py-1 text-sm">
      <dt class="text-muted-foreground">{{ _(field.label) }}</dt>
      <dd class="text-right">{{ render_field_value(field, field.get_value(row.obj), inline.empty_value) }}</dd>
    </div>
    {% endfor %}
  </dl>
</div>
{% endfor %}
{% if not inline.rows %}<p class="text-sm text-muted-foreground">{{ _("No %(label)s.", label=_(inline.label)) }}</p>{% endif %}
{% endmacro %}

{% macro render_inline_readonly_table(inline) %}
<div class="{{ ui('table', 'wrapper') }}">
{# The wrapper is overflow-hidden (it owns the rounded border), so
   without this the table is clipped at the card's edge and the row's own
   actions become unreachable. Bounded (not the plain list's "scroll")
   because this sits inside a parent's own page instead of being the
   page -- many child rows should scroll in place, not stretch it.
   bg-card (not bg-muted/50) keeps the sticky header opaque over rows
   scrolling underneath it. #}
<div class="{{ ui('table', 'inline-scroll') }}">
<table class="min-w-full divide-y divide-border">
  <thead class="sticky top-0 z-10 bg-card"><tr>
    {% for name in inline.detail_field_names %}
    <th class="{{ ui('table', 'th-compact') }}">{{ _(inline.child_admin.get_field(name).label) }}</th>
    {% endfor %}
  </tr></thead>
  <tbody class="divide-y divide-border">
    {% for row in inline.rows %}
    <tr>
      {% for name in inline.detail_field_names %}
      {% set field = inline.child_admin.get_field(name) %}
      <td class="px-3 py-2 text-sm">
        {# A relation with several targets renders as a comma-joined run
           of links, and in a table cell that wraps: one record with
           three of them made the row three lines tall and widened the
           column enough to push the row's own actions off the card. #}
        {% if field.field_type == "manytomany" %}<span class="{{ ui('scroll-area', 'x') }}">{{ render_field_value(field, field.get_value(row.obj), inline.empty_value) }}</span>
        {% elif name == inline.link_field %}
        {# The primary key's cell opens the record, so the row needs no
           column of its own for a View link. Never a relation cell,
           which is already a link -- nesting one in another is invalid
           HTML that browsers silently restructure. #}
        <a href="{{ row.detail_url }}" class="{{ ui('text', 'link') }}">{{ render_field_value(field, field.get_value(row.obj), inline.empty_value) }}</a>
        {% else %}{{ render_field_value(field, field.get_value(row.obj), inline.empty_value) }}{% endif %}
      </td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% if not inline.rows %}<p class="{{ ui('table', 'empty') }}">{{ _("No %(label)s.", label=_(inline.label)) }}</p>{% endif %}
</div>
{% endmacro %}