{{ extends "global/Page.html" }}
{{ block title }}Finding Your Codebreaker{{ endblock }}

{{ block content }}
<div class="ds-page">

  <!-- ══ SPINNER STATE (shown on load) ══ -->
  <div id="matching-spinner-state" class="matching-screen">
    <div class="matching-spinner-large"></div>
    <div class="ds-title" style="margin-bottom:8px;">Finding Your Codebreaker</div>
    <p style="color:#718096;font-size:15px;">Please wait while we match you with an available codebreaker…</p>
  </div>

  <!-- ══ MATCHED STATE (hidden until spinner completes) ══ -->
  <div id="matching-matched-state" style="display:none;">

    <div style="text-align:center;margin-bottom:20px;">
      <div class="matched-badge">✓ &nbsp; Codebreaker Found</div>
      <div class="ds-title" style="margin-top:12px;">You've Been Matched!</div>
      <p style="color:#4a5568;">You have been matched with a human codebreaker for your session today.</p>
    </div>

    {{ if is_treatment }}
    <!-- ══ TREATMENT: Organisational pressure disclosure ══ -->

    <div class="card">
      <div class="system-notice">
        <div class="system-notice-header">
          📋 &nbsp; RESEARCH TEAM — OFFICIAL NOTICE
        </div>
        <div class="system-notice-body">
          <p>Please be aware of the following before your session begins.</p>
          <p>Your codebreaker has been assigned to <strong>back-to-back client sessions</strong> today
             by the research team. They do not have any control over their own schedule —
             the number of clients they serve and the timing of each session is determined
             entirely by the research team.</p>
          <p>Your codebreaker has already processed approximately
             <strong>{{ prior_sentences }} sentences</strong> across
             <strong>{{ prior_sessions }} prior sessions</strong> today before yours,
             and has <strong>{{ sessions_after }} additional sessions</strong> scheduled
             after yours.</p>
          <p>Your codebreaker will do their best to decode all sentences you submit,
             but <strong>cannot work beyond the 10-minute appointment time</strong> for your session.</p>
          <p style="margin-bottom:0;"><em>— The Research Team</em></p>
        </div>
      </div>

      <div class="schedule-wrap" style="margin-top:20px;">
        <div class="schedule-header">
          <span>📅 Your Codebreaker's Assigned Sessions Today</span>
        </div>
        <div class="schedule-legend">
          <span><span class="legend-dot legend-assigned"></span>Assigned by research team</span>
          <span><span class="legend-dot legend-current"></span>Your session (current)</span>
        </div>
        <div class="schedule-grid" style="grid-template-columns: repeat(6, 1fr);">
          {{ for slot in schedule_slots }}
            <div class="schedule-slot {{ if slot.is_current }}current{{ else }}assigned{{ endif }}">
              {{ if slot.is_current }}
                <strong>YOUR<br>SESSION</strong>
              {{ else }}
                Client&nbsp;{{ slot.n }}
              {{ endif }}
            </div>
          {{ endfor }}
        </div>
        <p style="font-size:12px;color:#718096;margin-top:10px;">
          6 consecutive client sessions &middot; No breaks scheduled &middot; All sessions assigned by research team
        </p>
      </div>
    </div>

    {{ else }}
    <!-- ══ CONTROL: Neutral matched state ══ -->
    <div class="card">
      <p>Your codebreaker is ready for your session. Click <strong>Next</strong> when
         you are ready to start your 10-minute session.</p>
    </div>
    {{ endif }}

    <div class="callout green" style="margin-top:16px;">
      <strong>Tip:</strong> Start with your <strong>longest sentences first</strong>
      to maximise your earning potential. You earn ${{ C.EARNINGS_PER_WORD }} per correctly decoded word.
    </div>

    <p style="margin-top:16px;">Click <strong>Next</strong> when you are ready.
       The 10-minute timer will start immediately.</p>

    <div id="next-btn-wrap">
      {{ next_button }}
    </div>
  </div>

</div>

<script>
  document.getElementById('next-btn-wrap').style.display = 'none';

  setTimeout(function () {
    document.getElementById('matching-spinner-state').style.display = 'none';
    document.getElementById('matching-matched-state').style.display  = 'block';
    document.getElementById('next-btn-wrap').style.display           = 'block';
  }, 6000);
</script>
{{ endblock }}