<div class="detail">
  @if (keyboardModel().kind === 'keyboard') {
    <div class="keyboard-block">
      <h4 class="keyboard-title">Предпросмотр</h4>
      @if (keyboardSvg$ | async; as svg) {
        <div class="keyboard-svg-host" [innerHTML]="svg"></div>
      } @else {
        <div class="keyboard-loading">
          <tui-loader [loading]="true" size="m" />
        </div>
      }
      @if (keyboardKeyIds().length === 0) {
        <p class="muted small">
          Не удалось сопоставить событие с клавишами на схеме (проверьте поля <code class="mono">key_name</code> /
          <code class="mono">modifiers</code> или VK).
        </p>
      }
    </div>
  }

  <section class="detail-section">
    <h4 class="detail-title">Подробности</h4>
    <dl class="kv detail-kv detail-kv_main">
      <dt>Тип</dt>
      <dd>{{ event().event_type | telemetryEventType }}</dd>
      <dt>Время</dt>
      <dd>{{ formatTime(event().timestamp) }}</dd>
    </dl>

    <div class="detail-subsection">
      <tui-accordion class="telemetry-service-accordion" [closeOthers]="true" size="s">
        <button tuiAccordion type="button">Служебные данные</button>
        <tui-expand>
          <div class="telemetry-service-body">
            @if (keyboardModel().kind === 'keyboard') {
              <dl class="kv detail-kv telemetry-service-kv">
                <dt>Виртуальный код (VK)</dt>
                <dd>
                  @if (keyboardModel().vk !== null && keyboardModel().vk !== undefined) {
                    {{ keyboardModel().vk }} (0x{{ keyboardModel().vk!.toString(16).toUpperCase() }})
                  } @else {
                    —
                  }
                </dd>
                @if (keyboardKeyIds().length > 0) {
                  <dt>Клавиши на схеме</dt>
                  <dd><code class="mono">{{ keyboardKeyIds().join(', ') }}</code></dd>
                }
              </dl>
            }
            <div class="json-copy-row">
              <span class="telemetry-json-label">Исходный JSON события</span>
              <button
                tuiButton
                type="button"
                size="s"
                appearance="secondary"
                (click)="copyEventPayload()"
              >
                Скопировать в буфер
              </button>
            </div>
          </div>
        </tui-expand>
      </tui-accordion>
    </div>
  </section>
</div>
