{{ extends 'otree/WaitPage.html' }}

{% block style %}
    <style>
        .progress {
            display: none;
        }
    </style>
{% endblock %}

{{ block content }}

<!-- Calc status card -->
<div class="card wait-card">
  <div class="card__header">
    <h4>Waiting for Others</h4>
    <div class="card__subtitle">This usually takes just a moment.</div>
  </div>
  <div class="card__body">
    <div class="wait-row">
      <div class="spinner" aria-hidden="true"></div>
      <div class="wait-text">
        <div id="tip-line" class="tip-line">Soon…</div>
        <div class="muted">This page will advance automatically when everyone is ready.</div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Card shell */
  .card{ max-width:900px; margin:16px auto; border:1px solid #e5e7eb; border-radius:10px; background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.06); }
  .card__header{ padding:14px 18px 10px 18px; border-bottom:1px solid #f0f2f5; background:#fafafa; border-radius:10px 10px 0 0; }
  .card__header h4{ margin:0; font-weight:600; font-size:18px; }
  .card__subtitle{ margin-top:4px; color:#6b7280; font-size:13px; }
  .card__body{ padding:16px 18px 18px 18px; }
  .muted{ color:#6b7280; }
  .small{ font-size:12px; }

  /* Calc card specifics */
  .wait-row{ display:flex; align-items:center; gap:14px; }
  .spinner{ width:28px; height:28px; border-radius:50%; border:3px solid #e5e7eb; border-top-color:#1e5bff; animation: spin 0.9s linear infinite; }
  @keyframes spin{ to { transform: rotate(360deg); } }
  .tip-line{ font-weight:600; color:#111827; margin-bottom:2px; }

  /* Shared btn */
  .btn{
    border-radius:8px; padding:8px 14px; font-weight:600;
    border:1px solid #dbe2f3; background:linear-gradient(180deg,#f4f7ff 0%,#e9efff 100%);
    color:#1e3a8a; box-shadow:0 4px 10px rgba(30,91,255,.08); cursor:pointer;
    transition: box-shadow .15s ease, background .15s ease, transform .04s ease;
  }
  .btn:hover{ background:linear-gradient(180deg,#eaf0ff 0%,#dee7ff 100%); }
  .btn:active{ transform: translateY(1px); }

  /* Tabs */
  .tabs{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
  .tab{
    padding:8px 12px; border-radius:8px; border:1px solid #e5e7eb;
    background:#f8fafc; cursor:pointer; font-weight:600; font-size:14px;
  }
  .tab.active{ background:#eef3ff; border-color:#dbe2f3; color:#1e3a8a; }
  .panel{ display:none; }
  .panel.active{ display:block; }

</style>

<script>

  // ---- Rotating tips ----
  (function(){
    const tips = [
      "Waiting for others…",
      "Enjoy the break…",
      "Almost there…"
    ];
    const el = document.getElementById('tip-line');
    let i = 0;
    setInterval(() => {
      i = (i + 1) % tips.length;
      if (el) el.textContent = tips[i];
    }, 4000);
  })();

</script>

{{ endblock }}