{% extends 'base.html' %}
{% block content %}
<div class="page-head">
  <h1>Streamer-panel — {{ stream.name }}</h1>
  <span class="badge {{ 'live' if stream.is_live else 'off' }}">{{ 'LIVE' if stream.is_live else 'OFFLINE' }}</span>
</div>
<div class="grid streamer-layout">
  <div class="card">
    <h2>Server preview</h2>
    <video id="preview" class="video" controls autoplay muted playsinline></video>
    <div class="stats-grid">
      <div><strong>Video</strong><br>{{ stats.video_codec or '-' }}</div>
      <div><strong>Opløsning</strong><br>{{ stats.width or '-' }}x{{ stats.height or '-' }}</div>
      <div><strong>FPS</strong><br>{{ stats.fps or '-' }}</div>
      <div><strong>Bitrate</strong><br>{% if stats.bitrate %}{{ (stats.bitrate/1000)|round(1) }} kbps{% else %}-{% endif %}</div>
      <div><strong>Lyd</strong><br>{{ stats.audio_codec or '-' }}</div>
      <div><strong>Kanaler</strong><br>{% if stats.audio_channels == 1 %}<span class="warn">MONO ⚠️</span>{% elif stats.audio_channels %}{{ stats.audio_channels }} ch{% else %}-{% endif %}</div>
    </div>
    <div class="codebox">
      <div><strong>RTMP URL</strong><br><code>{{ ingest }}</code></div>
      <div><strong>HLS preview</strong><br><code>{{ public_hls }}</code></div>
    </div>
  </div>
  <div class="card">
    <h2>Chat</h2>
    {% if stream.chat_url %}
      <iframe class="chatframe tall" src="{{ stream.chat_url }}"></iframe>
    {% else %}
      <p>Ingen chat sat op.</p>
    {% endif %}
  </div>
</div>
<script>
const video = document.getElementById('preview');
const src = {{ public_hls|tojson }};
if (Hls.isSupported()) {
  const hls = new Hls({ lowLatencyMode: true, backBufferLength: 90 });
  hls.loadSource(src);
  hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = src;
}
</script>
{% endblock %}