<section class="card" aria-label="Сессия">
  <h3 class="section-title">Сессия</h3>
  <dl class="kv">
    <dt>Идентификатор</dt>
    <dd>{{ detail().session.id }}</dd>
    <dt>ID пользователя</dt>
    <dd>{{ detail().session.user_id ?? '—' }}</dd>
    <dt>Статус</dt>
    <dd><code class="mono">{{ detail().session.status }}</code></dd>
    <dt>Начало</dt>
    <dd><code class="mono">{{ detail().session.started_at ?? '—' }}</code></dd>
    <dt>Окончание</dt>
    <dd><code class="mono">{{ detail().session.ended_at ?? '—' }}</code></dd>
    <dt>Всего чанков</dt>
    <dd>{{ detail().session.chunks_total ?? '—' }}</dd>
    <dt>Всего событий</dt>
    <dd>{{ detail().session.events_total ?? '—' }}</dd>
    <dt>Название</dt>
    <dd>{{ detail().session.title ?? '—' }}</dd>
  </dl>
</section>

<section class="card" aria-label="Потоки">
  <h3 class="section-title">Потоки</h3>
  @if (detail().streams.length === 0) {
    <p class="muted">Нет записей о потоках.</p>
  } @else {
    <div class="table-wrap table-wrap_flat">
      <table class="meta-table">
        <thead>
          <tr>
            <th>Тип</th>
            <th>Чанки</th>
            <th>Длительность</th>
            <th>URL видеозаписи</th>
          </tr>
        </thead>
        <tbody>
          @for (s of detail().streams; track s.stream_type) {
            <tr>
              <td><code class="mono">{{ s.stream_type }}</code></td>
              <td>{{ s.chunk_count ?? '—' }}</td>
              <td>{{ formatDurationMs(s.duration_ms) }}</td>
              <td class="payload">{{ streamResolvedPlaylistUrl(s) }}</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }
</section>

<section class="card" aria-label="Телеметрия, ответ API">
  <h3 class="section-title">Запрос событий</h3>
  <dl class="kv">
    <dt>От (мс)</dt>
    <dd><code class="mono">{{ telemetryState().fromMs }}</code></dd>
    <dt>До (мс)</dt>
    <dd><code class="mono">{{ telemetryState().toMs }}</code></dd>
    <dt>ID сессии</dt>
    <dd>
      @if (telemetryState().parsedMeta) {
        {{ telemetryState().parsedMeta!.session_id }}
      } @else {
        —
      }
    </dd>
    <dt>Количество</dt>
    <dd>
      @if (telemetryState().parsedMeta) {
        {{ telemetryState().parsedMeta!.count }}
      } @else {
        —
      }
    </dd>
    <dt>Строк в выборке</dt>
    <dd>{{ telemetryState().telemetry.length }}</dd>
    <dt>Статус загрузки</dt>
    <dd><code class="mono">{{ telemetryState().status }}</code></dd>
  </dl>
</section>

<section class="card" aria-label="Исходный JSON">
  <div class="json-copy-row">
    <h3 class="section-title">Исходный JSON</h3>
    <button
      tuiButton
      type="button"
      size="s"
      appearance="secondary"
      (click)="copyDetailPayloadJson()"
    >
      Скопировать в буфер
    </button>
  </div>
</section>
