<div class="module-container prevent-select">
  <div id="navigation" class="mb-8 animated fadeIn" style="float: left; margin: 20px;">
    <div class="prev-page prevent-select raised-button-background mat-elevation-z8" matRipple (click)="goBack(1)">
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Panel de control de indicadores</div>
    </div>
    <div class="ml-16 prev-page raised-button-background mat-elevation-z8" matRipple (click)="savePanelElements()">
      <mat-icon style="color: white;">save</mat-icon>
      <div class="page-name ml-4">Guardar cambios</div>
    </div>
  </div>

  <div class="menu-title animated fadeIn ">
    <span>Añadir elementos al panel '{{ panelDetails == null ? '-' : panelDetails.NOMBRE_PANEL }}'</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="indicators-container animated fadeIn" *ngIf="!isLoading && !hasError">
    <div class="modules-panel">
      <div class="module" (click)="changeIndicatorsMenu(5, 'S002V01M06COAC')" [ngClass]="{ module_selected: indicatorsMenu == 5 }">
        <mat-icon>schedule</mat-icon>
        <span>Contadores y activadores</span>
      </div>
      <div class="module" (click)="changeIndicatorsMenu(1, 'S002V01M01ADSI')" [ngClass]="{ module_selected: indicatorsMenu == 1 }">
        <mat-icon>admin_panel_settings</mat-icon>
        <span>Administrador del sistema</span>
      </div>
      <div class="module" (click)="changeIndicatorsMenu(4, 'S002V01M05GEAD')" [ngClass]="{ module_selected: indicatorsMenu == 4 }">
        <mat-icon>shopping_cart</mat-icon>
        <span>Gestión de adquisiciones</span>
      </div>
      <div class="module" (click)="changeIndicatorsMenu(6, 'S002V01M07GEEQ')" [ngClass]="{ module_selected: indicatorsMenu == 6 }">
        <mat-icon>precision_manufacturing</mat-icon>
        <span>Gestión de equipamientos</span>
      </div>
      <div class="module" (click)="changeIndicatorsMenu(8, 'S002V01M09GMCO')" [ngClass]="{ module_selected: indicatorsMenu == 8 }">
        <mat-icon>construction</mat-icon>
        <span>Gestión de mantenimiento correctivo</span>
      </div>
      <div class="module" (click)="changeIndicatorsMenu(9, 'S002V01M10GMPR')" [ngClass]="{ module_selected: indicatorsMenu == 9 }">
        <mat-icon>engineering</mat-icon>
        <span>Gestión de mantenimiento preventivo</span>
      </div>
    </div>
    <div class="indicators-panel animated fadeIn" *ngIf="indicatorsMenu == 5">
      @for (counterChart of countersCharts; track counterChart) {
        <div class="form-cell C04">
          <div class="counter-chart">
            <p class="chart-title">Contador #{{ counterChart.counterID }}</p>
            <p class="chart-subtitle">{{ counterChart.counterEquipment }}</p>
            <canvas
              baseChart
              class="chart"
              [data]="counterChart.chartData"
              [options]="counterChart.chartOptions"
              [type]="counterChart.chartType"
            ></canvas>
            <div class="chart-actions ml-4">
              <button mat-raised-button color="primary" class=" white_font pink_primary_background" (click)="openMeasuresDialog(counterChart.counterID)">
                <mat-icon>history</mat-icon> Historial de medidas
              </button>
              <button mat-raised-button class="ml-4 green_primary_background white_font">
                <mat-icon svgIcon="xls"></mat-icon> Exportar medidas
              </button>
              <button mat-raised-button class="ml-4 white_font" (click)="updatePanelElements(counterChart.counterID)" 
            [ngClass]="{ blue_send_background: !counterChart.isAssigned, red_primary_background: counterChart.isAssigned }">
              <mat-icon>{{ counterChart.isAssigned ? 'close' : 'done' }}</mat-icon>
              {{ counterChart.isAssigned ? 'Eliminar del panel' : 'Añadr al panel' }}
            </button>
            </div>
            
          </div>
        </div>
      }
    </div>
    <div class="indicators-panel animated fadeIn" *ngIf="indicatorsMenu == 1">
      @for (element of systemAdminElements; track element) {
        <div class="form-cell C04 center_horizontal" *ngIf="element.idElement == 'S002V01P01MOCO'">
          <div class="counter-chart">
            <div class="connected_users_indicator">
              <h4>Usuarios conectados</h4>
              <div *ngIf="usersConnected.length == 0" class="users-list-indicator">
                <span style="text-align: center;">
                  Sin conexiones.
                </span>
              </div>
              <div class="users-list-indicator" *ngIf="usersConnected.length > 0">
                <div class="connected-user-item animated fadeIn" *ngFor="let user of usersConnected">
                  <div class="background" [matTooltip]="user.NOMBRE + ' ' + user.APEPAT + ' ' + (user.APEMAT == null ? '' : user.APEMAT)"
                  [style.background]="user.COLOR">
                    <p>{{ user.NOMBRE.charAt(0) }}{{ user.APEPAT.charAt(0) }}</p>
                  </div>
                  <div class="status"></div>
                </div>
              </div>
              <button mat-button>Ver todos</button>
            </div>
            <button mat-raised-button class="white_font" (click)="updatePanelElements('S002V01P01MOCO')" 
            [ngClass]="{ green_primary_background: !element.isAssigned, red_primary_background: element.isAssigned }">
              <mat-icon>{{ element.isAssigned ? 'close' : 'done' }}</mat-icon>
              {{  element.isAssigned ? 'Eliminar del panel' : 'Añadr al panel' }}
            </button>
          </div>
        </div>
      }
    </div>
  </div>
</div>