{% extends "global/Page.html" %}
{% load otree static %}

{% block styles %}
<link rel="stylesheet" href="{% static 'threshold_hiring/style.css' %}">
{% endblock %}

{% block content %}
<div style="max-width:400px;margin:56px auto;text-align:center;">

  <!-- Round label -->
  <div style="font-family:var(--mono);font-size:10px;color:var(--text3);
              letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;">
    ROUND {{ round_number }} OF {{ num_task_rounds }} — COMPLETE
  </div>

  <div style="font-size:40px;margin-bottom:12px;
              animation:resultEnter 0.4s ease-out both;">
    ⏭️
  </div>

  <div style="font-family:var(--mono);font-size:20px;font-weight:500;
              letter-spacing:-0.01em;margin-bottom:20px;color:var(--text);">
    Preparing next round
  </div>

  <div class="th-result-detail" style="text-align:left;margin-bottom:24px;">

    <div class="th-rd-row">
      <span class="th-rd-label">Round complete</span>
      <span class="th-rd-val">{{ rounds_done }} / {{ num_task_rounds }}</span>
    </div>

    <div class="th-rd-row">
      <span class="th-rd-label">Rounds remaining</span>
      <span class="th-rd-val">{{ rounds_remaining }}</span>
    </div>

  </div>

  <!-- Next prompt -->
  <div class="th-footer" style="justify-content:center;">
    <div class="th-footer-info" style="text-align:center;">
      <strong>Round complete — continuing to round {{ next_round_number }}.</strong>
    </div>
    {{ next_button }}
  </div>

</div>
{% endblock %}