{% 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-intro-card" style="max-width: 560px;">

  {% if condition == 'aware' %}
    <div class="th-banner aware">
      You were in the K-aware condition — each round, K was drawn between {{ top_k_low }} and {{ top_k_high }} and shown during Stage 1.
    </div>
  {% else %}
    <div class="th-banner blind">
      You were in the K-blind condition — each round, K was drawn between {{ top_k_low }} and {{ top_k_high }} but not disclosed during Stage 1.
    </div>
  {% endif %}

  <div class="th-task-box" style="margin-bottom: 20px;">
    <div class="th-section-label" style="margin-bottom:10px;">STRATEGY REFLECTION</div>
    <p style="font-size:13px;color:var(--text2);margin-bottom:10px;line-height:1.6;">Think back to how you allocated your {{ total_clicks }} clicks in Stage 1.</p>
    <p style="font-size:13px;color:var(--text2);margin-bottom:12px;line-height:1.6;">Describe your strategy: which candidates did you focus on, why, and how did you decide when to stop clicking on a candidate and move to another?</p>

    <textarea name="strategy_explanation"
          id="id_strategy_explanation"
          rows="7"
          placeholder="e.g. I concentrated my clicks on candidates I expected to finish in the top set because…"
          style="width:100%;
                 font-family: var(--sans);
                 font-size: 13.5px;
                 line-height: 1.55;
                 color: var(--text);
                 background: var(--surface);
                 border: 1px solid var(--border);
                 border-radius: 6px;
                 padding: 12px 14px;
                 resize: vertical;
                 outline: none;
                 transition: border-color 0.15s;"
          onfocus="this.style.borderColor='var(--accent2)'"
          onblur="this.style.borderColor='var(--border)'">{{ strategy_explanation }}</textarea>

    <div style="text-align:right; margin-top:6px;">
      <span id="char-count" style="font-family:var(--mono);font-size:11px;color:var(--text3);">0 characters</span>
    </div>
  </div>

  <div class="th-footer">
    <div class="th-footer-info">Your response is recorded. Any non-empty response is accepted.</div>
    {{ next_button }}
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
const ta = document.getElementById('id_strategy_explanation');
const cc = document.getElementById('char-count');

function updateCount() {
  cc.textContent = ta.value.length + ' characters';
  cc.style.color = ta.value.trim().length >= 1
    ? 'var(--green)' : 'var(--text3)';
}

ta.addEventListener('input', function() {
  cc.textContent = this.value.length + ' characters';
  cc.style.color = this.value.trim().length >= 1
    ? 'var(--green)' : 'var(--text3)';
});

updateCount();
</script>
{% endblock %}