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

{% block styles %}
<link rel="stylesheet" href="{% static 'threshold_hiring/style.css' %}">
<style>
  body { --condition-stripe: {% if condition == 'aware' %}#B5451B{% else %}#1D3D5C{% endif %}; }
</style>
{% endblock %}

{% block content %}
<div class="th-result-card" style="max-width: 620px;">

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

  <div class="th-result-icon">
    {% if top_catch_rate == 100 %}🎯{% else %}📊{% endif %}
  </div>

  <div class="th-result-title">{{ top_catch_rate }}% top-catch rate</div>

  <div class="th-result-prelude">
    Here's how your hiring decisions compared to the ground truth across all {{ num_task_rounds }} rounds.
  </div>

  <div class="th-optimal-note" style="margin-bottom:16px;">
    Bonus basis: your payment depends on your top-catching rate across the {{ num_task_rounds }} main rounds.
  </div>

  <div class="th-result-detail">
    <div class="th-rd-row">
      <span class="th-rd-label">Correct hires</span>
      <span class="{% if total_correct == num_task_rounds %}th-rd-good{% elif total_correct == 0 %}th-rd-bad{% else %}th-rd-val{% endif %}">{{ total_correct }} / {{ num_task_rounds }}</span>
    </div>
    <div class="th-rd-row">
      <span class="th-rd-label">Top-catch rate</span>
      <span class="th-rd-val">{{ top_catch_rate }}%</span>
    </div>
    <div class="th-rd-row">
      <span class="th-rd-label">Bonus earned</span>
      <span class="th-rd-val">{{ bonus_earned }}</span>
    </div>
    <div class="th-rd-row">
      <span class="th-rd-label">Avg. quality loss</span>
      <span class="{% if avg_loss == 0 %}th-rd-good{% elif avg_loss > 5 %}th-rd-bad{% else %}th-rd-val{% endif %}">{{ avg_loss }}</span>
    </div>
  </div>

</div>

<div style="max-width: 620px; margin: 0 auto; padding: 0 0 24px;">
  <div class="th-section-label" style="margin: 0 0 10px;">ROUND-BY-ROUND BREAKDOWN</div>

  <div class="th-s2-grid-head results" style="grid-template-columns: 54px 72px 60px 90px 120px 100px 70px 70px;">
    <span>Round</span>
    <span>K</span>
    <span>Hired</span>
    <span>Quality</span>
    <span>Best available</span>
    <span>Best quality</span>
    <span>Loss</span>
    <span>Result</span>
  </div>

  {% for r in rounds %}
  <div class="th-s2-row results" style="grid-template-columns: 54px 72px 60px 90px 120px 100px 70px 70px;">
    <span class="th-score-val" style="font-size:13px;">{{ r.round_number }}</span>
    <span class="th-score-val" style="font-size:13px;">{{ r.top_k }}</span>
    <span class="th-cand-label" style="margin-left:0;">{{ r.hired_label }}</span>
    <span class="{% if r.is_correct_hire %}th-rd-good{% else %}th-rd-bad{% endif %}">{{ r.quality_of_hire }}</span>
    <span class="th-cand-label" style="margin-left:0;">{{ r.best_label }}</span>
    <span class="th-score-val" style="font-size:13px;">{{ r.best_available_quality }}</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-footer">
    <div class="th-footer-info">Your full {{ num_task_rounds }}-round record is summarized above.</div>
    {{ next_button }}
  </div>
</div>
{% endblock %}