{% extends 'base.html' %}
{% block content %}
<div class="page-head">
  <h1>{{ stream.name }}</h1>
  <div class="actions">
    <a class="button secondary" href="{{ url_for('main.streamer_panel', slug=stream.slug) }}">Åbn streamer-panel</a>
    <a class="button secondary" href="{{ url_for('main.stream_edit', stream_id=stream.id) }}">Rediger</a>
  </div>
</div>
<div class="grid two">
  <div class="card">
    <h2>Preview</h2>
    <video id="preview" class="video" controls autoplay muted playsinline></video>
    <p class="small">HLS: <code>{{ public_hls }}</code></p>
  </div>
  <div class="card">
    <h2>Status</h2>
    <p><strong>LIVE:</strong> {{ 'Ja' if stream.is_live else 'Nej' }}</p>
    <p><strong>Publish:</strong> {{ 'Åben' if stream.active else 'Lukket' }}</p>
    <p><strong>Video:</strong> {{ stats.video_codec or '-' }} {{ stats.width or '-' }}x{{ stats.height or '-' }} / {{ stats.fps or '-' }} FPS</p>
    <p><strong>Lyd:</strong> {{ stats.audio_codec or '-' }} / {{ stats.audio_sample_rate or '-' }} Hz / {% if stats.audio_channels == 1 %}<span class="warn">MONO ⚠️</span>{% elif stats.audio_channels %}{{ stats.audio_channels }} ch{% else %}-{% endif %}</p>
    <p><strong>Bitrate:</strong> {% if stats.bitrate %}{{ (stats.bitrate / 1000)|round(1) }} kbps{% else %}-{% endif %}</p>
    <p><strong>RTMP ingest:</strong><br><code>{{ ingest }}</code></p>
    <form method="post" action="{{ url_for('main.toggle_stream', stream_id=stream.id) }}">
      <button type="submit">{{ 'Stop publish' if stream.active else 'Start publish' }}</button>
    </form>
    <form method="post" action="{{ url_for('main.rotate_token', stream_id=stream.id) }}">
      <button type="submit" class="secondary">Rotér token</button>
    </form>
  </div>
</div>
<div class="grid two">
  <div class="card">
    <h2>Chat</h2>
    {% if stream.chat_url %}
      <iframe class="chatframe" src="{{ stream.chat_url }}"></iframe>
    {% else %}
      <p>Ingen chat sat op.</p>
    {% endif %}
  </div>
  <div class="card">
    <h2>Hændelseslog</h2>
    <div class="loglist">
      {% for log in logs %}
      <div class="log {{ log.level }}">{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }} — {{ log.message }}</div>
      {% endfor %}
    </div>
  </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 %}