{% extends "base.html" %}
{% block title %}Join a Class — Python 108{% endblock %}
{% block content %}
<div class="auth-page">
  <div class="auth-card" style="max-width:480px">

    <div class="auth-logo">🏫</div>
    <h1 class="auth-title">Join a Class</h1>

    {% if existing_class %}
    <!-- Already enrolled -->
    <div class="enrol-current">
      <div class="enrol-current-label">You are currently enrolled in:</div>
      <div class="enrol-current-name">{{ existing_class['name'] }}</div>
      <p class="enrol-current-sub">
        To switch classes, contact your teacher or admin.
      </p>
      <a href="{{ url_for('dashboard') }}" class="btn btn-primary btn-full" style="margin-top:1rem">
        Back to Dashboard
      </a>
    </div>

    {% else %}
    <!-- Enrol form -->
    <p class="auth-sub">Enter the 6-character code your teacher gave you.</p>

    <form method="POST" class="auth-form" autocomplete="off">
      <div class="form-group">
        <label class="form-label">Class Code</label>
        <input
          type="text"
          name="code"
          class="form-input code-input"
          placeholder="e.g. AB3X7K"
          maxlength="6"
          minlength="6"
          required
          autofocus
          autocomplete="off"
          oninput="this.value = this.value.toUpperCase()"
          style="font-size:1.6rem; letter-spacing:.25em; text-align:center; font-family:var(--mono); text-transform:uppercase"
        >
        <div class="form-hint">Codes are 6 characters — letters and numbers, case-insensitive.</div>
      </div>
      <button type="submit" class="btn btn-primary btn-full">Join Class</button>
    </form>

    <div class="enrol-help">
      <div class="enrol-help-title">Don't have a code?</div>
      <ul class="enrol-help-list">
        <li>Ask your teacher to share the class enrol code.</li>
        <li>Codes can be found on your class notice board.</li>
        <li>Contact your school admin if you need help.</li>
      </ul>
    </div>

    <p class="auth-switch" style="margin-top:1rem">
      <a href="{{ url_for('dashboard') }}">← Back to Dashboard</a>
    </p>
    {% endif %}

  </div>
</div>
{% endblock %}