{% extends "base.html" %}

{% block main %}
<link rel="stylesheet" href="{{ settings.root_path }}/css_dist/viewer.css">
<div class="page-grid">
  <div class="page-grid__toolbar"></div>
  <div class="page-grid__sidebar">
    {{ navbar | safe }}
  </div>
  <main class="page-grid__main">
    <viewer-controller root-path="{{ settings.root_path }}" pkeys="{{ pkeys | json }}" fields="{{ fields | json }}">
      <table class="viewer-table">
        <thead>
          <tr>
            {% for field in fields %}
            <th class="viewer-table__column-header" width="{{ field.width_px }}" scope="col">
              {{ field.label.clone().unwrap_or(field.name.clone()) }}
            </th>
            {% endfor %}
            <th class="viewer-table__actions-header">
              <field-adder root-path="{{ settings.root_path }}" columns="{{ all_columns | json }}"></field-adder>
            </th>
          </tr>
        </thead>
        <tbody>
          {% for (i, row) in rows.iter().enumerate() %}
          {# TODO: store primary keys in a Vec separate from rows #}
          <tr>
            {% for (j, field) in fields.iter().enumerate() %}
            {# Setting max-width is required for overflow to work properly. #}
            <td
              class="viewer-table__td"
              style="width: {{ field.width_px }}px; max-width: {{ field.width_px }}px;"
            >
              {% match field.get_value_encodable(row) %}
              {% when Ok with (encodable) %}
              <{{ field.webc_tag() | safe }}
                {% for (k, v) in field.webc_custom_attrs() %}
                {{ k }}="{{ v }}"
                {% endfor %}
                row="{{ i }}"
                column="{{ j }}"
                value="{{ encodable | json }}"
                class="cell"
              >
                {{ encodable.inner_as_value() | json }}
              </{{ field.webc_tag() | safe }}
              {% when Err with (err) %}
              <span class="pg-value-error">{{ err }}</span>
              {% endmatch %}
            </td>
            {% endfor %}
          </tr>
          {% endfor %}
          <tr class="viewer-table__insertable-row">
            {% for (i, field) in fields.iter().enumerate() %}
            <td class="viewer-table__td viewer-table__td--insertable">
              <{{ field.webc_tag() | safe }}
                {% for (k, v) in field.webc_custom_attrs() %}
                {{ k }}="{{ v }}"
                {% endfor %}
                row="{{ pkeys.len() }}"
                column="{{ i }}"
                class="cell"
                insertable="true"
                value="{{ field.field_type.default_for_insert()? | json }}"
              >
              </{{ field.webc_tag() | safe }}
            </td>
            {% endfor %}
          </tr>
        </tbody>
      </table>
      <viewer-hoverbar root-path="{{ settings.root_path }}"></viewer-hoverbar>
    </viewer-controller>
  </main>
</div>
<script type="module" src="{{ settings.root_path }}/js_dist/field_adder_component.mjs"></script>
<script type="module" src="{{ settings.root_path }}/js_dist/viewer_controller_component.mjs"></script>
<script type="module" src="{{ settings.root_path }}/js_dist/cell_text_component.mjs"></script>
<script type="module" src="{{ settings.root_path }}/js_dist/cell_uuid_component.mjs"></script>
<script type="module" src="{{ settings.root_path }}/js_dist/viewer_hoverbar_component.mjs"></script>
{% endblock %}