{% extends "crud/tab_view.html" %}
{% block tab_content %}
  {%- set is_advanced_filter = request.args.get('advanced_filter') if filter_enabled else none -%}
  {%- set tab_list_url = url_for(view.endpoint + '.' + list_ep, id=parent_id) -%}
  <div style="margin-bottom: 16px;{% if search_enabled or filter_enabled %} display: flex; align-items: center; justify-content: space-between; gap: 16px;{% endif %}">
    <a href="{{ create_href }}"
       class="fcu-btn fcu-btn--primary"
       up-follow
       up-target="{{ content_target }}"
       up-history="true">
      {{ icon("add", style="font-size: 14px;") }} {{ construct.t("crud-add-new-item") }}
    </a>
    {%- if search_enabled %}
    <form action="{{ tab_list_url }}"
          method="get"
          up-target="{{ content_target }}"
          up-history="true"
          style="display: flex; {% if is_advanced_filter %}display: none;{% endif %}">
      <input type="text"
             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") }}"
             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="Apply">
          {{ icon("return", style="font-size: 16px;") }}
        </button>
        {%- if filter_enabled %}
        <a href="{{ tab_list_url }}?advanced_filter=1"
           class="fcu-btn"
           up-follow
           up-target="{{ content_target }}"
           up-history="true"
           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="Advanced Filter">
          {{ icon("filter", style="font-size: 16px;") }}
        </a>
        {%- endif %}
      </div>
    </form>
    {%- elif filter_enabled and not is_advanced_filter %}
    <a href="{{ tab_list_url }}?advanced_filter=1"
       class="fcu-btn"
       up-follow
       up-target="{{ content_target }}"
       up-history="true"
       style="padding: 6px 12px; display: inline-flex; align-items: center; color: var(--fcu-text-muted);"
       title="Advanced Filter">
      {{ icon("filter", style="font-size: 16px;") }}
    </a>
    {%- endif %}
  </div>
  <div style="overflow-x: auto;">
    <table class="fcu-table fcu-table--hover">
      <thead>
        {%- if filter_enabled %}
        <form action="{{ tab_list_url }}"
              method="get"
              up-target="{{ content_target }}"
              up-history="true">
          <input type="hidden" name="advanced_filter" value="1">
        {%- endif %}
        <tr>
          {% for fld, type in fields %}
            <th>
              {{ construct.t(type.name).capitalize() }}
            </th>
          {% endfor %}
          <th style="width: 120px; text-align: right;">
            {{ construct.t("crud-action-title") }}
          </th>
        </tr>
        {%- if filter_enabled %}
        <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 }}" class="fcu-form-control" style="padding: 4px 8px; font-size: var(--fcu-font-size-sm);">
                    <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 %}
                  <input type="text"
                         name="{{ fld }}"
                         class="fcu-form-control"
                         style="padding: 4px 8px; font-size: var(--fcu-font-size-sm);"
                         placeholder="{{ 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" 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="Apply">
                {{ icon("return", style="font-size: 16px;") }}
              </button>
              <a href="{{ tab_list_url }}"
                 class="fcu-btn"
                 up-follow
                 up-target="{{ content_target }}"
                 up-history="true"
                 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="Simple Search">
                {{ icon("search", style="font-size: 16px;") }}
              </a>
            </div>
          </td>
        </tr>
        </form>
        {%- endif %}
      </thead>
      <tbody>
        {% for row in data %}
          <tr>
            {% for field, type in fields %}
              <td>
                {% if type.field_type == 'bool' %}
                  {% if type.format_value(field, row) %}
                    {{ icon("check", style="color: var(--fcu-success); font-size: 20px; font-variation-settings: 'FILL' 1") }}
                  {% else %}
                    {{ icon("cancel", style="color: var(--fcu-danger); font-size: 20px; font-variation-settings: 'FILL' 1") }}
                  {% endif %}
                {% elif type.field_type == 'set' %}
                  {% set val = type.format_value(field, row) %}
                  {% if val %}
                    <div style="display: flex; flex-wrap: wrap; gap: 4px;">
                      {% for item in val %}
                        {% 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' %}
                  <div style="display: flex; flex-wrap: wrap; gap: 4px;">
                    {% for item in type.format_value(field, row) %}
                      <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>
                {% else %}
                  {{ 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;">
                <a href="{{ url_for(view.endpoint + '.' + edit_ep, id=parent_id, child_id=row[primary_key]) }}"
                   style="color: var(--fcu-text-muted); text-decoration: none; display: inline-flex; align-items: center;"
                   onmouseover="this.style.color='var(--fcu-primary)'"
                   onmouseout="this.style.color='var(--fcu-text-muted)'"
                   up-follow
                   up-target="#main-content"
                   title="{{ construct.t('crud-action-title') }}">
                  {{ icon("edit") }}
                </a>
                {% for action in list_actions %}
                  <a href="{{ url_for(view.endpoint + '.' + action.endpoint, id=parent_id, child_id=row[primary_key]) }}"
                     style="color: var(--fcu-text-muted); text-decoration: none; display: inline-flex; align-items: center;"
                     onmouseover="this.style.color='var(--fcu-primary)'"
                     onmouseout="this.style.color='var(--fcu-text-muted)'"
                     title="{{ construct.t(action.name) }}"
                     up-follow
                     up-target="{{ content_target }}"
                     up-history="true">
                    {{ icon(action.icon) }}
                  </a>
                {% endfor %}
                {# nosemgrep: django-no-csrf-token — Flask app; CSRF is handled by {{ csrf_field() }} below, not Django's {% csrf_token %}. #}
                <form action="{{ url_for(view.endpoint + '.' + delete_ep, id=parent_id, child_id=row[primary_key]) }}"
                      method="post"
                      up-confirm="{{ construct.t('crud-confirm-delete') }}"
                      up-target="{{ content_target }}"
                      up-history="true"
                      style="display: inline-flex; align-items: center;">
                  {{ csrf_field() }}
                  <button type="submit" style="background: transparent; border: none; padding: 0; cursor: pointer; color: var(--fcu-text-muted); display: inline-flex; align-items: center;"
                          onmouseover="this.style.color='var(--fcu-danger)'"
                          onmouseout="this.style.color='var(--fcu-text-muted)'">
                    {{ icon("delete") }}
                  </button>
                </form>
              </div>
            </td>
          </tr>
        {% endfor %}
        {% if not data %}
          <tr>
            <td colspan="{{ fields|length + 1 }}" style="padding: 32px; text-align: center; color: var(--fcu-text-muted);">
              {{ construct.t("crud-no-items-found") }}
            </td>
          </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
  {% if pagination and pagination.pages > 1 %}
    <div style="display: flex; justify-content: flex-end; margin-top: 16px;">
      <nav style="display: flex; align-items: center; gap: 4px;" aria-label="Page navigation">
        <a href="{{ url_for(view.endpoint + '.' + list_ep, id=parent_id, page=pagination.page - 1) }}{%- for k, v in request.args.items() if k != 'page' -%}&{{ k }}={{ v|urlencode }}{%- endfor -%}"
           class="fcu-btn"
           style="padding: 6px 12px; font-size: var(--fcu-font-size-sm); {% if pagination.page <= 1 %}opacity: 0.4; pointer-events: none;{% endif %}"
           up-follow
           up-target="{{ content_target }}"
           up-history="true">&laquo;</a>
        {% for p in range(pagination.start_page, pagination.end_page + 1) %}
          <a href="{{ url_for(view.endpoint + '.' + list_ep, id=parent_id, page=p) }}{%- for k, v in request.args.items() if k != 'page' -%}&{{ k }}={{ v|urlencode }}{%- endfor -%}"
             class="fcu-btn {% if p == pagination.page %}fcu-btn--primary{% endif %}"
             style="padding: 6px 12px; font-size: var(--fcu-font-size-sm);"
             up-follow
             up-target="{{ content_target }}"
             up-history="true">{{ p }}</a>
        {% endfor %}
        <a href="{{ url_for(view.endpoint + '.' + list_ep, id=parent_id, page=pagination.page + 1) }}{%- for k, v in request.args.items() if k != 'page' -%}&{{ k }}={{ v|urlencode }}{%- endfor -%}"
           class="fcu-btn"
           style="padding: 6px 12px; font-size: var(--fcu-font-size-sm); {% if pagination.page >= pagination.pages %}opacity: 0.4; pointer-events: none;{% endif %}"
           up-follow
           up-target="{{ content_target }}"
           up-history="true">&raquo;</a>
      </nav>
    </div>
  {% endif %}
{% endblock %}