{% extends "base.html" %}

{% block main %}
<script type="module" src="{{ settings.root_path }}/js_dist/cells.mjs"></script>
<script type="module" src="{{ settings.root_path }}/js_dist/lens-controls.mjs"></script>
<script type="module" src="{{ settings.root_path }}/js_dist/viewer-components.mjs"></script>
<link rel="stylesheet" href="{{ settings.root_path }}/viewer.css">
<table class="viewer">
  <thead>
    <tr>
      {% for field in fields %}
      <th>
        <div class="padded-cell">{{ field.label.clone().unwrap_or(field.name.clone()) }}</div>
      </th>
      {% endfor %}
      <th>
        <add-selection-button columns="{{ all_columns | json }}"></add-selection-button>
      </th>
    </tr>
  </thead>
  <tbody>
    {% for row in rows %}
    <tr>
      {% for field in fields %}
      <td>
        {% match Value::get_from_row(row, field.name.as_str()) %}
        {% when Ok with (value) %}
        {{ value.to_html_string(field.display_type) | safe }}
        {% when Err with (err) %}
        <span class="pg-value-error">{{ err }}</span>
        {% endmatch %}
      </td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>
<lens-controls selections="{{ selections_json }}"></lens-controls>
{% endblock %}