{# Grid component (GridComponent in components.py, request half in grid.py;
   usage docs in manual/grid.org).

   There is exactly *one* rendering of the table below, and everything else is
   layered on it:

   * Without JavaScript it is readable and scrollable, sorted and paged by
     plain links, filtered by a GET form, and edited by row forms — a ✎ link
     re-renders one row as inputs, the blank bottom row adds, a × button
     deletes. All state is query-string keys namespaced by the component id
     (``<id>-page``, ``<id>-sort``, ``<id>-edit``, ``<id>-f-<column>``), so
     two grids share a page without reading each other's state.
   * With JavaScript, static/js/construct-grid.min.js hydrates the same markup
     into a spreadsheet: it reads the JSON in [data-fcu-grid-config], edits
     cells in place against the row endpoints, and scrolls more rows in. It
     never rebuilds the table, which is why the two renderings cannot drift.

   The no-JS controls carry ``js-hide`` so the two never both appear: the
   library's compiler hides (and disables) them once scripting is present.

   Forms live *outside* the table and the controls inside it reference them by
   ``form="…"`` — a <form> cannot be a child of <tr>. One row form serves both
   editing and adding (only one is ever open); one delete form serves every
   row, each button carrying its own row id as its submitted value. #}

{% macro cell_input(field, name, value, form_id, choices, error, input_types) %}
  {#- The no-JS twin of buildEditor() in frontend/src/grid/cells.js: same
      widget per field type, so the row form and the in-cell editor never
      disagree about what a value looks like while it is being typed. -#}
  {%- if field.field_type == 'bool' -%}
    <input type="checkbox" class="fcu-grid-input" name="{{ name }}"
           form="{{ form_id }}"{% if value %} checked{% endif %}>
  {%- elif choices is not none -%}
    <select class="fcu-grid-input" name="{{ name }}" form="{{ form_id }}"
            {%- if field.required %} required{% endif %}>
      {% if not field.required %}<option value=""></option>{% endif %}
      {% for choice in choices %}
        <option value="{{ choice.value }}"
                {%- if value is not none and value|string == choice.value|string %} selected{% endif %}>{{ choice.label }}</option>
      {% endfor %}
    </select>
  {%- elif field.field_type == 'text' -%}
    <textarea class="fcu-grid-input" name="{{ name }}" form="{{ form_id }}" rows="2"
              {%- if field.required %} required{% endif %}>{{ value if value is not none else '' }}</textarea>
  {%- else -%}
    <input class="fcu-grid-input" name="{{ name }}" form="{{ form_id }}"
           type="{{ input_types.get(field.field_type, 'text') }}"
           value="{{ value if value is not none else '' }}"
           {%- if field.field_type == 'decimal' %} step="any"{% endif %}
           {%- if field.field_type == 'string' and field.length %} maxlength="{{ field.length }}"{% endif %}
           {%- if field.required %} required{% endif %}>
  {%- endif -%}
  {%- if error %}<span class="fcu-grid-error">{{ error }}</span>{% endif -%}
{% endmacro %}

<div{% if c.id %} id="{{ c.id }}"{% endif %}
     class="fcu-grid{% if writable %} fcu-grid--editable{% endif %}{% if c.css_class %} {{ c.css_class }}{% endif %}"
     data-fcu-grid style="--fcu-grid-rows: {{ spec.visible_rows }};">

  {% if writable and form_action %}
    {# The row form: update when a row is open for editing, create otherwise.
       Only one of the two rows is ever rendered, so one form serves both. #}
    <form id="{{ gid }}-rowform" method="post" action="{{ form_action }}" class="fcu-grid-form">
      {{ csrf_field }}
      <input type="hidden" name="next" value="{{ next_path }}">
      <input type="hidden" name="_grid_action" value="{{ 'update' if edit_row else 'create' }}">
      {% if edit_row %}<input type="hidden" name="_grid_row" value="{{ edit_row.id }}">{% endif %}
    </form>
    {% if spec.can_delete %}
      <form id="{{ gid }}-delform" method="post" action="{{ form_action }}" class="fcu-grid-form">
        {{ csrf_field }}
        <input type="hidden" name="next" value="{{ next_path }}">
        <input type="hidden" name="_grid_action" value="delete">
      </form>
    {% endif %}
  {% endif %}

  {% if spec.filterable %}
    <form id="{{ gid }}-filterform" method="get" action="{{ base_path }}" class="fcu-grid-form">
      {% for key, value in carry_args %}
        <input type="hidden" name="{{ key }}" value="{{ value }}">
      {% endfor %}
    </form>
  {% endif %}

  {% if config %}
    {# Read once at hydration. A parse failure leaves the table exactly as the
       server rendered it, which is a working read-only grid. ``tojson``
       rather than plain interpolation: a <script> body is raw text, so HTML
       escaping would corrupt the JSON while leaving "</script>" in a cell
       value able to close the element. #}
    <script type="application/json" data-fcu-grid-config>{{ config|tojson }}</script>
    {{ csrf_field }}
  {% endif %}

  <div class="fcu-grid-scroll">
    <table class="fcu-grid-table">
      {% if spec.caption %}<caption>{{ spec.caption }}</caption>{% endif %}
      <thead>
        <tr>
          {% for name, field in spec.columns %}
            <th scope="col" data-column="{{ name }}" data-type="{{ field.field_type }}">
              <a class="fcu-grid-sort" href="{{ sort_links[name].url }}"
                 title="{{ t['sort-desc'] if sort_links[name].dir == 'asc' else t['sort-asc'] }}">{{ sort_links[name].label }}{% if sort_links[name].dir == 'asc' %} <span aria-hidden="true">▲</span>{% elif sort_links[name].dir == 'desc' %} <span aria-hidden="true">▼</span>{% endif %}</a>
            </th>
          {% endfor %}
          {% if writable %}<th scope="col" class="fcu-grid-actions"></th>{% endif %}
        </tr>
        {% if spec.filterable %}
          <tr class="fcu-grid-filters">
            {% for name, field in spec.columns %}
              <th>
                <input class="fcu-grid-input" form="{{ gid }}-filterform"
                       name="{{ filter_names[name] }}" value="{{ filter_values[name] }}"
                       aria-label="{{ sort_links[name].label }}">
              </th>
            {% endfor %}
            {% if writable %}
              <th class="fcu-grid-actions">
                <button type="submit" form="{{ gid }}-filterform"
                        class="fcu-btn fcu-btn--secondary fcu-grid-btn">{{ t.apply }}</button>
              </th>
            {% endif %}
          </tr>
        {% endif %}
      </thead>
      <tbody data-grid-body>
        {% for row in rows %}
          {% if edit_row and row.id|string == edit_row.id|string %}
            <tr data-row="{{ row.id }}" class="fcu-grid-editing">
              {% for cell in row.cells %}
                <td data-column="{{ cell.name }}">
                  {{ cell_input(cell.field, cell.name, edit_row.prefill.get(cell.name),
                                gid ~ '-rowform', choices.get(cell.name),
                                edit_row.errors.get(cell.name), input_types) }}
                </td>
              {% endfor %}
              <td class="fcu-grid-actions">
                <button type="submit" form="{{ gid }}-rowform"
                        class="fcu-btn fcu-btn--primary fcu-grid-btn">{{ t.save }}</button>
                <a class="fcu-grid-btn" href="{{ cancel_url }}">{{ t.cancel }}</a>
              </td>
            </tr>
          {% else %}
            <tr data-row="{{ row.id }}"{% if row.version %} data-updated="{{ row.version }}"{% endif %}>
              {% for cell in row.cells %}
                <td data-column="{{ cell.name }}"
                    {%- if writable %} data-value="{{ cell.raw if cell.raw is not none else '' }}"{% endif %}>{{ cell.text }}</td>
              {% endfor %}
              {% if writable %}
                <td class="fcu-grid-actions">
                  <a class="fcu-grid-edit js-hide" href="{{ edit_urls[row.id|string] }}"
                     title="{{ t['edit-row'] }}" aria-label="{{ t['edit-row'] }}">✎</a>
                  {% if spec.can_delete %}
                    <button type="submit" form="{{ gid }}-delform" name="_grid_row"
                            value="{{ row.id }}" class="fcu-grid-delete js-hide"
                            up-confirm="{{ t['confirm-delete'] }}"
                            title="{{ t['delete-row'] }}" aria-label="{{ t['delete-row'] }}">×</button>
                  {% endif %}
                  {# Where the client puts its own delete button. It needs a
                     slot of its own because the cell is not empty: the no-JS
                     controls above are still here, merely hidden. #}
                  <span data-grid-actions></span>
                </td>
              {% endif %}
            </tr>
          {% endif %}
        {% else %}
          {% if not spec.columns %}
            <tr><td class="fcu-grid-empty">{{ t['no-columns'] }}</td></tr>
          {% endif %}
        {% endfor %}

        {% if new_row %}
          {# The blank add row. Hidden once scripting is present: the client
             maintains its own, which inserts one cell at a time. #}
          <tr class="fcu-grid-newrow js-hide">
            {% for name, field in spec.columns %}
              <td data-column="{{ name }}">
                {{ cell_input(field, name, new_row.prefill.get(name), gid ~ '-rowform',
                              choices.get(name), new_row.errors.get(name), input_types) }}
              </td>
            {% endfor %}
            <td class="fcu-grid-actions">
              <button type="submit" form="{{ gid }}-rowform"
                      class="fcu-btn fcu-btn--secondary fcu-grid-btn">{{ t.add }}</button>
            </td>
          </tr>
        {% endif %}
      </tbody>
    </table>
  </div>

  <div class="fcu-grid-footer">
    <span class="fcu-grid-count" data-grid-count>{{ count_text }}</span>
    {% if pages > 1 %}
      <nav class="fcu-grid-pager{% if writable %} js-hide{% endif %}" aria-label="{{ t.pagination }}">
        {% for link in page_links %}
          {% if link.current %}
            <span class="fcu-grid-page fcu-grid-page--current" aria-current="page">{{ link.label }}</span>
          {% else %}
            <a class="fcu-grid-page" href="{{ link.url }}">{{ link.label }}</a>
          {% endif %}
        {% endfor %}
      </nav>
    {% endif %}
  </div>
</div>