@if (isDev) {
  @if (minimized()) {
    <button type="button" class="dev-console-mini" (click)="restore()">
      Dev ({{ count() }})
    </button>
  } @else {
    <aside class="dev-console" [class.dev-console_collapsed]="collapsed()">
      <header class="dev-console__header">
        <strong>Dev Console</strong>
        <span class="dev-console__count">{{ count() }}</span>
        <button type="button" (click)="toggleCollapsed()">
        {{ collapsed() ? 'Развернуть' : 'Свернуть' }}
        </button>
        <button type="button" (click)="clear()">Очистить</button>
        <button type="button" (click)="minimize()">Скрыть</button>
      </header>

      @if (!collapsed()) {
        <div class="dev-console__list">
          @for (entry of entries(); track entry.id) {
            <div class="dev-console__entry" [attr.data-level]="entry.level">
              <span class="dev-console__time">
                {{ entry.time | date: 'HH:mm:ss.SSS' }}
              </span>
              <span class="dev-console__source">{{ entry.source }}</span>
              <div class="dev-console__main">
                <span class="dev-console__message">{{ entry.message }}</span>

                @if (entry.source === 'telemetry' && entry.telemetryDetails) {
                  <button
                    type="button"
                    class="dev-console__expand"
                    (click)="toggleExpanded(entry.id)"
                  >
                    {{ isExpanded(entry.id) ? 'Скрыть JSON' : 'Показать JSON' }}
                  </button>

                  @if (isExpanded(entry.id)) {
                    <div class="dev-console__details">
                      <details open>
                        <summary>Событие (как пришло с API)</summary>
                        <pre>{{ entry.telemetryDetails.rawEventJson }}</pre>
                      </details>
                    </div>
                  }
                }

                @if (entry.source === 'http' && entry.details) {
                  <button
                    type="button"
                    class="dev-console__expand"
                    (click)="toggleExpanded(entry.id)"
                  >
                    {{ isExpanded(entry.id) ? 'Скрыть детали' : 'Показать детали' }}
                  </button>

                  @if (isExpanded(entry.id)) {
                    <div class="dev-console__details">
                      <div class="dev-console__meta">
                        <span><b>Метод:</b> {{ entry.details.method }}</span>
                        <span><b>Статус:</b> {{ entry.details.statusCode ?? 'ожидание' }}</span>
                        <span><b>Длительность:</b> {{ entry.details.durationMs ?? '—' }} мс</span>
                      </div>
                      <div class="dev-console__meta"><b>URL:</b> {{ entry.details.url }}</div>

                      <details open>
                        <summary>Заголовки запроса</summary>
                        <pre>{{ pretty(entry.details.requestHeaders) }}</pre>
                      </details>
                      <details open>
                        <summary>Тело запроса</summary>
                        <pre>{{ pretty(entry.details.requestBody) }}</pre>
                      </details>
                      <details open>
                        <summary>Заголовки ответа</summary>
                        <pre>{{ pretty(entry.details.responseHeaders) }}</pre>
                      </details>
                      <details open>
                        <summary>Тело ответа</summary>
                        <pre>{{ pretty(entry.details.responseBody) }}</pre>
                      </details>
                      @if (entry.details.error) {
                        <details open>
                          <summary>Ошибка</summary>
                          <pre>{{ entry.details.error }}</pre>
                        </details>
                      }
                    </div>
                  }
                }
              </div>
            </div>
          }
        </div>
      }
    </aside>
  }
}