Mining/ui/src/app/dashboard.component.html

<div class="dashboard-view">
  @if (error()) {
    <wa-card class="card-error">
      <div slot="header">
        <wa-icon name="exclamation-triangle" style="font-size: 1.5rem;"></wa-icon>
        An Error Occurred
      </div>
      <p>{{ error() }}</p>
    </wa-card>
  }

  @if (state().runningMiners.length > 0) {
    <div class="dashboard-content">
      <!-- Stats Bar for small containers -->
      <div class="stats-bar-container">
        <snider-mining-stats-bar [stats]="state().runningMiners[0]?.full_stats" mode="bar"></snider-mining-stats-bar>
      </div>

      <!-- Chart -->
      <div class="chart-container">
        <snider-mining-chart></snider-mining-chart>
      </div>

      <!-- Stats List for large containers -->
      <div class="stats-list-container">
        <snider-mining-stats-bar [stats]="state().runningMiners[0]?.full_stats" mode="list"></snider-mining-stats-bar>
      </div>
    </div>
  } @else {
    <div class="centered-container">
      <p>No miners running.</p>
    </div>
  }
</div>