@if (data$ | async; as state) {
  @switch (state.status) {
    @case ('loading') {
      <div class="loading-wrap">
        <tui-loader [loading]="true" size="xl" />
      </div>
    }
    @case ('error') {
      <p class="muted">Не удалось загрузить данные системы.</p>
    }
    @case ('ok') {
      <div class="fingerprint-container">

        <!-- Текущая конфигурация -->
        <section class="card config-section">
          <h3 class="section-title">Текущая конфигурация устройства</h3>
          @if (state.currentConfig; as config) {
            <div class="config-grid">
              <div class="config-item">
                <tui-icon icon="@tui.monitor" class="cfg-icon" />
                <div class="cfg-text">
                  <span class="cfg-label">Экраны</span>
                  <span class="cfg-value">{{ config.screen_layout }}</span>
                </div>
              </div>
              <div class="config-item">
                <tui-icon icon="@tui.user" class="cfg-icon" />
                <div class="cfg-text">
                  <span class="cfg-label">Пользователь</span>
                  <span class="cfg-value">{{ config.username }} <span class="muted">@{{ config.hostname }}</span></span>
                </div>
              </div>
              <div class="config-item">
                <tui-icon icon="@tui.globe" class="cfg-icon" />
                <div class="cfg-text">
                  <span class="cfg-label">Сеть</span>
                  <span class="cfg-value">{{ config.active_iface }}</span>
                </div>
              </div>
              <div class="config-item danger-container" [class.danger]="config.hypervisor_present">
                <tui-icon [icon]="config.hypervisor_present ? '@tui.triangle-alert' : '@tui.cpu'" class="cfg-icon" />
                <div class="cfg-text">
                  <span class="cfg-label">Виртуализация</span>
                  <span class="cfg-value">{{ config.hypervisor_present ? 'ОБНАРУЖЕНА' : 'Нет' }}</span>
                </div>
              </div>
            </div>
          } @else {
            <p class="muted">Данные телеметрии еще не поступили.</p>
          }
        </section>

        <!-- ВАЖНО: Аномалии -->
        <section class="card anomalies-section">
          <h3 class="section-title">Журнал подозрительных действий</h3>
          @if (state.anomalies.length === 0) {
            <div class="safe-banner">
              <tui-icon icon="@tui.check" class="success-icon" />
              <span>Никаких подозрительных изменений среды не зафиксировано.</span>
            </div>
          } @else {
            <div class="anomalies-list">
              @for (anomaly of state.anomalies; track anomaly.timestamp_ms) {
                <div class="anomaly-item">
                  <div class="anomaly-time">{{ anomaly.timestamp_ms | date:'HH:mm:ss' }}</div>
                  <div class="anomaly-content">
                    <span class="anomaly-label">{{ anomaly.fieldLabel }}:</span>
                    <span class="cross-out">{{ anomaly.oldValue }}</span>
                    <tui-icon icon="@tui.arrow-right" class="arrow-icon"/>
                    <span class="highlight">{{ anomaly.newValue }}</span>
                  </div>
                </div>
              }
            </div>
          }
        </section>

      </div>
    }
  }
}
