{% 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">{{ _('Live class mode') }} <span id="liveDot" class="fork-dot"></span></h1>
        <div class="section__tools">
          <a class="typo-a" href="{{ url('stats') }}">« {{ _('Submission Statistics') }}</a>
        </div>
      </div>
      <div class="section__body">
        <form method="get" class="inline">
          <label class="inline">{{ _('Problem') }}
            <select name="pid" class="select" onchange="this.form.submit()">
              {%- for p in problems -%}<option value="{{ p.docId }}"{% if p.docId == pid %} selected{% endif %}>{{ p.label }}</option>{%- endfor -%}
            </select>
          </label>
          {% if groups.length %}
          <label class="inline fork-inline-filter">{{ _('Group') }}
            <select name="group" class="select" onchange="this.form.submit()">
              <option value="">{{ _('All students') }}</option>
              {%- for g in groups -%}<option value="{{ g.name }}"{% if g.name == group %} selected{% endif %}>{{ g.name }}</option>{%- endfor -%}
            </select>
          </label>
          {% endif %}
          <noscript><button type="submit" class="rounded button">{{ _('Filter') }}</button></noscript>
        </form>
      </div>
      <div class="section__body">
        <div class="fork-row fork-row--gap-lg fork-mb">
          <span><b id="cSolved" class="fork-bignum fork-bignum--ok">0</b> / <span id="cTotal">0</span> {{ _('Solved') }}</span>
          <span><b id="cTrying" class="fork-bignum fork-bignum--warn">0</b> {{ _('Trying') }}</span>
          <span><b id="cIdle" class="fork-bignum fork-bignum--idle">0</b> {{ _('Not started') }}</span>
        </div>
        <div id="liveFirst" class="fork-callout fork-callout--success fork-mb" style="display:none;"></div>
        <div id="liveGrid" class="fork-row fork-row--wrap"></div>
      </div>
    </div>
    <div class="section">
      <div class="section__header"><h1 class="section__title">{{ _('Recent submissions') }}</h1></div>
      <div class="section__body no-padding">
        <table class="data-table"><tbody id="liveFeed"></tbody></table>
      </div>
    </div>
  </div>
</div>
<script>
(function () {
  var dataUrl = "{{ url('stats_live_data') }}";
  var pid = "{{ pid }}";
  var group = "{{ group or '' }}";
  if (!pid) return;
  var grid = document.getElementById('liveGrid');
  var solvedPrev = {};
  function statusClass(s) { return s === 'solved' ? 'fork-chip--solved' : s === 'trying' ? 'fork-chip--trying' : 'fork-chip--idle'; }
  function poll() {
    var qs = dataUrl + '?pid=' + encodeURIComponent(pid) + (group ? '&group=' + encodeURIComponent(group) : '');
    fetch(qs, { headers: { Accept: 'application/json' }, credentials: 'same-origin' })
      .then(function (r) { return r.json(); })
      .then(function (d) {
        document.getElementById('cSolved').textContent = d.solved;
        document.getElementById('cTotal').textContent = d.total;
        document.getElementById('cTrying').textContent = d.trying;
        document.getElementById('cIdle').textContent = d.idle;
        grid.innerHTML = '';
        (d.rows || []).forEach(function (row) {
          var el = document.createElement('span');
          el.className = 'fork-chip ' + statusClass(row.status);
          el.title = row.attempts + ' {{ _('attempts') }}';
          el.textContent = (row.first ? '🥇 ' : '') + row.uname + (row.attempts ? ' (' + row.attempts + ')' : '');
          if (row.status === 'solved' && !solvedPrev[row.uid]) el.classList.add('fork-flash');
          grid.appendChild(el);
        });
        solvedPrev = {};
        (d.rows || []).forEach(function (row) { if (row.status === 'solved') solvedPrev[row.uid] = true; });
        // Primero en resolver
        var first = document.getElementById('liveFirst');
        if (d.firstSolver) { first.style.display = ''; first.textContent = '🥇 {{ _('First to solve') }}: ' + d.firstSolver; } else { first.style.display = 'none'; }
        // Feed de envíos
        var feed = document.getElementById('liveFeed');
        feed.innerHTML = '';
        (d.feed || []).forEach(function (f) {
          var tr = document.createElement('tr');
          var c = f.accepted ? 'pass' : 'fail';
          tr.innerHTML = '<td>' + f.uname + '</td><td><span class="record-status--text ' + c + '">' + f.statusText + '</span></td><td class="supplementary">' + new Date(f.at).toLocaleTimeString() + '</td>';
          feed.appendChild(tr);
        });
        var dot = document.getElementById('liveDot');
        dot.style.opacity = '0.3'; setTimeout(function () { dot.style.opacity = '1'; }, 300);
      })
      .catch(function () {});
  }
  poll();
  setInterval(poll, 4000);
})();
</script>
{% endblock %}