home.component.html

<ng-template #loading>
  <h4>{{ 'COMMON.LOADING' | translate }}</h4>
</ng-template>

<ng-template #shutdown>
  <h4>{{ 'COMMON.SHUTDOWN' | translate }}</h4>
</ng-template>

<div class="fill-colors">
  <div *ngIf="info$ | async as info; else loading">
    <div *ngIf="!info.shutdown; else shutdown">
      <!-- Chart (full width, top) -->
      <div class="row d-flex align-items-stretch">
        <div class="col-12">
          <!-- Note: do NOT force h-100 here; it creates excess whitespace when the chart is collapsed. -->
          <nb-card class="nerd-chart-card">
            <nb-card-header class="nerd-chart-header">
              <div class="chart-header-row">
                <span class="text-hint">{{ 'HOME.HASH_RATE_CHART' | translate }}</span>

                <div class="chart-header-actions">
                  <div class="chart-zoom-controls" *ngIf="!isChartCollapsed">
                    <span class="chart-zoom-label" *ngIf="showZoomWindowLabel" aria-live="polite">
                      <span class="chart-zoom-label__value">−{{ zoomWindowLabel }}</span>
                      <span class="chart-zoom-label__title">{{ 'HOME.CHART_SPAN' | translate }}</span>
                    </span>
                    <button
                      nbButton
                      ghost
                      size="tiny"
                      class="chart-zoom-btn"
                      type="button"
                      (click)="zoomOut($event)"
                      [attr.aria-label]="('HOME.CHART_SPAN' | translate) + ' − 15' + ('UNITS.MINUTE_SHORT' | translate)"
                    >
                      <span class="chart-zoom-btn__icon">−</span>
                      <span class="chart-zoom-btn__text">{{ 'HOME.CHART_SPAN' | translate }}</span>
                    </button>
                    <button
                      nbButton
                      ghost
                      size="tiny"
                      class="chart-zoom-btn"
                      type="button"
                      (click)="zoomIn($event)"
                      [attr.aria-label]="('HOME.CHART_SPAN' | translate) + ' + 15' + ('UNITS.MINUTE_SHORT' | translate)"
                    >
                      <span class="chart-zoom-btn__icon">+</span>
                      <span class="chart-zoom-btn__text">{{ 'HOME.CHART_SPAN' | translate }}</span>
                    </button>
                    <button
                      nbButton
                      ghost
                      size="tiny"
                      class="chart-zoom-btn chart-zoom-btn--toggle"
                      type="button"
                      (click)="toggleZoomWindow($event)"
                      aria-label="Toggle zoom range 1 hour to 3 hours"
                    >
                      <span class="chart-zoom-btn__text">1{{ 'UNITS.HOUR_SHORT' | translate }}</span>
                      <span class="chart-zoom-btn__icon">⇄</span>
                      <span class="chart-zoom-btn__text">3{{ 'UNITS.HOUR_SHORT' | translate }}</span>
                    </button>
                  </div>

                  <button
                    nbButton
                    ghost
                    size="tiny"
                    class="chart-toggle"
                    type="button"
                    (click)="toggleChartCollapsed($event)"
                    [attr.aria-expanded]="!isChartCollapsed"
                  >
                    <span class="chart-toggle__label">
                      {{ (isChartCollapsed ? 'HOME.SHOW_CHART' : 'HOME.HIDE_CHART') | translate }}
                    </span>

                    <!-- Thick, high-contrast chevron (SVG) for better visibility than nb-icon. -->
                    <span
                      class="chart-toggle__icon"
                      [class.chart-toggle__icon--up]="!isChartCollapsed"
                      aria-hidden="true"
                    >
                      <svg viewBox="0 0 16 16" focusable="false">
                        <path d="M3.25 5.75 L8 10.5 L12.75 5.75"/>
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </nb-card-header>

            <nb-card-body class="chart-card-body" [class.chart-card-body--collapsed]="isChartCollapsed">
              <div class="chart-canvas">
                <div class="chart-canvas__wrap chart-canvas__wrap--tall">
                  <canvas #myChart></canvas>
                </div>
              </div>
            </nb-card-body>
          </nb-card>
        </div>
      </div>

      <!-- Hashrate summary + Pools (side-by-side) -->
      <div class="row mt-3 d-flex align-items-stretch">
        <!-- Hashrate summary square -->
        <!-- Use the XL breakpoint so the pool tile wraps under the hashrate tile on smaller viewports -->
        <div class="col-12 col-xl-6">
          <div class="pool-summary-square h-100" role="group" [attr.aria-label]="'HOME.HASH_RATE' | translate">
            <!-- Left column: Hashrate + Expected + ASIC Frequency bar -->
            <div class="pool-summary-square__left">
              <div class="pool-summary-square__top">
                <!-- Row 1: Hashrate (left) + Model (right) -->
                <div class="pool-summary-square__hashrate-row">
                  <div class="pool-summary-square__hashrate">
                    <!-- Always show total hashrate as the big number -->
                    <div class="pool-summary-square__hashrate-main">
                      <div class="pool-summary-square__hashrate-value">
                        {{ info.hashRate | number: '1.2-2' }}
                        <span class="pool-summary-square__hashrate-unit">{{ 'UNITS.HASHRATE' | translate }}</span>
                      </div>

                      <!-- Dual pool: dotted separator to the right of the main value -->
                      <span *ngIf="isDualPool" class="pool-summary-square__hashrate-main-divider"
                            aria-hidden="true"></span>
                    </div>

                    <!-- Dual pool: show per-pool hashrates stacked, without units + with assignment % -->
                    <div *ngIf="isDualPool" class="pool-summary-square__hashrate-split" aria-hidden="true">
                      <div class="pool-summary-square__hashrate-split-row">
                        <span
                          class="pool-summary-square__hashrate-split-value">{{ getPoolHashrate(0) | number: '1.2-2' }}</span>
                        <span class="pool-summary-square__hashrate-split-divider" aria-hidden="true"></span>
                        <span
                          class="pool-summary-square__hashrate-split-pct">{{ getActiveBalance(0) | number: '1.0-0' }}
                          %</span>
                      </div>
                      <div class="pool-summary-square__hashrate-split-row">
                        <span
                          class="pool-summary-square__hashrate-split-value">{{ getPoolHashrate(1) | number: '1.2-2' }}</span>
                        <span class="pool-summary-square__hashrate-split-divider" aria-hidden="true"></span>
                        <span
                          class="pool-summary-square__hashrate-split-pct">{{ getActiveBalance(1) | number: '1.0-0' }}
                          %</span>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Row 2: Expected (left) + Uptime (right) -->
                <div class="pool-summary-square__row2">
                  <ng-container *ngIf="expectedHashRate$ | async as expectedHashRate">
                    <div class="pool-summary-square__expected">
                      <span class="pool-summary-square__expected-value">{{ expectedHashRate | number: '1.0-0' }}</span>
                      <span class="pool-summary-square__expected-unit">{{ 'UNITS.HASHRATE' | translate }}</span>
                      <span class="pool-summary-square__expected-label">{{ 'HOME.EXPECTED' | translate }}</span>
                    </div>
                  </ng-container>

                  <div class="pool-summary-square__uptime"
                       *ngIf="info.uptimeSeconds !== undefined && info.uptimeSeconds !== null">
                    <div class="pool-summary-square__uptime-value">{{ formatUptime(info.uptimeSeconds) }}</div>
                    <div class="pool-summary-square__uptime-label">{{ 'SYSTEM.UPTIME' | translate }}</div>
                  </div>
                </div>
              </div>

              <div class="pool-summary-square__bottom">
                <!-- ASIC frequency bar (device-scaled using m_asicFrequencies when available) -->
                <!-- Never warn-color within normal range; only turn yellow when above max. -->
                <div class="power-bar pool-summary-square__bar" role="img"
                     [class.power-bar--warn]="isBarOver(info.frequency, asicFreqMax(info))"
                     [class.power-bar--max]="isBarMax(info.frequency, asicFreqMax(info))"
                     [attr.aria-label]="('PERFORMANCE.ASIC_FREQUENCY' | translate) + ': ' + (info.frequency | number: '1.0-0') + ' MHz'">
                  <div class="power-bar__fill" [style.width.%]="toPct(info.frequency, 0, asicFreqMax(info))"></div>
                  <div class="power-bar__label">{{ 'PERFORMANCE.ASIC_FREQUENCY' | translate }}</div>
                  <div class="power-bar__value">{{ info.frequency | number: '1.0-0' }}<span
                    class="unit">&nbsp;MHz</span></div>
                </div>
              </div>
            </div>


            <!-- Right column: All‑time best square -->
            <div class="pool-summary-square__best" role="img"
                 [attr.aria-label]="('PERFORMANCE.BEST_DIFFICULTY' | translate) + ': ' + (info.bestDiff | humanReadable)">
              <div class="pool-summary-square__best-inner">
                <div class="pool-summary-square__best-label">{{ 'PERFORMANCE.BEST_DIFFICULTY' | translate }}</div>
                <div class="pool-summary-square__best-value">
                  <ng-container *ngIf="splitHumanReadable(info.bestDiff | humanReadable) as bd">
                    {{ bd.value }}<span class="unit" *ngIf="bd.unit">&nbsp;{{ bd.unit }}</span>
                  </ng-container>
                </div>
                <div class="pool-summary-square__best-sub">{{ 'HOME.ALL_TIME_BEST' | translate }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Pools container (to the right of the hashrate summary) -->
        <div class="col-12 col-xl-6 mt-3 mt-xl-0">
          @let poolLeft = isDualPool ? getPoolInfo(0) : getPoolInfo();
          @let poolRight = isDualPool ? getPoolInfo(1) : null;
          @let usingFallback = info.stratum?.usingFallback;

          <nb-card class="h-100 pool-tile-card" [class.pool-tile-card--dual]="isDualPool">
            <nb-card-body class="no-scroll pool-tile-card__body" style="position: relative;">

              <button
                nbButton ghost size="tiny" type="button"
                class="pool-reset-btn"
                [attr.aria-label]="'HOME.RESET_STATS' | translate"
                [nbTooltip]="'HOME.RESET_STATS' | translate"
                (click)="openResetStatsDialog(resetStatsDialog)"
              >
                <nb-icon icon="refresh-outline"></nb-icon>
              </button>

              <div class="pool-tile-layout pool-tile-layout--mirror" [class.pool-tile-layout--dual]="isDualPool">

                <!-- SINGLE POOL -->
                <ng-container *ngIf="!isDualPool">
                  <div class="pool-tile-section pool-tile-section--single" role="group">
                    <ng-container *ngIf="poolLeft?.connected; else poolDisconnectedLeft">
                      <ng-container
                        [ngTemplateOutlet]="poolHalf"
                        [ngTemplateOutletContext]="{ pool: poolLeft, idx: undefined, usingFallback: usingFallback }">
                      </ng-container>
                    </ng-container>
                  </div>
                </ng-container>

                <!-- DUAL POOL: stack pool 2 under pool 1 inside the same white container -->
                <ng-container *ngIf="isDualPool">
                  <div class="pool-tile-section pool-tile-section--top" role="group">
                    <ng-container *ngIf="poolLeft?.connected; else poolDisconnectedLeft">
                      <ng-container
                        [ngTemplateOutlet]="poolHalf"
                        [ngTemplateOutletContext]="{ pool: poolLeft, idx: 0, usingFallback: usingFallback }">
                      </ng-container>
                    </ng-container>
                  </div>

                  <div class="pool-tile-section pool-tile-section--bottom" role="group">
                    <ng-container *ngIf="poolRight?.connected; else poolDisconnectedRight">
                      <ng-container
                        [ngTemplateOutlet]="poolHalf"
                        [ngTemplateOutletContext]="{ pool: poolRight, idx: 1, usingFallback: false }">
                      </ng-container>
                    </ng-container>
                  </div>
                </ng-container>

              </div>

              <!-- Nerd*OS logo (single pool) -->
              <div class="nerdos-logo-wrap nerdos-logo-wrap--single" *ngIf="!isDualPool">
                <div class="nerdos-logo-wrap__inner" [style.--nerdos-logo-color]="nerdOsLogoColor">
                  <div
                    class="nerdos-logo"
                    aria-label="01001110 01100101 01110010 01100100 00101010 01001111 01010011"
                  ></div>
                  <span class="nerdos-logo-tooltip">01001110 01100101 01110010 01100100 00101010 01001111 01010011</span>
                </div>
              </div>

              <!-- Templates -->
              <ng-template #poolHalf let-pool="pool" let-idx="idx" let-usingFallback="usingFallback">
                <div class="pool-tile-half" dir="ltr" [class.pool-tile-half--dual]="isDualPool">

                  <!-- Grey metric bar (full width of the half) -->
                  <div class="pool-tile-metricbar fill-colors" role="group"
                       [attr.aria-label]="('POOL_INFO.TITLE' | translate) + ': ' + (pool.host ?? '')"
                       [class.pool-tile-metricbar--alloc]="isDualPool">
                    <div class="pool-tile-metricbar__fill" *ngIf="isDualPool"
                         [style.width.%]="getActiveBalance((idx ?? 0) === 0 ? 0 : 1)"></div>

                    <div class="pool-tile-metricbar__inner">

                      <!-- LEFT: Since connect (value + label) -->
                      <div class="pool-tile-metricbar__left">
                        <div class="pool-tile-metricbar__since">
                          <div class="pool-tile-metricbar__value">
                            <ng-container *ngIf="splitHumanReadable(pool.bestDiff | humanReadable) as bd">
                              {{ bd.value }}<span class="unit" *ngIf="bd.unit">&nbsp;{{ bd.unit }}</span>
                              <!-- Place label directly after the unit (only show in single pool or pool 1) -->
                              <span class="pool-tile-metricbar__label-inline" *ngIf="(!isDualPool || (idx ?? 0) === 0)">
                                    {{ 'HOME.BEST_DIFF_BOOT' | translate }}
                                  </span>
                            </ng-container>
                          </div>
                        </div>

                        <!-- User in the grey bar (bottom-left) -->
                        <div class="pool-tile-metricbar__user" *ngIf="pool.user">
                          <span class="pool-tile-metricbar__user-label">{{ 'POOL_INFO.USER' | translate }}:</span>
                          <span class="pool-tile-metricbar__user-value"
                                [title]="pool.user">{{ abbrevMiddle(pool.user) }}</span>
                        </div>
                      </div>

                      <!-- RIGHT: Shares + Rejected, aligned bottom-right -->
                      <div class="pool-tile-metricbar__right">
                        <div class="pool-tile-metricbar__shares">
                          <div class="pool-tile-metricbar__shares-label">{{ 'HOME.SHARES' | translate }}</div>
                          <div class="pool-tile-metricbar__shares-value">{{ (pool.accepted ?? 0) | number: '1.0-0' }}
                          </div>
                        </div>

                        <div class="pool-tile-metricbar__rejected">
                          {{ rejectRate(idx) | number: '1.2-2' }}
                          %&nbsp;/&nbsp;{{ (pool.rejected ?? 0) | number: '1.0-0' }}
                          &nbsp;{{ 'HOME.REJECTED' | translate }}
                        </div>

                        <div class="pool-tile-metricbar__rejected">
                          <span class="pool-tile-info__value">{{ (poolDiff(pool)) | number: '1.0-0' }}</span>
                          <span class="pool-tile-info__label">&nbsp;{{ 'POOL_INFO.DIFF' | translate }}</span>
                        </div>
                      </div>

                    </div>

                    <!-- Dual pool: allocation % is shown in the pool title (not inside the grey bar) -->
                  </div>

                  <!-- Details below the grey bar -->
                  <div class="pool-tile-details">
                    <div class="pool-tile-details__header">
                      <div class="pool-tile-details__header-left">
                        <a [href]="getQuickLink(pool.host, pool.user)" target="_blank">
                          <img
                            [src]="poolIconUrl(pool.host)"
                            class="pool-header__icon"
                            alt="Pool icon"
                            (error)="onPoolIconError($event, pool.host)"
                          />
                        </a>

                        <span *ngIf="!isDualPool" class="text-hint">
                              {{ 'POOL_INFO.TITLE' | translate }}
                          (
                          {{
                            usingFallback ? ('POOL_INFO.FALLBACK' | translate)
                              : ('POOL_INFO.PRIMARY' | translate)
                          }}
                          )
                          {{ (usingFallback ? info.fallbackStratumProtocol : info.stratumProtocol) === 1 ? 'SV2' : 'SV1' }}
                            </span>
                        <span *ngIf="isDualPool" class="text-hint">Pool {{ (idx ?? 0) + 1 }} {{ ((idx ?? 0) === 0 ? info.stratumProtocol : info.fallbackStratumProtocol) === 1 ? 'SV2' : 'SV1' }}</span>
                      </div>

                      <!-- Dual pool: show the pool allocation % in the title (right-aligned) -->
                      <div *ngIf="isDualPool" class="pool-tile-details__header-right">
                        <span class="pool-tile-details__allocpct">{{ getActiveBalance(idx ?? 0) | number: '1.0-0' }}
                          %</span>
                      </div>
                    </div>

                    <div class="pool-tile-info__bottom">
                      <!-- Order (top -> bottom): HOST, PING + LOSS (same line), DIFF. Labels are placed AFTER values. -->
                      <div class="pool-tile-info__line">
                        <a class="pool-tile-hostlink pool-tile-info__value" [href]="getQuickLink(pool.host, pool.user)"
                           target="_blank"> {{ pool.host }}</a>
                        <span class="pool-host-colon pool-tile-info__value">:{{ pool.port }}</span>
                        <span class="pool-tile-info__label">&nbsp;{{ 'POOL_INFO.HOST' | translate }}</span>
                      </div>

                      <div class="pool-tile-info__line">
                            <span class="pool-tile-info__value">
                              {{
                                supportsPing(pool.host) && pool.pingRtt !== undefined && pool.pingRtt !== null
                                  ? (pool.pingRtt.toFixed(2) + ' ' + ('PERFORMANCE.MS' | translate)
                                    + ' (' + ('PERFORMANCE.AVG' | translate) + ')')
                                  : 'n/a'
                              }}
                            </span>
                        <span class="pool-tile-info__label">&nbsp;{{ 'POOL_INFO.PING' | translate }}</span>

                        <span class="pool-tile-info__value">&nbsp;
                          {{
                            supportsPing(pool.host) && pool.pingLoss !== undefined && pool.pingLoss !== null
                              ? (pool.pingLoss * 100).toFixed(2) + ' %'
                              : 'n/a'
                          }}
                            </span>
                        <span class="pool-tile-info__label">&nbsp;{{ 'POOL_INFO.LOSS' | translate }}</span>
                      </div>

                    </div>

                  </div>
                </div>
              </ng-template>

              <ng-template #poolDisconnectedLeft>
                <!-- Use the existing pool metric bar UI for the disconnected warning (no extra alert chrome). -->
                <div class="pool-tile-half pool-tile-half--disconnected" dir="ltr"
                     [class.pool-tile-half--dual]="isDualPool">
                  <div
                    class="pool-tile-metricbar pool-tile-metricbar--warn pool-tile-metricbar--disconnected fill-colors"
                    role="status" aria-live="polite">
                    <div class="pool-tile-metricbar__inner pool-tile-metricbar__inner--disconnected">
                      <div class="pool-tile-metricbar__dc-msg">{{ 'HOME.STRATUM_NOT_CONNECTED' | translate }}</div>
                    </div>
                  </div>
                </div>
              </ng-template>

              <ng-template #poolDisconnectedRight>
                <!-- Use the existing pool metric bar UI for the disconnected warning (no extra alert chrome). -->
                <div class="pool-tile-half pool-tile-half--disconnected" dir="ltr"
                     [class.pool-tile-half--dual]="isDualPool">
                  <div
                    class="pool-tile-metricbar pool-tile-metricbar--warn pool-tile-metricbar--disconnected fill-colors"
                    role="status" aria-live="polite">
                    <div class="pool-tile-metricbar__inner pool-tile-metricbar__inner--disconnected">
                      <div class="pool-tile-metricbar__dc-msg">{{ 'HOME.STRATUM_NOT_CONNECTED' | translate }}</div>
                    </div>
                  </div>
                </div>
              </ng-template>

            </nb-card-body>
          </nb-card>
        </div>
      </div>

      <!-- Power Usage + Heat (new row under pools) -->
      <div class="row mt-3 d-flex align-items-stretch">
        <div class="col-12 col-xl-6">
          <!-- Power Section (no tile/box) -->
          <div class="plain-section">
            <div class="no-scroll power-usage power-usage--plain">
              <!-- Boxed container (same visual style as the pool summary square) -->
              <div class="power-usage-box">
                <div class="power-bars-layout">
                  <div class="power-bars" [attr.aria-label]="'PERFORMANCE.TITLE_POWER_USAGE' | translate">
                    <!-- Measured ASIC voltage bar (keep this in the Power tile) -->
                    <div class="power-bar" role="img"
                         [class.power-bar--max]="isBarMax(info.coreVoltageActual, asicCoreVoltageMax(info))"
                         [attr.aria-label]="('PERFORMANCE.ASIC_VOLTAGE_MEASURED' | translate) + ': ' + (info.coreVoltageActual | number: '1.2-2') + ' V'">
                      <div class="power-bar__fill"
                           [style.width.%]="toPct(info.coreVoltageActual, 0.9, asicCoreVoltageMax(info))"></div>
                      <div class="power-bar__label">{{ 'PERFORMANCE.ASIC_VOLTAGE_MEASURED' | translate }}</div>
                      <div class="power-bar__value"
                           [class.power-bar__value--overmax]="info.coreVoltageActual > asicCoreVoltageMax(info)">
                        {{ info.coreVoltageActual | number: '1.2-2' }}<span class="unit">&nbsp;V</span>
                      </div>
                    </div>

                    <!-- Input current bar -->
                    <div class="power-bar" role="img"
                         [class.power-bar--warn]="isInputCurrentWarn(info.currentA, info.minCurrentA ?? 0, info.maxCurrentA ?? 6)"
                         [class.power-bar--crit]="isInputCurrentCrit(info.currentA, info.minCurrentA ?? 0, info.maxCurrentA ?? 6)"
                         [class.power-bar--max]="isBarMax(info.currentA, info.maxCurrentA ?? 6)"
                         [attr.aria-label]="('PERFORMANCE.INPUT_CURRENT' | translate) + ': ' + (info.currentA | number: '1.2-2') + ' A'">
                      <div class="power-bar__fill"
                           [style.width.%]="toPct(info.currentA, info.minCurrentA ?? 0, info.maxCurrentA ?? 6)">
                      </div>
                      <div class="power-bar__label">{{ 'PERFORMANCE.INPUT_CURRENT' | translate }}</div>
                      <div class="power-bar__value">{{ info.currentA | number: '1.2-2' }}<span
                        class="unit">&nbsp;A</span></div>
                    </div>

                    <!-- Input voltage bar -->
                    <div class="power-bar" role="img"
                         [class.power-bar--warn]="isInputVoltageWarn(info.voltage, info.minVoltage, info.maxVoltage)"
                         [class.power-bar--crit]="false"
                         [class.power-bar--max]="isBarMax(info.voltage, info.maxVoltage)"
                         [attr.aria-label]="('PERFORMANCE.INPUT_VOLTAGE' | translate) + ': ' + (info.voltage | number: '1.1-1') + ' V'">
                      <div class="power-bar__fill"
                           [style.width.%]="toPct(info.voltage, info.minVoltage, info.maxVoltage)">
                      </div>
                      <div class="power-bar__label">{{ 'PERFORMANCE.INPUT_VOLTAGE' | translate }}</div>
                      <div class="power-bar__value">{{ info.voltage | number: '1.1-1' }}<span
                        class="unit">&nbsp;V</span></div>
                    </div>

                  </div>

                  <!-- Efficiency square (spans the height of the 3 bars) -->
                  <div class="power-watt-box" role="img"
                       [attr.aria-label]="('HOME.EFFICIENCY' | translate) + ': ' + (info.power / (info.hashRate / 1000) | number: '1.2-2') + ' J/Th'">
                    <div class="power-watt-box__inner">
                      <div class="power-watt-box__label-top">{{ 'HOME.EFFICIENCY' | translate }}</div>
                      <div class="power-watt-box__value">
                        {{ info.power / (info.hashRate / 1000) | number: '1.2-2' }}<span class="unit">&nbsp;J/Th</span>
                      </div>
                    </div>
                  </div>

                  <!-- Power bar (full width under the 3 bars + square) -->
                  <div class="power-bar power-bar--full" role="img"
                       [class.power-bar--warn]="info.maxPower ? isBarWarn(info.power, info.minPower ?? 0, info.maxPower) : false"
                       [class.power-bar--crit]="info.maxPower ? isBarCrit(info.power, info.minPower ?? 0, info.maxPower) : false"
                       [class.power-bar--max]="info.maxPower ? isBarMax(info.power, info.maxPower) : false"
                       [attr.aria-label]="('PERFORMANCE.POWER' | translate) + ': ' + (info.power | number: '1.1-1') + ' W'">
                    <div class="power-bar__fill"
                         [style.width.%]="toPct(info.power, info.minPower ?? 0, info.maxPower ?? info.power)">
                    </div>
                    <div class="power-bar__label">{{ 'PERFORMANCE.POWER' | translate }}</div>
                    <div class="power-bar__value">{{ info.power | number: '1.1-1' }}<span class="unit">&nbsp;W</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12 col-xl-6 mt-3 mt-xl-0">
          <!-- Heat Section (no tile/box) -->
          <div class="plain-section">
            <div class="no-scroll heat-usage heat-usage--plain">
              <div class="heat-usage-box">
                <div class="heat-bars-layout">
                  <!-- Left group: ASIC temp square + optional ASIC chip temp squares (qx multi-bars) -->
                  <div class="heat-left">

                    <!-- ASIC °C: big square always top-left. -->
                    <ng-container *ngIf="hasChipTemps; else asicTempSingle">
                      <div class="heat-metric-box heat-metric-box--vertical heat-asic-main" role="img"
                           [class.power-bar--warn]="isAsicTempWarn(maxAsicTemp(info), 10, shutdownTempC(info))"
                           [class.power-bar--crit]="isAsicTempCrit(maxAsicTemp(info), 10, shutdownTempC(info))"
                           [class.power-bar--max]="isBarMax(maxAsicTemp(info), shutdownTempC(info))"
                           [attr.aria-label]="('PERFORMANCE.ASIC_TEMP' | translate) + ': ' + (maxAsicTemp(info) | number: '1.1-1') + ' °C'">
                        <div class="heat-metric-box__fill"
                             [style.height.%]="toPct(maxAsicTemp(info), 10, shutdownTempC(info))"></div>
                        <div class="heat-metric-box__inner">
                          <div class="heat-metric-box__label-top">ASIC °C</div>
                          <div class="heat-metric-box__value">{{ maxAsicTemp(info) | number: '1.1-1' }}</div>
                        </div>
                      </div>
                    </ng-container>

                    <!-- No multi-bars => keep the ASIC °C square as before -->
                    <ng-template #asicTempSingle>
                      <div class="heat-metric-box heat-metric-box--vertical" role="img"
                           [class.power-bar--warn]="isAsicTempWarn(maxAsicTemp(info), 10, shutdownTempC(info))"
                           [class.power-bar--crit]="isAsicTempCrit(maxAsicTemp(info), 10, shutdownTempC(info))"
                           [class.power-bar--max]="isBarMax(maxAsicTemp(info), shutdownTempC(info))"
                           [attr.aria-label]="('PERFORMANCE.ASIC_TEMP' | translate) + ': ' + (maxAsicTemp(info) | number: '1.1-1') + ' °C'">
                        <div class="heat-metric-box__fill"
                             [style.height.%]="toPct(maxAsicTemp(info), 10, shutdownTempC(info))"></div>
                        <div class="heat-metric-box__inner">
                          <div class="heat-metric-box__label-top">ASIC °C</div>
                          <div class="heat-metric-box__value">{{ maxAsicTemp(info) | number: '1.1-1' }}</div>
                        </div>
                      </div>
                    </ng-template>

                  </div>

                  <div class="heat-bars">
                    @let showFanC2 = (info.fanCount ?? 1) > 1;

                    <!-- VR temp bar -->
                    <div class="power-bar power-bar--interactive" *ngIf="info.vrTemp > 0" role="img" data-bar="vr-temp"
                         [class.power-bar--warn]="isVrTempWarn(info.vrTemp)"
                         [class.power-bar--crit]="isVrTempCrit(info.vrTemp)"
                         [class.power-bar--max]="isVrTempCrit(info.vrTemp)"
                         (mouseenter)="showHoverTooltip('vr-temp', $event)"
                         (mousemove)="moveHoverTooltip($event)"
                         (mouseleave)="hideHoverTooltip('vr-temp')"
                         [attr.aria-label]="('PERFORMANCE.VR_TEMP' | translate) + ': ' + (info.vrTemp | number: '1.1-1') + ' °C'">
                      <div class="power-bar__fill"
                           [style.width.%]="toPct(info.vrTemp, BAR_LIMITS.vrTemp.min, BAR_LIMITS.vrTemp.max)"></div>
                      <div class="power-bar__label">{{ 'PERFORMANCE.VR_TEMP' | translate }}</div>
                      <span class="power-bar-tooltip"
                            [class.power-bar-tooltip--active]="activeHoverTooltipId === 'vr-temp'"
                            [style.left.px]="hoverTooltipX"
                            [style.top.px]="hoverTooltipY"
                            aria-hidden="true">
                        <span class="power-bar-tooltip__lead">{{ 'PERFORMANCE.VR_TEMP_TOOLTIP_LINE1' | translate }}</span>
                        <span class="power-bar-tooltip__bullet">{{ 'PERFORMANCE.VR_TEMP_TOOLTIP_LINE2' | translate }}</span>
                        <span class="power-bar-tooltip__bullet">{{ 'PERFORMANCE.VR_TEMP_TOOLTIP_LINE3' | translate }}</span>
                        <span class="power-bar-tooltip__footer">{{ 'PERFORMANCE.VR_TEMP_TOOLTIP_LINE4' | translate }}</span>
                      </span>
                      <div class="power-bar__value power-bar__value--inline power-bar__value--vr">
                        <span class="fan-inline fan-inline--vr">
                          <span class="power-bar__subvalue power-bar__subvalue--vrmeta" *ngIf="info.vrTempInt > 0">
                            <span class="power-bar__meta-row">
                              <span class="power-bar__meta-label">{{ 'PERFORMANCE.VR_TEMP_EXT' | translate }}</span>
                              <span class="power-bar__meta-number">{{ info.vrTemp | number: '1.1-1' }}</span><span class="unit">°C</span>
                            </span>
                            <span class="power-bar__meta-row">
                              <span class="power-bar__meta-label">{{ 'PERFORMANCE.VR_TEMP_INT' | translate }}</span>
                              <span class="power-bar__meta-number">{{ info.vrTempInt | number: '1.1-1' }}</span><span class="unit">°C</span>
                            </span>
                          </span>
                          <span class="power-bar__sep" *ngIf="info.vrTempInt > 0">/</span>
                          <span class="power-bar__mainvalue">{{ info.vrTemp | number: '1.1-1' }}<span class="unit">°C</span></span>
                        </span>
                      </div>
                    </div>

                    <!-- Fan bar (metric = fan speed %, shows RPM as secondary label) -->
                    @let fanC1LowRpm = shouldShowLowRpmHint(info.fanspeed ?? 0, info.fanrpm ?? 0);
                    <div class="power-bar" role="img"
                         [class.power-bar--interactive]="fanC1LowRpm"
                         [class.power-bar--max]="isBarMax(info.fanspeed ?? 0, 100)"
                         (mouseenter)="showConditionalHoverTooltip('fan-c1', fanC1LowRpm, $event)"
                         (mousemove)="moveConditionalHoverTooltip(fanC1LowRpm, $event)"
                         (mouseleave)="hideHoverTooltip('fan-c1')"
                         [attr.aria-label]="getFanAriaLabel(showFanC2 ? 1 : null, info.fanspeed ?? 0, info.fanrpm ?? 0)">
                      <div class="power-bar__fill" [style.width.%]="toPct(info.fanspeed ?? 0, 0, 100)"></div>
                      <div class="power-bar__label">{{ 'HOME.FAN_ASICS_LABEL' | translate }}</div>
                      <span class="power-bar-tooltip"
                            *ngIf="fanC1LowRpm"
                            [class.power-bar-tooltip--active]="activeHoverTooltipId === 'fan-c1'"
                            [style.left.px]="hoverTooltipX"
                            [style.top.px]="hoverTooltipY"
                            aria-hidden="true">
                        <span>{{ 'HOME.FAN_LOW_RPM_HINT' | translate }}</span>
                      </span>
                      <div class="power-bar__value power-bar__value--inline">
                        <span class="fan-inline">
                          <ng-container *ngIf="shouldShowFanRpm(info.fanspeed ?? 0, info.fanrpm ?? 0)">
                            <span class="power-bar__subvalue">{{ (info.fanrpm ?? 0) | number: '1.0-0' }}<span class="unit">&nbsp;RPM</span></span>
                            <span class="power-bar__sep">/</span>
                          </ng-container>
                          <span class="power-bar__mainvalue">{{ (info.fanspeed ?? 0) | number: '1.0-0' }}<span class="unit">&nbsp;%</span></span>
                        </span>
                      </div>
                    </div>

                    <!-- Fan bar (channel 2, only if present) -->
                    @let fanC2LowRpm = shouldShowLowRpmHint(info.fanspeed2 ?? 0, info.fanrpm2 ?? 0);
                    <div class="power-bar" *ngIf="showFanC2" role="img"
                         [class.power-bar--interactive]="fanC2LowRpm"
                         [class.power-bar--max]="isBarMax(info.fanspeed2 ?? 0, 100)"
                         (mouseenter)="showConditionalHoverTooltip('fan-c2', fanC2LowRpm, $event)"
                         (mousemove)="moveConditionalHoverTooltip(fanC2LowRpm, $event)"
                         (mouseleave)="hideHoverTooltip('fan-c2')"
                         [attr.aria-label]="getFanAriaLabel(2, info.fanspeed2 ?? 0, info.fanrpm2 ?? 0)">
                      <div class="power-bar__fill" [style.width.%]="toPct(info.fanspeed2 ?? 0, 0, 100)"></div>
                      <div class="power-bar__label">{{ 'HOME.FAN_VR_LABEL' | translate }}</div>
                      <span class="power-bar-tooltip"
                            *ngIf="fanC2LowRpm"
                            [class.power-bar-tooltip--active]="activeHoverTooltipId === 'fan-c2'"
                            [style.left.px]="hoverTooltipX"
                            [style.top.px]="hoverTooltipY"
                            aria-hidden="true">
                        <span>{{ 'HOME.FAN_LOW_RPM_HINT' | translate }}</span>
                      </span>
                      <div class="power-bar__value power-bar__value--inline">
                        <span class="fan-inline">
                          <ng-container *ngIf="shouldShowFanRpm(info.fanspeed2 ?? 0, info.fanrpm2 ?? 0)">
                            <span class="power-bar__subvalue">{{ (info.fanrpm2 ?? 0) | number: '1.0-0' }}<span class="unit">&nbsp;RPM</span></span>
                            <span class="power-bar__sep">/</span>
                          </ng-container>
                          <span class="power-bar__mainvalue">{{ (info.fanspeed2 ?? 0) | number: '1.0-0' }}<span class="unit">&nbsp;%</span></span>
                        </span>
                      </div>
                    </div>

                  </div>

                  <!-- Chip temps row: always below heatsink temp + fan bars -->
                  <div class="heat-chips heat-chips--row" aria-label="ASIC chip temperatures"
                       *ngIf="hasChipTemps && (info?.asicTemps?.length ?? 0) > 0">
                    <div class="chip-square" *ngFor="let t of (info?.asicTemps ?? []); let i = index"
                         role="img"
                         [class.power-bar--warn]="isAsicTempWarn(t, 10, shutdownTempC(info))"
                         [class.power-bar--crit]="isAsicTempCrit(t, 10, shutdownTempC(info))"
                         [class.power-bar--max]="isBarMax(t, shutdownTempC(info))"
                         [attr.aria-label]="('ASIC ' + (i + 1)) + ': ' + (t | number: '1.1-1') + ' °C'">
                      <div class="chip-square__fill" [style.height.%]="toPct(t, 10, shutdownTempC(info))"></div>
                      <div class="chip-square__bglabel">A{{ i + 1 }}</div>
                      <div class="chip-square__inner">
                        <div class="chip-square__temp">{{ t | number: '1.1-1' }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Nerd*OS logo (dual pool) -->
          <div class="nerdos-logo-row nerdos-logo-row--dual" *ngIf="isDualPool">
            <div class="nerdos-logo-wrap nerdos-logo-wrap--dual">
              <div class="nerdos-logo-wrap__inner" [style.--nerdos-logo-color]="nerdOsLogoColor">
                <div
                  class="nerdos-logo"
                  aria-label="01001110 01100101 01110010 01100100 00101010 01001111 01010011"
                ></div>
                <span class="nerdos-logo-tooltip">01001110 01100101 01110010 01100100 00101010 01001111 01010011</span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<ng-template #resetStatsDialog let-ref="dialogRef">
  <nb-card accent="warning" style="width: 340px">
    <nb-card-header>{{ 'HOME.RESET_STATS' | translate }}</nb-card-header>
    <nb-card-body>
      <p>{{ 'HOME.RESET_STATS_CONFIRM' | translate }}</p>
      <div class="d-flex justify-content-between">
        <button nbButton status="warning" (click)="confirmResetStats(ref)">{{ 'COMMON.RESET' | translate }}</button>
        <button nbButton status="basic" (click)="ref.close()">{{ 'COMMON.CANCEL' | translate }}</button>
      </div>
    </nb-card-body>
  </nb-card>
</ng-template>