{% extends "structure/base.html" %}
{% 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;">
      <h2 class="fcu-text--h2" style="margin: 0;">{{ construct.t(view.name) }}</h2>
      <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="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>
              <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="Advanced Filter">
                {{ icon("filter", style="font-size: 16px;") }}
              </a>
            </div>
          </form>
        </div>
        <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>
      </div>
    </div>

    <div style="overflow-x: auto;">
      <table class="fcu-table fcu-table--hover">
        <thead>
          <form action="" method="get">
            <input type="hidden" name="advanced_filter" value="1">
            <tr>
              {% for fld, type in fields %}
                <th>{{ construct.t(type.name).capitalize() }}</th>
              {% endfor %}
              <th 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 }}" 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="{{ 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="Simple Search">
                    {{ icon("search", style="font-size: 16px;") }}
                  </a>
                </div>
              </td>
            </tr>
          </form>
        </thead>
        <tbody>
          {% for row in data %}
            <tr>
              {% for field, type in fields %}
                <td>
                  {% if type.field_type == 'bool' %}
                    {% if row[field] %}
                      {{ 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' %}
                    {% 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 %}
                    {{ 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 + '.get', id=row[primary_key]) }}?next={{ return_here | urlencode }}"
                     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="Edit">
                    {{ icon("edit") }}
                  </a>
                  {% if list_actions %}
                    {% for action in list_actions %}
                      <a href="{{ url_for(view.endpoint + '.' + action.endpoint, 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) }}">
                        {{ icon(action.icon) }}
                      </a>
                    {% endfor %}
                  {% endif %}
                  {# 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', 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" 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 %}
        </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="Page navigation" style="display: flex; justify-content: flex-end;">
          <ul style="display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0;">
            <li>
              <a class="fcu-btn {% if pagination.page <= 1 %}opacity-50 pointer-events-none{% endif %}"
                 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">&laquo;</a>
            </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);">{{ 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>
              <a class="fcu-btn {% if pagination.page >= pagination.pages %}opacity-50 pointer-events-none{% endif %}"
                 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">&raquo;</a>
            </li>
          </ul>
        </nav>
      </div>
    {% endif %}
  </div>
{% endblock content %}