<div class="module-container prevent-select animated fadeIn" (window:resize)="onResize()" style="background: white;">
  <div class="row-tools-bar">
    <button mat-raised-button class="raised-button-background mb-16" (click)="goBack(1)">
      Regresar<mat-icon>arrow_back</mat-icon>
    </button>
  </div>

  <div class="menu-title animated fadeIn">
    <span>Monitoreo de la arquitectura central del SAM</span>
  </div>

  <div class="loader-container" *ngIf="isLoading">
    <mat-spinner></mat-spinner>
    <h2 class="loader-label">Cargando...</h2>
  </div>
  
  <div class="error-container" *ngIf="!isLoading && hasError">
    <mat-icon style="color: #e53935; transform: scale(5); margin-bottom: 48px;">error</mat-icon>
    <h1 style="color: #e53935;">¡Error!</h1>
    <p style="font-style: italic; font-size: 16px; overflow-wrap: anywhere; text-align: center;">{{ errorStr }}</p>
  </div>

  <div class="form-column monitored-items-container animated fadeIn" *ngIf="!isLoading && !hasError">
    <div class="form-row">
      <div class="form-cell C12 item-title">Servidor Dell R650</div>
    </div>
    <div class="form-row">
      @for(channel of prtgChannels; track channel){
        @if(prtgChannelsConfig.get(channel)!.route.includes('R650')){
          <div class="form-cell monitored-item" [ngClass]="{ C04: screenSize > 1670, C06: screenSize <= 1670 && screenSize > 1200, C12: screenSize <= 1200 }">
            <div class="channel-route">{{ prtgChannelsConfig.get(channel)!.route }}</div>
            <div class="channel-info">
              Canal {{ channel }} - {{ prtgChannelsConfig.get(channel)!.name }}. Valor actual: {{ prtgChannelsConfig.get(channel)!.currentValue }}. 
              <div [ngClass]="{ ok_state: prtgChannelsConfig.get(channel)!.state, error_state: !prtgChannelsConfig.get(channel)!.state }" class="mv-4"
              [matTooltip]="'Mínimo: ' + prtgChannelsConfig.get(channel)!.minValue + '. Máximo: ' + prtgChannelsConfig.get(channel)!.maxValue + '.'"></div>
              <span *ngIf="prtgChannelsConfig.get(channel)!.state">Ok</span>
              <span *ngIf="!prtgChannelsConfig.get(channel)!.state">Error</span>
            </div>
            <canvas
              baseChart
              class="chart"
              [data]="prtgChannelsConfig.get(channel)!.chartConfig!.chartData"
              [options]="prtgChannelsConfig.get(channel)!.chartConfig!.chartOptions"
              [type]="prtgChannelsConfig.get(channel)!.chartConfig!.chartType"
            ></canvas>
          </div>
        }
      }
    </div>
    <div class="form-row mt-8">
      <div class="form-cell C12 item-title">Servidor Dell R450</div>
    </div>
    <div class="form-row">
      @for(channel of prtgChannels; track channel){
        @if(prtgChannelsConfig.get(channel)!.route.includes('R450')){
          <div class="form-cell monitored-item" [ngClass]="{ C04: screenSize > 1670, C06: screenSize <= 1670 && screenSize > 1200, C12: screenSize <= 1200 }">
            <div class="channel-route">{{ prtgChannelsConfig.get(channel)!.route }}</div>
            <div class="channel-info">
              Canal {{ channel }} - {{ prtgChannelsConfig.get(channel)!.name }}. Valor actual: {{ prtgChannelsConfig.get(channel)!.currentValue }}. 
              <div [ngClass]="{ ok_state: prtgChannelsConfig.get(channel)!.state, error_state: !prtgChannelsConfig.get(channel)!.state }" class="mv-4"
              [matTooltip]="'Mínimo: ' + prtgChannelsConfig.get(channel)!.minValue + '. Máximo: ' + prtgChannelsConfig.get(channel)!.maxValue + '.'"></div>
              <span *ngIf="prtgChannelsConfig.get(channel)!.state">Ok</span>
              <span *ngIf="!prtgChannelsConfig.get(channel)!.state">Error</span>
            </div>
            <canvas
              baseChart
              class="chart"
              [data]="prtgChannelsConfig.get(channel)!.chartConfig!.chartData"
              [options]="prtgChannelsConfig.get(channel)!.chartConfig!.chartOptions"
              [type]="prtgChannelsConfig.get(channel)!.chartConfig!.chartType"
            ></canvas>
          </div>
        }
      }
    </div>
  </div>
</div>