{% extends "structure/base.html" %}
{% from 'crud/_macros.html' import shown %}
{% block title %}{{ construct.compose_title(construct.t(view.name)) }}{% endblock %}
{# This view renders its own visible <h1>, so suppress the layout default. #}
{% block page_heading %}{% endblock %}
{% block content %}
  {% set is_advanced_filter = request.args.get('advanced_filter') %}
  {% set return_here = request.full_path.rstrip('?') %}
  <div class="fcu-card">
    <div class="fcu-card-header" style="display: flex; align-items: center; justify-content: space-between;">
      <h1 class="fcu-text--h2" style="margin: 0;">{{ construct.t(view.name) }}</h1>
      <div style="display: flex; align-items: center; gap: 16px;">
        <div style="display: inline-block; vertical-align: middle;">
          <form id="single-search-bar"
                action=""
                method="get"
                style="display: flex; {% if is_advanced_filter %}display: none;{% endif %}">
            <input type="search"
                   name="query"
                   class="fcu-form-control"
                   style="border-radius: var(--fcu-border-radius) 0 0 var(--fcu-border-radius); padding: 6px 12px; font-size: var(--fcu-font-size-sm); border-right: 0;"
                   placeholder="{{ construct.t("crud-search-all") }}"
                   aria-label="{{ construct.t("crud-search-all") }}"
                   value="{{ request.args.get('query', '') }}">
            <div style="display: flex;">
              <button type="submit" class="fcu-btn" style="border-radius: 0; padding: 6px 12px; border-right: 0; color: var(--fcu-text-muted); min-height: 100%; box-sizing: border-box;" title="{{ construct.t('crud-apply-filter') }}">
                {{ icon("return", style="font-size: 16px;", label=construct.t("crud-apply-filter")) }}
              </button>
              <a href="{{ request.path }}?advanced_filter=1"
                 class="fcu-btn"
                 style="border-radius: 0 var(--fcu-border-radius) var(--fcu-border-radius) 0; padding: 6px 12px; display: inline-flex; align-items: center; color: var(--fcu-text-muted); min-height: 100%; box-sizing: border-box;"
                 title="{{ construct.t('crud-advanced-filter') }}">
                {{ icon("filter", style="font-size: 16px;", label=construct.t("crud-advanced-filter")) }}
              </a>
            </div>
          </form>
        </div>
        {% if view.permits('add') %}
        <a href="{{ url_for(view.endpoint + '.create') }}?next={{ return_here | urlencode }}"
           class="fcu-btn fcu-btn--primary"
           up-follow
           up-target="#main-content">
          {{ icon("add", style="font-size: 14px;") }} {{ construct.t("crud-create-rec", {'recname': construct.t(view.name, {'count': 1}) }) }}
        </a>
        {% endif %}
      </div>
    </div>

    {# The advanced-filter form lives OUTSIDE the table: a <form> as a direct
       child of <thead> is invalid, and the parser hoists it out of the table,
       orphaning these inputs from it. Binding by `form=` keeps the controls in
       their cells while belonging to a well-formed form (same approach as
       components/grid.html). #}
    <form id="crud-filter-form" action="" method="get">
      <input type="hidden" name="advanced_filter" value="1">
    </form>

    <div style="overflow-x: auto;">
      <table class="fcu-table fcu-table--hover">
        <caption class="fcu-sr-only">{{ construct.t(view.name) }}</caption>
        <thead>
            <tr>
              {% for fld, type in fields %}
                <th scope="col">{{ construct.t(type.name).capitalize() }}</th>
              {% endfor %}
              <th scope="col" style="width: 160px; text-align: right;">{{ construct.t("crud-action-title") }}</th>
            </tr>
            <tr id="filter-row"
                style="background-color: var(--fcu-surface-alt); {% if not is_advanced_filter %}display: none;{% endif %}">
              {% for fld, type in fields %}
                <td style="padding: 8px 16px;">
                  {% if not type.skipfilter %}
                    {% if type.field_type == 'enum' %}
                      <select name="{{ fld }}" form="crud-filter-form" class="fcu-form-control" style="padding: 4px 8px; font-size: var(--fcu-font-size-sm);"
                              aria-label="{{ construct.t(type.name).capitalize() }}">
                        <option value="">-- {{ construct.t("crud-select") }} --</option>
                        {% for enum_val in type.enum_class %}
                          <option value="{{ enum_val.name }}" {% if request.args.get(fld) == enum_val.name %}selected{% endif %}>
                            {% set translated = construct.t(enum_val.name) %}
                            {{ translated if translated != enum_val.name else enum_val.value }}
                          </option>
                        {% endfor %}
                      </select>
                    {% else %}
                      {# placeholder is not an accessible name: it disappears
                         as soon as the user types. #}
                      <input type="text"
                             name="{{ fld }}"
                             form="crud-filter-form"
                             class="fcu-form-control"
                             style="padding: 4px 8px; font-size: var(--fcu-font-size-sm);"
                             placeholder="{{ construct.t(type.name).capitalize() }}"
                             aria-label="{{ construct.t(type.name).capitalize() }}"
                             value="{{ request.args.get(fld, '') }}">
                    {% endif %}
                  {% endif %}
                </td>
              {% endfor %}
              <td style="padding: 8px 16px; text-align: right;">
                <div style="display: flex; justify-content: flex-end;">
                  <button type="submit" form="crud-filter-form" class="fcu-btn" style="border-radius: var(--fcu-border-radius) 0 0 var(--fcu-border-radius); padding: 4px 10px; border-right: 0; color: var(--fcu-text-muted);" title="{{ construct.t('crud-apply-filter') }}">
                    {{ icon("return", style="font-size: 16px;", label=construct.t("crud-apply-filter")) }}
                  </button>
                  <a href="{{ view.url }}"
                     class="fcu-btn"
                     style="border-radius: 0 var(--fcu-border-radius) var(--fcu-border-radius) 0; padding: 4px 10px; display: inline-flex; align-items: center; color: var(--fcu-text-muted);"
                     title="{{ construct.t('crud-simple-search') }}">
                    {{ icon("search", style="font-size: 16px;", label=construct.t("crud-simple-search")) }}
                  </a>
                </div>
              </td>
            </tr>
        </thead>
        <tbody>
          {% for row in data %}
            <tr>
              {% for field, type in fields %}
                <td>
                  {% if type.field_type == 'bool' %}
                    {# The glyph is the whole cell value, so it needs a text
                       equivalent — colour alone does not distinguish it. #}
                    {% if row[field] %}
                      {{ icon("check", style="color: var(--fcu-success-fg); font-size: 20px; font-variation-settings: 'FILL' 1", label=construct.t("crud-bool-true")) }}
                    {% else %}
                      {{ icon("cancel", style="color: var(--fcu-danger-fg); font-size: 20px; font-variation-settings: 'FILL' 1", label=construct.t("crud-bool-false")) }}
                    {% endif %}
                  {% elif type.field_type == 'set' %}
                    {% if row[field] %}
                      <div style="display: flex; flex-wrap: wrap; gap: 4px;">
                        {% for item in row[field] %}
                          {% if item in type.sets %}
                            <span style="background-color: var(--fcu-surface-alt); border: 1px solid var(--fcu-border); font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: var(--fcu-border-radius); text-transform: uppercase;">
                              {{ construct.t(type.sets[item]) }}
                            </span>
                          {% endif %}
                        {% endfor %}
                      </div>
                    {% endif %}
                  {% elif type.field_type == 'manyrelated' %}
                    {% set items = type.format_value(field, row) %}
                    {% if items %}
                      <div style="display: flex; flex-wrap: wrap; gap: 4px;">
                        {% for item in items %}
                          <span style="background-color: var(--fcu-surface-alt); border: 1px solid var(--fcu-border); font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: var(--fcu-border-radius); text-transform: uppercase;">
                            {{ item }}
                          </span>
                        {% endfor %}
                      </div>
                    {% endif %}
                  {% else %}
                    {# Blank, not the word "None" — see `shown`. #}
                    {{ shown(type.format_value(field,row)) }}
                  {% endif %}
                </td>
              {% endfor %}
              <td style="text-align: right;">
                <div style="display: flex; justify-content: flex-end; gap: 12px; align-items: center;">
                  {% if view.permits('edit', row) %}
                  <a href="{{ url_for(view.endpoint + '.get', id=row[primary_key]) }}?next={{ return_here | urlencode }}"
                     class="fcu-row-action"
                     up-follow
                     up-target="#main-content"
                     title="{{ construct.t('crud-edit-button') }}">
                    {{ icon("edit", label=construct.t("crud-edit-button")) }}
                  </a>
                  {% endif %}
                  {% if view.permits('view', row) %}
                  <a href="{{ url_for(view.endpoint + '.view', id=row[primary_key]) }}?next={{ return_here | urlencode }}"
                     class="fcu-row-action"
                     up-follow
                     up-target="#main-content"
                     title="{{ construct.t('crud-view-button') }}">
                    {{ icon("view", label=construct.t("crud-view-button")) }}
                  </a>
                  {% endif %}
                  {% if list_actions %}
                    {% for action in list_actions %}
                      <a href="{{ url_for(view.endpoint + '.' + action.endpoint, id=row[primary_key]) }}"
                         class="fcu-row-action"
                         title="{{ construct.t(action.name) }}">
                        {{ icon(action.icon, label=construct.t(action.name)) }}
                      </a>
                    {% endfor %}
                  {% endif %}
                  {# nosemgrep: django-no-csrf-token — Flask app; CSRF is handled by {{ csrf_field() }} below, not Django's {% csrf_token %}. #}
                  {% if view.permits('delete', row) %}
                  <form action="{{ url_for(view.endpoint + '.delete', id=row[primary_key]) }}"
                        method="post"
                        up-confirm="{{ construct.t("crud-confirm-delete") }}"
                        up-target="#main-content"
                        style="display: inline-flex; align-items: center;">
                    {{ csrf_field() }}
                    <input type="hidden" name="next" value="{{ return_here }}">
                    <button type="submit" class="fcu-row-action fcu-row-action--danger"
                            title="{{ construct.t('crud-delete-button') }}">
                      {{ icon("delete", label=construct.t("crud-delete-button")) }}
                    </button>
                  </form>
                  {% endif %}
                </div>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {% if pagination and pagination.pages > 1 %}
      <div class="fcu-card-footer" style="background-color: var(--fcu-surface-alt); border-top: 1px solid var(--fcu-border); padding: 16px;">
        <nav aria-label="{{ construct.t('nav-pagination') }}" style="display: flex; justify-content: flex-end;">
          <ul style="display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0;">
            <li>
              {# `pointer-events: none` only stops the mouse — the anchor stayed
                 keyboard-activatable and navigated to page 0. A <span> is
                 genuinely inert. #}
              {% if pagination.page <= 1 %}
                <span class="fcu-btn opacity-50"
                      style="padding: 6px 12px; font-size: var(--fcu-font-size-sm);"
                      aria-disabled="true">
                  <span aria-hidden="true">&laquo;</span>
                  <span class="fcu-sr-only">{{ construct.t("grid-previous") }}</span>
                </span>
              {% else %}
                <a class="fcu-btn"
                   style="padding: 6px 12px; font-size: var(--fcu-font-size-sm);"
                   href="{{ request.path }}?page={{ pagination.page - 1 }}{% for k, v in request.args.items() if k != 'page' %}&amp;{{ k }}={{ v }}{% endfor %}"
                   up-follow
                   up-target="#main-content">
                  <span aria-hidden="true">&laquo;</span>
                  <span class="fcu-sr-only">{{ construct.t("grid-previous") }}</span>
                </a>
              {% endif %}
            </li>
            {% if pagination.start_page > 1 %}
              <li>
                <a class="fcu-btn"
                   style="padding: 6px 12px; font-size: var(--fcu-font-size-sm);"
                   href="{{ request.path }}?page=1{% for k, v in request.args.items() if k != 'page' %}&amp;{{ k }}={{ v }}{% endfor %}"
                   up-follow
                   up-target="#main-content">1</a>
              </li>
              {% if pagination.start_page > 2 %}
                <li style="padding: 0 8px; color: var(--fcu-text-muted);">...</li>
              {% endif %}
            {% endif %}
            {% for p in range(pagination.start_page, pagination.end_page + 1) %}
              <li>
                {% if p == pagination.page %}
                  <span class="fcu-btn fcu-btn--primary" style="padding: 6px 12px; font-size: var(--fcu-font-size-sm);" aria-current="page">{{ p }}</span>
                {% else %}
                  <a class="fcu-btn"
                     style="padding: 6px 12px; font-size: var(--fcu-font-size-sm);"
                     href="{{ request.path }}?page={{ p }}{% for k, v in request.args.items() if k != 'page' %}&amp;{{ k }}={{ v }}{% endfor %}"
                     up-follow
                     up-target="#main-content">{{ p }}</a>
                {% endif %}
              </li>
            {% endfor %}
            {% if pagination.end_page < pagination.pages %}
              {% if pagination.end_page < pagination.pages - 1 %}
                <li style="padding: 0 8px; color: var(--fcu-text-muted);">...</li>
              {% endif %}
              <li>
                <a class="fcu-btn"
                   style="padding: 6px 12px; font-size: var(--fcu-font-size-sm);"
                   href="{{ request.path }}?page={{ pagination.pages }}{% for k, v in request.args.items() if k != 'page' %}&amp;{{ k }}={{ v }}{% endfor %}"
                   up-follow
                   up-target="#main-content">{{ pagination.pages }}</a>
              </li>
            {% endif %}
            <li>
              {% if pagination.page >= pagination.pages %}
                <span class="fcu-btn opacity-50"
                      style="padding: 6px 12px; font-size: var(--fcu-font-size-sm);"
                      aria-disabled="true">
                  <span aria-hidden="true">&raquo;</span>
                  <span class="fcu-sr-only">{{ construct.t("grid-next") }}</span>
                </span>
              {% else %}
                <a class="fcu-btn"
                   style="padding: 6px 12px; font-size: var(--fcu-font-size-sm);"
                   href="{{ request.path }}?page={{ pagination.page + 1 }}{% for k, v in request.args.items() if k != 'page' %}&amp;{{ k }}={{ v }}{% endfor %}"
                   up-follow
                   up-target="#main-content">
                  <span aria-hidden="true">&raquo;</span>
                  <span class="fcu-sr-only">{{ construct.t("grid-next") }}</span>
                </a>
              {% endif %}
            </li>
          </ul>
        </nav>
      </div>
    {% endif %}
  </div>
{% endblock content %}