{% 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:620px;margin:56px auto;text-align:center;">

  <div style="font-family:var(--mono);font-size:10px;color:var(--text3);
              letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;">
    PRACTICE SUMMARY
  </div>

  <div style="font-family:var(--mono);font-size:20px;font-weight:500;
              letter-spacing:-0.01em;margin-bottom:14px;color:var(--text);">
    Completed {{ num_practice_rounds }} practice rounds
  </div>

  <div class="th-result-detail" style="text-align:left;margin-bottom:20px;">
    <div class="th-rd-row">
      <span class="th-rd-label">Practice top-catching rate</span>
      <span class="th-rd-val">{{ practice_top_catch_rate }}%</span>
    </div>
    <div class="th-rd-row">
      <span class="th-rd-label">Practice hits</span>
      <span class="th-rd-val">{{ practice_total_correct }} / {{ num_practice_rounds }}</span>
    </div>
    <div class="th-rd-row">
      <span class="th-rd-label">Does practice affect bonus?</span>
      <span class="th-rd-val" style="color:var(--text3);">No — main rounds only</span>
    </div>
  </div>

  <div class="th-section-label" style="text-align:left;margin-bottom:10px;">PER-ROUND OUTCOME</div>
  <div class="th-s2-grid-head results" style="grid-template-columns: 70px 80px 80px 100px 100px 80px;">
    <span>Round</span>
    <span>Result</span>
    <span>Hired</span>
    <span>Best avail.</span>
    <span>Quality gap</span>
    <span>Hit?</span>
  </div>
  {% for r in rounds %}
  <div class="th-s2-row results" style="grid-template-columns: 70px 80px 80px 100px 100px 80px;">
    <span class="th-score-val" style="font-size:13px;">{{ r.round_number }}</span>
    <span class="{% if r.is_correct_hire %}th-rd-good{% else %}th-rd-bad{% endif %}">{% if r.is_correct_hire %}Hit{% else %}Miss{% endif %}</span>
    <span class="th-cand-label" style="margin-left:0;">{{ r.hired_label }}</span>
    <span class="th-cand-label" style="margin-left:0;">{{ r.best_label }}</span>
    <span class="{% if r.quality_loss == 0 %}th-rd-good{% else %}th-rd-bad{% endif %}">{{ r.quality_loss }}</span>
    <span class="{% if r.is_correct_hire %}th-rd-good{% else %}th-rd-bad{% endif %}">{% if r.is_correct_hire %}✓{% else %}✗{% endif %}</span>
  </div>
  {% endfor %}

  <div class="th-result-detail" style="text-align:left;margin:20px 0 24px;">
    <div class="th-rd-row"><span class="th-rd-label">Key learning</span><span class="th-rd-val">Scores with more signals are more reliable</span></div>
    <div class="th-rd-row"><span class="th-rd-label">In Stage 2</span><span class="th-rd-val">Interview scores can move rankings</span></div>
    <div class="th-rd-row"><span class="th-rd-label">Final hire</span><span class="th-rd-val">Uses both résumé and interview evidence</span></div>
  </div>

  <div class="th-footer" style="justify-content:center;">
    <div class="th-footer-info" style="text-align:center;">
      Practice is complete. The <strong>{{ num_task_rounds }} main rounds</strong> begin next.
      Only main-round top-catching counts toward your bonus.
    </div>
    {{ next_button }}
  </div>

</div>
{% endblock %}