{% extends 'base.html' %}
{% block title %}{{ stream.name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1>{{ stream.name }}</h1>
    <p>{{ stream.user.display_name }} · /{{ stream.slug }}</p>
  </div>
  <div class="badge {{ 'live' if stream.is_live else 'offline' }}">{{ 'LIVE' if stream.is_live else 'OFFLINE' }}</div>
</div>
<div class="detail-layout">
  <section class="card main-panel">
    <h2>Preview</h2>
    <div class="video-frame large"><video id="previewVideo" controls playsinline muted poster="{{ url_for('static', filename='videooffline.png') }}"></video></div>
    <div class="muted">{{ public_hls }}</div>
    <div class="stats-grid compact-top">
      <div class="mini-stat"><span>Bitrate</span><strong>{{ stats.get('bitrate', '-') }}</strong></div>
      <div class="mini-stat"><span>FPS</span><strong>{{ stats.get('fps', '-') }}</strong></div>
      <div class="mini-stat"><span>Video</span><strong>{{ stats.get('video_codec', '-') }}</strong></div>
      <div class="mini-stat"><span>Lyd</span><strong>{{ stats.get('audio_codec', '-') }}</strong></div>
      <div class="mini-stat"><span>Kanaler</span><strong>{{ stats.get('audio_channels', '-') }}</strong></div>
      <div class="mini-stat"><span>Sample rate</span><strong>{{ stats.get('audio_sample_rate', '-') }}</strong></div>
    </div>
  </section>
  <aside class="card side-panel">
    <h2>Ingest</h2>
    <label>OBS Server</label><input readonly value="{{ ingest_server }}">
    <label>OBS Key</label><input readonly value="{{ ingest_key }}">
    <label>Larix / Streamlabs URL</label><input readonly value="{{ ingest_alt_server }}">
    <label>Larix / Streamlabs Key</label><input readonly value="{{ ingest_alt_key }}">
    <label>Fuldt link</label><input readonly value="{{ ingest_full }}">
    <div class="stack-actions">
      <form method="post" action="{{ url_for('main.toggle_stream', stream_id=stream.id) }}"><button type="submit">{{ 'Deaktiver' if stream.active else 'Aktiver' }}</button></form>
      <form method="post" action="{{ url_for('main.rotate_stream_token', stream_id=stream.id) }}"><button type="submit" class="secondary">Rotér token</button></form>
    </div>
  </aside>
</div>
<div class="detail-layout lower-gap">
  <section class="card main-panel">
    <h2>Forbindelser / sessioner</h2>
    <table class="stream-table">
      <thead><tr><th>Start</th><th>Status</th><th>IP</th><th>Kilde</th></tr></thead>
      <tbody>
      {% for row in sessions %}
        <tr><td>{{ row.started_at }}</td><td>{{ row.status }}</td><td>{{ row.publisher_ip or '-' }}</td><td>{{ row.source_type or '-' }}</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </section>
  <aside class="card side-panel">
    <h2>Chat</h2>
    {% if stream.chat_url %}
    <iframe src="{{ stream.chat_url }}" class="chat-frame"></iframe>
    {% else %}
    <div class="muted">Ingen chat sat op endnu.</div>
    {% endif %}
  </aside>
</div>
<script>
const previewUrl = {{ public_hls|tojson }};
const video = document.getElementById('previewVideo');
if (window.Hls && Hls.isSupported()) {
  const hls = new Hls({lowLatencyMode: true});
  hls.loadSource(previewUrl);
  hls.attachMedia(video);
} else {
  video.src = previewUrl;
}
</script>
{% endblock %}