{#- One inline section (a card). Rendered inside the edit page and returned
    alone by the ".../list" endpoint, so it only depends on `ctx`. -#}
{%- set iid = ctx.identity -%}
{%- set p = ctx.pagination -%}
{%- set il = ctx.inline_cls -%}
{%- set list_url = ctx.base_url ~ "/list" -%}
{%- set current_url = list_url ~ "?page=" ~ p.page ~ "&search=" ~ (ctx.search | urlencode) -%}
{%- set extra_cols = (1 if ctx.sortable else 0) + (1 if ctx.can_delete else 0) + (1 if ctx.can_edit else 0) -%}
<div class="card inline-section"
     id="inline-{{ iid }}"
     data-inline="{{ iid }}"
     data-base-url="{{ ctx.base_url }}"
     data-current-url="{{ current_url }}"
     data-label="{{ ctx.label }}">

  <div class="card-header inline-header"
       role="button"
       tabindex="0"
       aria-controls="inline-body-{{ iid }}"
       aria-expanded="true">
    <i class="fa-solid fa-chevron-down inline-collapse-icon text-muted me-2"></i>
    <h3 class="card-title mb-0 d-flex align-items-center flex-grow-1">
      {% if ctx.icon %}<i class="{{ ctx.icon }} me-2 text-muted"></i>{% endif %}
      {{ ctx.label }}
      <span class="badge bg-secondary-lt ms-2" data-inline-count>{{ p.count }}</span>
      {% if ctx.sortable %}
      <span class="badge bg-azure-lt ms-1" title="Drag rows to reorder">
        <i class="fa-solid fa-sort"></i> sortable
      </span>
      {% endif %}
    </h3>

    <div class="card-actions d-flex align-items-center gap-2 inline-no-toggle">
      {% if ctx.search_enabled %}
      <div class="input-group input-group-sm inline-search">
        <input type="search"
               class="form-control inline-search-input"
               placeholder="Search…"
               aria-label="Search {{ ctx.label }}"
               value="{{ ctx.search }}">
        <button class="btn btn-sm inline-search-btn" type="button" title="Search">
          <i class="fa-solid fa-magnifying-glass"></i>
        </button>
        {% if ctx.search %}
        <button class="btn btn-sm inline-search-clear" type="button" title="Clear search">
          <i class="fa-solid fa-xmark"></i>
        </button>
        {% endif %}
      </div>
      {% endif %}

      {% if ctx.can_create %}
      <button type="button" class="btn btn-sm btn-primary inline-add-btn"
              data-form-url="{{ ctx.base_url }}/form">
        <i class="fa-solid fa-plus me-1"></i>Add
      </button>
      {% endif %}
    </div>
  </div>

  <div class="collapse show" id="inline-body-{{ iid }}">
    <div class="inline-alerts"></div>
    <div class="table-responsive">
      <table class="table table-vcenter card-table mb-0 inline-table"
             {% if ctx.sortable %}data-reorder-url="{{ ctx.base_url }}/reorder"{% endif %}>
        <thead>
          <tr>
            {% if ctx.sortable %}<th class="w-1"></th>{% endif %}
            {% if ctx.can_delete %}
            <th class="w-1">
              <input class="form-check-input m-0 align-middle inline-select-all" type="checkbox"
                     aria-label="Select all">
            </th>
            {% endif %}
            {% for col in ctx.display_columns %}
            <th>{{ ctx.column_labels[col] }}</th>
            {% endfor %}
            {% if ctx.can_edit %}<th class="w-1"></th>{% endif %}
          </tr>
        </thead>
        <tbody>
          {% for row in p.rows %}
          {% set row_pk = il.encode_pk(row) %}
          <tr data-pk="{{ row_pk }}">
            {% if ctx.sortable %}
            <td class="inline-drag-handle text-muted" title="Drag to reorder">
              <i class="fa-solid fa-grip-vertical"></i>
            </td>
            {% endif %}
            {% if ctx.can_delete %}
            <td>
              <input class="form-check-input m-0 align-middle inline-select-box" type="checkbox"
                     value="{{ row_pk }}" aria-label="Select row">
            </td>
            {% endif %}
            {% for col in ctx.display_columns %}
            <td>{{ il.get_display_value(row, col) }}</td>
            {% endfor %}
            {% if ctx.can_edit %}
            <td class="text-end">
              <button type="button" class="btn btn-sm btn-ghost-secondary btn-icon inline-edit-btn"
                      data-form-url="{{ ctx.base_url }}/form?pk={{ row_pk | urlencode }}"
                      title="Edit">
                <i class="fa-solid fa-pen"></i>
              </button>
            </td>
            {% endif %}
          </tr>
          {% else %}
          <tr class="inline-empty">
            <td colspan="{{ ctx.display_columns | length + extra_cols }}" class="text-center text-muted py-4">
              {% if ctx.search %}
              No results for “<strong>{{ ctx.search }}</strong>”
              {% else %}
              No {{ ctx.label }} yet{% if ctx.can_create %} — click <strong>Add</strong> to create one{% endif %}.
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="card-footer d-flex align-items-center flex-wrap gap-2">
      {% if ctx.can_delete %}
      <button type="button" class="btn btn-sm btn-danger inline-bulk-delete d-none"
              data-delete-url="{{ ctx.base_url }}/delete">
        <i class="fa-solid fa-trash me-1"></i>Delete selected
      </button>
      {% endif %}

      <span class="text-muted small inline-range">
        {% if p.count %}Showing {{ p.first_index }}–{{ p.last_index }} of {{ p.count }}{% else %}0 items{% endif %}
      </span>

      {% if p.total_pages > 1 %}
      <ul class="pagination pagination-sm m-0 ms-auto inline-pagination">
        <li class="page-item {{ 'disabled' if not p.has_previous }}">
          <a class="page-link inline-page-link" href="#" aria-label="Previous"
             data-url="{{ list_url }}?page={{ p.page - 1 }}&search={{ ctx.search | urlencode }}">
            <i class="fa-solid fa-chevron-left"></i>
          </a>
        </li>
        {% for n in p.page_range %}
        {% if n is none %}
        <li class="page-item disabled"><span class="page-link">…</span></li>
        {% else %}
        <li class="page-item {{ 'active' if n == p.page }}">
          <a class="page-link inline-page-link" href="#"
             data-url="{{ list_url }}?page={{ n }}&search={{ ctx.search | urlencode }}">{{ n }}</a>
        </li>
        {% endif %}
        {% endfor %}
        <li class="page-item {{ 'disabled' if not p.has_next }}">
          <a class="page-link inline-page-link" href="#" aria-label="Next"
             data-url="{{ list_url }}?page={{ p.page + 1 }}&search={{ ctx.search | urlencode }}">
            <i class="fa-solid fa-chevron-right"></i>
          </a>
        </li>
      </ul>
      {% endif %}

      {% if p.has_next %}
      <button type="button" class="btn btn-sm btn-outline-secondary inline-load-more {{ '' if p.total_pages > 1 else 'ms-auto' }}"
              data-url="{{ list_url }}?page={{ p.page + 1 }}&search={{ ctx.search | urlencode }}">
        <i class="fa-solid fa-chevron-down me-1"></i>Load more
        <span class="text-muted ms-1">({{ p.remaining }} more)</span>
      </button>
      {% endif %}
    </div>
  </div>
</div>