{% extends "common-content.html" %}

{% block js_media %}
  <script type="text/javascript">
    $(function () {
      $('a.sub-case-status').featherlight($('.partial-output-window'), {
        afterOpen: function () {
          var $parent = this.$currentTarget.parent();
          var partial = $parent.attr('data-partial-output');
          this.$instance.find('.partial-output-window').find('code').text(partial).end().show();
        }
      });
    });
  </script>
  <script type="text/javascript">
  </script>
{% endblock %}

{% block media %}
  <style>
    #content-body {
      overflow-x: auto;
      padding-bottom: 0;
    }

    .sub-id {
      width: 4em;
      min-width: 4em;
    }

    .sub-username {
      width: 5em;
    }

    .sub-result {
      width: 3em;
    }

    .sub-language {
      width: 6em;
    }

    .sub-date {
      min-width: 8em;
    }

    .sub-case {
      min-width: 3em;
    }

    .sub-case-status {
      text-decoration: underline;
    }
  </style>
{% endblock %}

{% block body %}
  <table id="case-table" class="table">
    <thead>
      <tr>
        <th class="sub-id">ID</th>
        <th class="sub-username">Username</th>
        <th class="sub-result">Result</th>
        <th class="sub-language">Language</th>
        <th class="sub-date">Date</th>
        {% for case in range(num_cases) %}
          <th class="sub-case">{{ loop.index }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for sub in submissions %}
        <tr>
          <td><a href="{{ url('submission_source', sub.id) }}">{{ sub.id }}</a></td>
          <td>{{ link_user(sub.user) }}</td>
          <td><span class="case-{{ sub.result }}">{{ sub.result }}</span></td>
          <td>{{ sub.language.name }}</td>
          <td><span class="time">{{ relative_time(sub.date) }}</span></td>
          {% for case in sub.test_cases.all() %}
            <td data-partial-output="{{ case.output }}">
              {% if case.status == 'SC' %}
                <span class="case-SC">---</span>
              {% else %}
                <a href="javascript:void(0);" class="sub-case-status case-{{ case.status }}">
                  {% if case.status == 'AC' %}
                    {{ case.time|floatformat(2) }}
                  {% else %}
                    {{ case.status }}
                  {% endif %}
                </a>
              {% endif %}
            </td>
          {% endfor %}
        </tr>
      {% endfor %}
    </tbody>
  </table>
  <div style="display: none" class="partial-output-window"><pre><code></code></pre></div>
{% endblock %}