{% extends "base.html" %}
{% block title %}vezir — session {{ row.id }}{% endblock %}
{% block content %}
<p><a href="/">&larr; all sessions</a></p>
<h1>{{ row.title or row.id }}</h1>
<p class="muted">scribed by <strong>{{ row.github }}</strong> at {{ row.created_at }}</p>

{# Derive a "local-only" UI state: the job completed but the user opted #}
{# out of sync at upload time, so artifacts are on the vezir server but #}
{# never pushed to the configured destination repo.  The retroactive    #}
{# /session/<id>/sync endpoint flips sync_enabled and re-runs sync.     #}
{% set is_local_only = row.status == 'done' and row.sync_enabled == 0 %}

<p>
  Status:
  {% if is_local_only %}
    <span id="status-badge" class="badge local-only">local-only</span>
  {% else %}
    <span id="status-badge" class="badge {{ row.status }}">{{ row.status }}</span>
  {% endif %}
</p>

{% if row.status == 'needs_labeling' %}
  <p><a href="/label/{{ row.id }}" class="cta">Label speakers</a></p>
{% endif %}

{% if is_local_only %}
<form method="post" action="/session/{{ row.id }}/sync" style="margin: 1em 0;">
  <button type="submit" class="cta">Sync now</button>
  <span class="muted">
    Push this session's artifacts to the configured destination repo.
  </span>
</form>
{% endif %}

{% if row.error %}
<div class="error-block">
  <h3>Error</h3>
  <pre>{{ row.error }}</pre>
</div>
{% endif %}

{% if row.artifacts_dict %}
<h2>Artifacts</h2>
<ul>
  {% for kind, name in row.artifacts_dict.items() %}
    <li><a href="/artifact/{{ row.id }}/{{ name }}">{{ kind }}</a> — {{ name }}</li>
  {% endfor %}
</ul>
{% endif %}

{% if row.status in ('queued', 'transcribing', 'syncing', 'needs_labeling') %}
<script>
(function() {
  var currentStatus = "{{ row.status }}";
  var terminal = {"done": true, "error": true};
  var interval = setInterval(function() {
    fetch(window.location.href, {credentials: "same-origin"})
      .then(function(r) { return r.text(); })
      .then(function(html) {
        var parser = new DOMParser();
        var doc = parser.parseFromString(html, "text/html");
        var newBadge = doc.getElementById("status-badge");
        if (!newBadge) return;
        var newStatus = newBadge.textContent.trim();
        if (newStatus !== currentStatus) {
          // Status changed -- full reload to pick up new content
          clearInterval(interval);
          window.location.reload();
        }
      })
      .catch(function() {});  // swallow network errors, retry next tick
  }, 5000);
})();
</script>
{% endif %}
{% endblock %}