{# An editable pivot (components/pivot.py). One form; every box posts what it
   holds, so the form is the state of the grid. Each input is named by its row
   and column key and labelled by both headings (aria-labelledby). #}
{# A total: a PivotCell whose value is a slot. Its own tone wins over the
   column's, as for an input cell. #}
{% macro total_cell(t, column=none, extra_class="") -%}
  {%- set tone = t.tone or (column.tone if column else none) -%}
  <td class="fcu-pivot-total {{ extra_class }} {% if tone %}fcu-pivot--{{ tone }}{% endif %} {{ column.css_class if column and column.css_class else '' }} {{ t.css_class or '' }}"
      {%- if t.title %} title="{{ t.title }}"{% endif %}>{{ slot(t.value) }}</td>
{%- endmacro %}
<div id="{{ base }}" class="fcu-pivot {{ c.css_class if c.css_class }}">
  <form method="post" action="{{ c.action }}" class="fcu-pivot-form"
        {% if c.autosubmit %}up-submit up-autosubmit up-watch-event="change" up-target="{{ target }}"
        up-focus="keep" up-scroll="false" data-fcu-keep-unsent{% elif c.target %}up-submit up-target="{{ target }}"{% endif %}>
    {{ csrf_field() }}
    {% for key, value in hidden %}<input type="hidden" name="{{ key }}" value="{{ value }}">{% endfor %}
    {% for row in c.rows %}<input type="hidden" name="{{ c.name }}.row" value="{{ row.key }}">{% endfor %}
    {% for column in c.columns %}<input type="hidden" name="{{ c.name }}.col" value="{{ column.key }}">{% endfor %}
    <div class="fcu-pivot-scroll">
      <table class="fcu-table fcu-pivot-table">
        {% if c.caption %}<caption class="fcu-sr-only">{{ c.caption }}</caption>{% endif %}
        <thead>
          <tr>
            <th scope="col" class="fcu-pivot-corner">{{ c.corner or "" }}</th>
            {% for column in c.columns %}
              <th scope="col" class="fcu-pivot-colhead {% if column.tone %}fcu-pivot--{{ column.tone }}{% endif %} {{ column.css_class or '' }}">
                <span class="fcu-pivot-label" id="{{ base }}-c{{ loop.index0 }}">
                  {%- if column.href %}<a href="{{ column.href }}">{{ column.label }}</a>{% else %}{{ column.label }}{% endif -%}
                </span>
                {% if column.sublabel %}<span class="fcu-pivot-sublabel">{{ column.sublabel }}</span>{% endif %}
                {% if column.extra is not none %}<div class="fcu-pivot-extra">{{ slot(column.extra) }}</div>{% endif %}
              </th>
            {% endfor %}
            {% if show_totals %}
              <th scope="col" class="fcu-pivot-total">
                <span class="fcu-pivot-label">{{ labels.total }}</span>
                {% if c.total_extra is not none %}<div class="fcu-pivot-extra">{{ slot(c.total_extra) }}</div>{% endif %}
              </th>
            {% endif %}
          </tr>
        </thead>
        <tbody>
          {% for row in c.rows %}
            {% set i = loop.index0 %}
            <tr class="{{ row.css_class or '' }}">
              <th scope="row" class="fcu-pivot-rowhead">
                <span class="fcu-pivot-label" id="{{ base }}-r{{ i }}">
                  {%- if row.href %}<a href="{{ row.href }}">{{ row.label }}</a>{% else %}{{ row.label }}{% endif -%}
                </span>
                {% if row.extra is not none %}{{ slot(row.extra) }}{% endif %}
                {% if row.sublabel %}<span class="fcu-pivot-sublabel">{{ row.sublabel }}</span>{% endif %}
              </th>
              {% for column in c.columns %}
                {% set j = loop.index0 %}
                {% set cell = grid[i][j] %}
                {% set tone = cell.tone or column.tone %}
                <td class="fcu-pivot-cell {% if tone %}fcu-pivot--{{ tone }}{% endif %} {{ column.css_class or '' }} {{ cell.css_class or '' }}"
                    {% if cell.title %}title="{{ cell.title }}"{% endif %}>
                  {% if cell.editable %}
                    <input class="fcu-form-control fcu-pivot-input" type="text" autocomplete="off"
                           inputmode="{{ c.input_mode }}"
                           id="{{ base }}-{{ i }}-{{ j }}" name="{{ input_name(row, column) }}"
                           value="{{ cell.value if cell.value is not none else '' }}"
                           {% if cell.placeholder %}placeholder="{{ cell.placeholder }}"{% endif %}
                           {% if cell.label %}aria-label="{{ cell.label }}"{% else %}aria-labelledby="{{ base }}-r{{ i }} {{ base }}-c{{ j }}"{% endif %}
                           {% if cell.readonly %}readonly{% endif %}>
                  {% else %}
                    <span class="fcu-pivot-static">{{ cell.value if cell.value is not none else '' }}</span>
                  {% endif %}
                  {% if cell.extra is not none %}{{ slot(cell.extra) }}{% endif %}
                </td>
              {% endfor %}
              {% if show_totals %}{{ total_cell(row_totals[i]) }}{% endif %}
            </tr>
          {% else %}
            {% if c.empty %}
              <tr><td class="fcu-pivot-empty" colspan="{{ c.columns|length + (2 if show_totals else 1) }}">{{ c.empty }}</td></tr>
            {% endif %}
          {% endfor %}
        </tbody>
        {% if show_totals %}
          <tfoot>
            <tr>
              <th scope="row" class="fcu-pivot-rowhead">{{ labels.footer }}</th>
              {% for column in c.columns %}{{ total_cell(column_totals[loop.index0], column) }}{% endfor %}
              {{ total_cell(grand, none, "fcu-pivot-grand") }}
            </tr>
          </tfoot>
        {% endif %}
      </table>
    </div>
    {% if c.save or c.controls %}
      <div class="fcu-pivot-controls">
        {% if c.save %}<button type="submit" class="fcu-btn fcu-btn--primary fcu-pivot-save">{{ labels.save }}</button>{% endif %}
        {% for control in c.controls %}{{ slot(control) }}{% endfor %}
      </div>
    {% endif %}
  </form>
</div>