{% extends "base.html" %}

{% block title %}Session — Lab Portal{% endblock %}

{% block header %}
<div class="page-header">
  <h1>Experiment Session</h1>
  <p>Join the current oTree session from this machine.</p>
</div>
{% endblock %}

{% block extra_css %}
<style>
  .session-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  @media (max-width: 900px) { .session-grid { grid-template-columns: 1fr; } }

  .session-link-card {
    grid-column: 1 / -1;
  }
  .session-link-card .url-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
  }
  .url-bar code {
    flex: 1;
    padding: .55rem .85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .88rem;
    color: var(--accent);
    word-break: break-all;
  }
  .url-bar .btn { white-space: nowrap; }

  .info-card {
    margin-top: .25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: var(--text-dim);
    font-size: .85rem;
    line-height: 1.5;
  }
  .info-card .icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem; }
  .info-card ol { padding-left: 1.1rem; }
  .info-card li { margin-bottom: .3rem; }
  .status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    margin-right: .4rem;
    vertical-align: middle;
  }
</style>
{% endblock %}

{% block content %}
<div class="session-grid">
  <!-- Link card -->
  <div class="card session-link-card">
    <h2 style="font-size:1rem; margin-bottom:.25rem;">
      <span class="status-dot"></span> oTree Room Link
    </h2>
    <p style="color:var(--text-dim); font-size:.84rem;">
      Click <strong>Open</strong> to join the experiment in a new tab, or
      copy the link to paste into a browser.
    </p>
    <div class="url-bar">
      <code id="otree-url">{{ otree_url }}</code>
      <button class="btn btn-outline" onclick="copyUrl()">Copy</button>
      <a class="btn btn-primary" href="{{ otree_url }}" target="_blank" rel="noopener">Open</a>
    </div>
  </div>

  <!-- Quick-start instructions -->
  <div class="card session-link-card">
    <h2 style="font-size:1rem; margin-bottom:.5rem;">Quick Start</h2>
    <div class="info-card">
      <span class="icon">📋</span>
      <ol>
        <li>Click <strong>Open</strong> above — the oTree waiting room opens in a new tab.</li>
        <li>The participant is automatically assigned when the session admin starts the experiment.</li>
        <li>Repeat on each lab machine that needs to join.</li>
      </ol>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function copyUrl() {
  const url = document.getElementById("otree-url").textContent;
  navigator.clipboard.writeText(url).then(() => {
    const btn = event.currentTarget;
    btn.textContent = "Copied!";
    setTimeout(() => btn.textContent = "Copy", 1500);
  });
}
</script>
{% endblock %}