<section class="tl-panel" data-panel="students">
  <div class="tl-section-head">
    <div>
      <h2>Students</h2>
      <p>Add paid students or invite temporary teacher guests.</p>
    </div>
  </div>
  <form class="tl-form" data-student-form>
    <label>
      <span>Name</span>
      <input name="name" autocomplete="name" required>
    </label>
    <label>
      <span>Email</span>
      <input name="email" type="email" autocomplete="email" required>
    </label>
    <label>
      <span>Access</span>
      <select name="access">
        <option value="paid">Paid with QuantaLumin</option>
        <option value="guest">Teacher guest</option>
      </select>
    </label>
    <button type="submit">Add student</button>
  </form>
  <div class="tl-table-wrap">
    <table>
      <thead>
        <tr>
          <th>Student</th>
          <th>Access</th>
          <th>Account group</th>
          <th>Attendance</th>
          <th>Average</th>
        </tr>
      </thead>
      <tbody data-student-rows></tbody>
    </table>
  </div>
</section>

<section class="tl-panel" data-panel="lessons">
  <div class="tl-section-head">
    <div>
      <h2>Lessons</h2>
      <p>Create Talk-backed lessons and record attendance.</p>
    </div>
  </div>
  <form class="tl-form tl-form-wide" data-lesson-form>
    <label>
      <span>Lesson title</span>
      <input name="title" required>
    </label>
    <label>
      <span>When</span>
      <input name="startsAt" type="datetime-local" required>
    </label>
    <label>
      <span>Students</span>
      <select name="students" multiple size="4" data-student-picker></select>
    </label>
    <button type="submit">Create Talk lesson</button>
  </form>
  <div class="tl-stack" data-lesson-list></div>
</section>

<section class="tl-panel" data-panel="quizzes">
  <div class="tl-section-head">
    <div>
      <h2>Quizzes</h2>
      <p>Students can answer short checks; teachers can assess and give feedback.</p>
    </div>
  </div>
  <div class="tl-grid tl-grid-2">
    <article class="tl-card">
      <h3 data-quiz-title></h3>
      <form class="tl-quiz" data-quiz-form></form>
    </article>
    <div class="tl-stack" data-submission-list></div>
  </div>
</section>

<section class="tl-panel" data-panel="grades">
  <div class="tl-section-head">
    <div>
      <h2>Gradebook</h2>
      <p>Attendance, quiz outcomes, assessed work, and teacher notes.</p>
    </div>
  </div>
  <div class="tl-table-wrap">
    <table>
      <thead>
        <tr>
          <th>Student</th>
          <th>Attendance</th>
          <th>Quiz average</th>
          <th>Latest feedback</th>
          <th>Teacher mark</th>
        </tr>
      </thead>
      <tbody data-gradebook-rows></tbody>
    </table>
  </div>
</section>

<section class="tl-panel" data-panel="talk">
  <div class="tl-section-head">
    <div>
      <h2>Talk bridge</h2>
      <p>Contract for connecting TutorLumin lessons to Nextcloud Talk rooms and participant events.</p>
    </div>
  </div>
  <div class="tl-grid tl-grid-2">
    <article class="tl-card">
      <h3>Room creation</h3>
      <p><code>POST /ocs/v2.php/apps/spreed/api/v4/room</code></p>
      <p>Teacher schedules a lesson, the bridge creates a Talk room, then stores the room token with the lesson.</p>
    </article>
    <article class="tl-card">
      <h3>Attendance sync</h3>
      <p><code>GET /ocs/v2.php/apps/spreed/api/v4/room/{token}/participants</code></p>
      <p>Participant joins update the lesson attendance map for the matching LDAP or invited guest account.</p>
    </article>
  </div>
  <pre class="tl-json" data-talk-payload></pre>
</section>