{% extends "base.html" %}

{% block main %}
<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>
<link rel="stylesheet" href="{{ settings.root_path }}/viewer.css">
<viewer-controller root-path="{{ settings.root_path }}">
  <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 row in rows %}
      <tr data-pkey="{{ row.pkeys | json }}">
        {% for field in fields %}
        <td>
          {% match field.get_value_encodable(row.data) %}
          {% when Ok with (encodable) %}
          <{{ field.webc_tag() | safe }}
            {% for (k, v) in field.webc_custom_attrs() %}
            {{ k }}="{{ v }}"
            {% endfor %}
            column="{{ field.name }}"
            value="{{ encodable | json }}"
            class="cell"
          >
            {{ field.render(encodable) | safe }}
          </{{ field.webc_tag() | safe }}
          {% when Err with (err) %}
          <span class="pg-value-error">{{ err }}</span>
          {% endmatch %}
        </td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</viewer-controller>
{% endblock %}