{% extends "layout/basic.html" %}
{% block content %}
<div class="row">
  <div class="medium-12 columns">
    <div class="section">
      <div class="section__header">
        <h1 class="section__title">{{ _('Submission comparison') }}: {{ pidDisplay }} — {{ title }}</h1>
        <div class="section__tools">
          <a class="typo-a" href="{{ url('stats_similarity') }}">« {{ _('Copy alert') }}</a>
        </div>
      </div>
      <div class="section__body">
        <table style="width:100%;table-layout:fixed;border-collapse:collapse;font-family:monospace;font-size:12px;">
          <thead>
            <tr style="background:#f0f3f5;">
              <th style="width:50%;padding:6px;text-align:left;">
                <a class="typo-a" href="{{ url('stats_user', uid=aUid) }}">{{ aName }}</a>
                {% if aLang %}<span class="supplementary">({{ aLang }})</span>{% endif %}
                {% if not hasA %}<span class="record-status--text fail">{{ _('No code') }}</span>{% endif %}
              </th>
              <th style="width:50%;padding:6px;text-align:left;border-left:1px solid #dde2e6;">
                <a class="typo-a" href="{{ url('stats_user', uid=bUid) }}">{{ bName }}</a>
                {% if bLang %}<span class="supplementary">({{ bLang }})</span>{% endif %}
                {% if not hasB %}<span class="record-status--text fail">{{ _('No code') }}</span>{% endif %}
              </th>
            </tr>
          </thead>
          <tbody>
            {%- for r in rows -%}
            <tr>
              <td style="padding:1px 6px;white-space:pre-wrap;word-break:break-word;{% if r.type == 'chg' and r.left != null %}background:rgba(251,85,85,0.12);{% endif %}">{% if r.left != null %}{{ r.left }}{% endif %}</td>
              <td style="padding:1px 6px;white-space:pre-wrap;word-break:break-word;border-left:1px solid #dde2e6;{% if r.type == 'chg' and r.right != null %}background:rgba(37,173,64,0.12);{% endif %}">{% if r.right != null %}{{ r.right }}{% endif %}</td>
            </tr>
            {%- endfor -%}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}