{% extends "base.html" %}
{% from "components/version_diff.html" import field_changes, value %}
{% from "components/side_panel.html" import panel_form_actions %}
{% block title %}Review details · REFRNCR{% endblock %}
{% block content %}
<h1>Review details</h1>
<div class='side-panel-view' data-side-panel-content data-panel-title='{{ "Record changes" if kind == "record" else "Field changes" }}' data-panel-eyebrow='Review · {{ dataset.name }}'>
  <div class='side-panel-body panel-sections'>{% include 'pages/datasets/concepts/_banner.html' %}
    {% if kind == 'field' %}
      <h2 id='diff-detail-heading' tabindex='-1' data-initial-focus data-panel-section-heading>{{ item.name }}</h2>
      {{ field_changes(item) }}
    {% else %}
      <h2 id='diff-detail-heading' tabindex='-1' data-initial-focus data-panel-section-heading>{{ item.record.status|status_label }} Record</h2>
      <dl class='detail-list'>
        <div><dt>Record ID</dt><dd>{{ item.record.id }}</dd></div>
        {% if item.record.before_identifier is not none %}<div><dt>Before identifier</dt><dd>{{ value(item.record.before_identifier) }}</dd></div>{% endif %}
        {% if item.record.after_identifier is not none %}<div><dt>After identifier</dt><dd>{{ value(item.record.after_identifier) }}</dd></div>{% endif %}
      </dl>
      <p>{{ item.total }} {{ 'changed values' if item.record.status == ChangeStatus.CHANGED else 'Fields' }} · Page {{ item.page }} · Up to 50 values per page.</p>
      <div class='table-scroll' role='region' aria-label='Record value changes' tabindex='0'>
        <table class='diff-table'><caption class='visually-hidden'>{{ item.record.status|status_label }} Record values</caption>
          <thead><tr><th scope='col'>Field</th><th scope='col'>Before</th><th scope='col'>After</th></tr></thead>
          <tbody>{% for change in item.values %}<tr>
            <th scope='row'>{{ change.field_name }}<span class='help-text'><br>{% if change.before_type and change.after_type and change.before_type != change.after_type %}Before: {{ change.before_type|datatype_label }} · After: {{ change.after_type|datatype_label }}{% else %}{{ (change.after_type or change.before_type)|datatype_label }}{% endif %}</span></th>
            <td>{{ value(change.before, absent=item.record.status == ChangeStatus.ADDED) }}</td>
            <td>{{ value(change.after, absent=item.record.status == ChangeStatus.REMOVED) }}</td>
          </tr>{% endfor %}</tbody>
        </table>
      </div>
      <nav class='pagination' aria-label='Value pages'>
        {% if item.page > 1 %}<a class='button button-secondary' href='{{ detail_page_url(item.page - 1) }}' data-panel-page>Previous values</a>{% endif %}
        {% if item.has_next %}<a class='button button-secondary' href='{{ detail_page_url(item.page + 1) }}' data-panel-page>Next values</a>{% endif %}
      </nav>
    {% endif %}
  </div>
  {% call panel_form_actions() %}<a class='button button-secondary' href='{{ return_url }}' data-panel-cancel>Close</a>{% endcall %}
</div>
{% endblock %}