{% 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 style="max-width:480px;margin:72px auto;text-align:center;">

  <!-- Icon -->
  <div style="font-size:52px;margin-bottom:20px;">✓</div>

  <!-- Title -->
  <div style="font-family:var(--mono);font-size:22px;font-weight:500;
              letter-spacing:-0.01em;margin-bottom:12px;color:var(--text);">
    You're all done.
  </div>

  <!-- Soft closing line -->
  <div style="font-size:13px;font-weight:300;font-style:italic;
              color:var(--text2);line-height:1.6;margin-bottom:32px;">
    Thank you for participating. Your responses have been recorded.
  </div>

  <!-- Final score summary -->
  <div class="th-result-detail" style="text-align:left;margin-bottom:28px;">

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

    <div class="th-rd-row">
      <span class="th-rd-label">Correct hires</span>
      <span class="th-rd-val">{{ total_correct }} / {{ num_task_rounds }}</span>
    </div>

    <div class="th-rd-row">
      <span class="th-rd-label">Top-catch rate</span>
      <span class="
        {% if top_catch_rate >= 75 %}th-rd-good
        {% elif top_catch_rate >= 40 %}th-rd-val
        {% else %}th-rd-bad{% endif %}
      ">{{ top_catch_rate }}%</span>
    </div>

    <div class="th-rd-row">
      <span class="th-rd-label">Reward rule</span>
      <span class="th-rd-val">Proportional to top-catch rate</span>
    </div>

  </div>

  <!-- Close instruction -->
  <div style="
    background:var(--surface2);
    border:1px solid var(--border);
    border-radius:6px;
    padding:16px 20px;
    font-family:var(--mono);
    font-size:12px;
    color:var(--text2);
    line-height:1.8;
  ">
    You may now <strong style="color:var(--text);">close this window</strong>.<br>
    <span style="color:var(--text3);">No further action is required.</span>
  </div>

</div>
{% endblock %}