{% extends "base.html" %}

{% block main %}
<link rel="stylesheet" href="{{ settings.root_path }}/css_dist/viewer.css">
<viewer-controller root-path="{{ settings.root_path }}" pkeys="{{ pkeys | json }}" fields="{{ fields | json }}">
  <table class="viewer">
    <thead>
      <tr>
        {% for field in fields %}
        <th width="{{ field.width_px }}">
          <div class="padded-cell">{{ field.label.clone().unwrap_or(field.name.clone()) }}</div>
        </th>
        {% endfor %}
        <th class="column-adder">
          <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 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 %}
    </tbody>
  </table>
  <viewer-hoverbar root-path="{{ settings.root_path }}"></viewer-hoverbar>
</viewer-controller>
<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 %}