<?php
declare(strict_types=1);
$bp = Auth::basePath();
$sessionId = trim((string) ($_GET['session_id'] ?? ''));
$direct = isset($_GET['direct']) && (string) $_GET['direct'] === '1';
$role = trim((string) ($_GET['role'] ?? ''));
?>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Join live cast — <?= h(cfg('app_name')) ?></title>
  <script>
    (function () {
      var t = localStorage.getItem('crash_console_theme');
      if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
    })();
  </script>
  <link rel="stylesheet" href="<?= h($bp) ?>/assets/css/app.css">
  <script src="<?= h($bp) ?>/assets/js/cookie_consent.js" defer></script>
  <?php AnalyticsHead::render('live_join'); ?>
  <script src="<?= h($bp) ?>/assets/js/live_cast_webrtc.js" defer></script>
  <script src="<?= h($bp) ?>/assets/js/live_join.js" defer></script>
</head>
<body class="live-page" data-base-path="<?= h($bp) ?>"
      data-view="live_join">
  <main id="live-join-app" class="live-shell"
        data-session-id="<?= h($sessionId) ?>"
        data-direct="<?= $direct ? '1' : '0' ?>"
        data-role="<?= h($role) ?>">
    <header class="live-header">
      <a href="<?= h(Auth::projectBasePath()) ?>/" class="live-brand">← Back to the console</a>
      <span class="tag-pill tag-pill--ok">Live viewer</span>
    </header>
    <section class="card card--lift live-card">
      <h1>Join live cast</h1>
      <p id="live-join-status" class="reports-status muted" aria-live="polite">Loading session…</p>
      <ul id="live-join-meta" class="live-meta-list"></ul>
      <div id="live-join-player" class="live-player-wrap"></div>
      <pre id="live-join-stats-panel" class="live-stats-nerds" hidden aria-live="polite"></pre>
    </section>
  </main>
  <?php require __DIR__ . '/partials/cookie_consent.php'; ?>
  <?php platform_render_footer(); ?>
</body>
</html>
