<section class="card summary" aria-label="Сводка">
  @if (detail().session.title) {
    <p class="session-title">{{ detail().session.title }}</p>
  }
  <div class="summary-row">
    <span
      tuiChip
      size="s"
      class="status-chip"
      [ngClass]="detail().session.status | sessionStatusChipClasses"
      >{{ detail().session.status | sessionStatus }}</span>
  </div>
  <div class="muted small">
    Начало: {{ formatDate(detail().session.started_at) }} · Окончание:
    {{ formatDate(detail().session.ended_at) }}
  </div>
</section>

<section class="card" aria-label="Видео">
  <h3 class="section-title">Трансляция</h3>
  @if (detail().streams.length === 0) {
    <p class="muted">Потоки ещё не готовы.</p>
  } @else {
    <app-stream-selector
      [streams]="detail().streams"
      [activeType]="activeStreamType()"
      (typeChange)="pickStream($event)"
    />
    @if (playlistUrl(); as src) {
      <app-hls-player [src]="src" />
    }
  }
</section>

<section class="card" aria-label="Телеметрия">
  <div class="telemetry-head">
    <div class="telemetry-head__main">
      <h3 class="section-title">
        События телеметрии ({{ filteredTelemetryEvents(visibleTelemetryEvents()).length }})
      </h3>
      <p class="telemetry-range muted small">{{ telemetryRangeLabel(telemetryState().toMs) }}</p>
    </div>
    <div class="telemetry-head__side">
    <div class="telemetry-actions">
      <div class="telemetry-presets">
        <button
          tuiButton
          type="button"
          size="s"
          appearance="secondary"
          [class.stream-active]="telemetryRangePresetIs(2)"
          (click)="selectRecentWindow(2)"
        >
          +2с
        </button>
        <button
          tuiButton
          type="button"
          size="s"
          appearance="secondary"
          [class.stream-active]="telemetryRangePresetIs(10)"
          (click)="selectRecentWindow(10)"
        >
          +10с
        </button>
        <button
          tuiButton
          type="button"
          size="s"
          appearance="secondary"
          [class.stream-active]="telemetryRangePresetIs(60)"
          (click)="selectRecentWindow(60)"
        >
          +1м
        </button>
        <button
          tuiButton
          type="button"
          size="s"
          appearance="secondary"
          [class.stream-active]="telemetryRangePresetIs(300)"
          (click)="selectRecentWindow(300)"
        >
          +5м
        </button>
        <button
          tuiButton
          type="button"
          size="s"
          appearance="secondary"
          [class.stream-active]="telemetryRangePresetIs(900)"
          (click)="selectRecentWindow(900)"
        >
          +15м
        </button>
        <button
          tuiButton
          type="button"
          size="s"
          appearance="secondary"
          [class.stream-active]="telemetryRangeIsEnd()"
          (click)="loadUntilEndTelemetry()"
        >
          До конца
        </button>
      </div>
      <label class="from-picker">
        <input
          type="datetime-local"
          class="sg-native-input"
          [value]="customToLocal()"
          (change)="applyCustomTo($any($event.target).value)"
          aria-label="Верхняя граница диапазона телеметрии"
        />
      </label>
    </div>
    <label class="telemetry-exclude-moves">
      <input
        type="checkbox"
        tuiCheckbox
        size="s"
        [ngModel]="excludeMouseMoves()"
        (ngModelChange)="excludeMouseMoves.set($event)"
      />
      <span class="telemetry-exclude-moves__text">Исключить перемещения мыши</span>
    </label>
    </div>
  </div>

  <div class="telemetry-content">
    @if (telemetryState().status === 'loading') {
      <div class="loading-wrap loading-wrap_small">
        <tui-loader [loading]="true" size="l" />
      </div>
    } @else if (telemetryState().status === 'error') {
      <p class="muted">События телеметрии временно недоступны.</p>
    } @else {
      @if (telemetryState().telemetry.length === 0) {
        <p class="muted">Событий пока нет.</p>
      } @else if (visibleTelemetryEvents().length === 0) {
        <p class="muted">После исключения перемещений мыши событий нет.</p>
      } @else {
        <div class="telemetry-type-tabs stream-tabs" aria-label="Фильтр по типу события">
          <button
            tuiButton
            type="button"
            size="s"
            appearance="secondary"
            [class.stream-active]="telemetryEventTypeFilter() === null"
            (click)="pickTelemetryEventTypeFilter(null)"
          >
            Все ({{ visibleTelemetryEvents().length }})
          </button>
          @for (t of uniqueTelemetryEventTypes(visibleTelemetryEvents()); track t) {
            <button
              tuiButton
              type="button"
              size="s"
              appearance="secondary"
              [class.stream-active]="telemetryEventTypeFilter() === t"
              (click)="pickTelemetryEventTypeFilter(t)"
            >
              {{ t === '' ? 'Без типа' : (t | telemetryEventType) }} ({{ telemetryEventsOfType(visibleTelemetryEvents(), t) }})
            </button>
          }
        </div>
        @if (filteredTelemetryEvents(visibleTelemetryEvents()).length === 0) {
          <p class="muted">Нет событий выбранного типа.</p>
        } @else {
          <div class="table-wrap">
            <table class="telemetry">
              <thead>
                <tr>
                  <th>Время</th>
                  <th>Тип</th>
                  <th>Сводка</th>
                </tr>
              </thead>
              <tbody>
                @for (
                  row of filteredTelemetryEvents(visibleTelemetryEvents());
                  track row.timestamp + '_' + row.event_type + '_' + $index;
                  let i = $index
                ) {
                  <tr
                    class="telemetry-row"
                    [class.telemetry-row_expanded]="isTelemetryRowExpanded(row, i)"
                    (click)="toggleTelemetryRow(row, i)"
                  >
                    <td>{{ formatUnixMs(row.timestamp) }}</td>
                    <td class="telemetry-col-type">
                      <span tuiChip size="xs">{{ row.event_type | telemetryEventType }}</span>
                    </td>
                    <td class="telemetry-col-summary">{{ telemetryEventSummary(row) }}</td>
                  </tr>
                  @if (isTelemetryRowExpanded(row, i)) {
                    <tr class="telemetry-row-detail" @telemetryEventDetail>
                      <td colspan="3" (click)="$event.stopPropagation()">
                        <app-telemetry-event-detail [event]="row" />
                      </td>
                    </tr>
                  }
                }
              </tbody>
            </table>
          </div>
        }
      }
    }
  </div>
</section>
