@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() ? 'Expand' : 'Collapse' }}
        </button>
        <button type="button" (click)="clear()">Clear</button>
        <button type="button" (click)="minimize()">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) ? 'Hide details' : 'Show details' }}
                  </button>

                  @if (isExpanded(entry.id)) {
                    <div class="dev-console__details">
                      <div class="dev-console__meta">
                        <span><b>Method:</b> {{ entry.details.method }}</span>
                        <span><b>Status:</b> {{ entry.details.statusCode ?? 'pending' }}</span>
                        <span><b>Duration:</b> {{ entry.details.durationMs ?? '—' }} ms</span>
                      </div>
                      <div class="dev-console__meta"><b>URL:</b> {{ entry.details.url }}</div>

                      <details open>
                        <summary>Request headers</summary>
                        <pre>{{ pretty(entry.details.requestHeaders) }}</pre>
                      </details>
                      <details open>
                        <summary>Request body</summary>
                        <pre>{{ pretty(entry.details.requestBody) }}</pre>
                      </details>
                      <details open>
                        <summary>Response headers</summary>
                        <pre>{{ pretty(entry.details.responseHeaders) }}</pre>
                      </details>
                      <details open>
                        <summary>Response body</summary>
                        <pre>{{ pretty(entry.details.responseBody) }}</pre>
                      </details>
                      @if (entry.details.error) {
                        <details open>
                          <summary>Error</summary>
                          <pre>{{ entry.details.error }}</pre>
                        </details>
                      }
                    </div>
                  }
                }
              </div>
            </div>
          }
        </div>
      }
    </aside>
  }
}