<?php require __DIR__.'/../layouts/header.php'; ?>
<div class="section-head">
  <div class="eyebrow">Video call</div>
  <h1>Call with <?= e($partnerUser['name']) ?></h1>
  <p>Private room for your match. Both of you open the same call from chat.</p>
</div>
<div class="panel call-panel">
  <p class="muted" style="font-size:13px;margin:0 0 12px">
    Powered by <b>Jitsi Meet</b> (browser-based). Allow camera &amp; mic when prompted.
    Room: <code><?= e($callRoom) ?></code>
  </p>
  <div class="call-frame-wrap">
    <iframe
      class="call-frame"
      src="<?= e($jitsiUrl) ?>"
      allow="camera; microphone; fullscreen; display-capture; autoplay"
      allowfullscreen
      title="Velora video call"></iframe>
  </div>
  <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:12px">
    <a class="btn" href="<?= e($jitsiUrl) ?>" target="_blank" rel="noopener">Open in new tab</a>
    <a class="btn ghost" href="<?= url('chat?user='.(int)$partnerUser['id']) ?>">Back to chat</a>
  </div>
</div>
<?php require __DIR__.'/../layouts/footer.php'; ?>
