<div class="control-panel-main-container" (window:resize)="onResize()">
  <h1 *ngIf="isPreview">Vista previa del panel '{{ controlPanel == null ? '-' : controlPanel.NOMBRE_PANEL + " (" + controlPanel.ID_PANEL + ")" }}'</h1>
  <a id="download" class="hidden"></a>
  <div [ngClass]="{ control_panel_for_preview: isPreview && screenSize > 535, control_panel_for_preview_movile: isPreview && screenSize <= 535,
  control_panel: !isPreview && screenSize > 535 }">
    <div *ngIf="panelElementsIDS.includes('S002V01P01MOCO')" [ngClass]="{ connected_users_indicator: screenSize > 535, 
    connected_users_indicator_movile: screenSize <= 535 }">
      <h4>Usuarios conectados</h4>
      <div *ngIf="usersConnected.length == 0" class="users-list-indicator" [ngClass]="{ full_height: !isPreview, partial_height: isPreview }">
        <span style="text-align: center;">
          Sin conexiones.
        </span>
      </div>
      <div class="users-list-indicator" *ngIf="usersConnected.length > 0" id="users-list-indicator">
        <div class="connected-user-item animated fadeIn" *ngFor="let user of usersConnected" [ngClass]="{ item_v: screenSize > 535, item_h: screenSize <= 535 }">
          <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>
    <mat-progress-bar mode="indeterminate" style="width: calc(100% - 128px);" *ngIf="isLoading"></mat-progress-bar>
    <div [ngClass]="{ 
      indicators_container_full: !panelElementsIDS.includes('S002V01P01MOCO'), 
      horizontal_view: controlPanel!.ORIENTACION == 'Horizontal',
      indicators_container_partial: panelElementsIDS.includes('S002V01P01MOCO') && screenSize > 535, 
      indicators_container_partial_movile: panelElementsIDS.includes('S002V01P01MOCO') && screenSize <= 535, 
      vertical_view: controlPanel!.ORIENTACION == 'Vertical' 
    }" id="indicators-container" style="overflow-y: auto;">
      @for (counterChart of countersCharts; track counterChart) {
        <div class="form-cell" [ngClass]="{ C04: screenSize > 1480, C05: screenSize <= 1480 && screenSize > 1320, 
        C06: screenSize <= 1320 && screenSize > 1120, C07: screenSize <= 1120 && screenSize > 940, C08: screenSize <= 940 && screenSize > 790, 
        C10: screenSize <= 790 && screenSize > 650, C12: screenSize <= 650 }" *ngIf="controlPanel!.ORIENTACION == 'Horizontal'">
          <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">
              <button mat-raised-button color="primary" class="mr-4" (click)="openMeasuresDialog(counterChart.counterID)">
                <mat-icon>history</mat-icon> Historial de medidas
              </button>
              <button mat-raised-button class="green_dark_background white_font" (click)="exportExcelData('S002V01M06COAC', counterChart.counterID)">
                <mat-icon svgIcon="xls"></mat-icon> Exportar medidas
              </button>
            </div>
          </div>
        </div>
        <div class="form-cell" [ngClass]="{ C04: screenSize > 1480, C06: screenSize <= 1480 && screenSize > 960, 
        C12: screenSize <= 960 }" *ngIf="controlPanel!.ORIENTACION == 'Vertical'">
          <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">
              <button mat-raised-button color="primary" (click)="openMeasuresDialog(counterChart.counterID)">
                <mat-icon>history</mat-icon> Historial de medidas
              </button>
              <button mat-raised-button class="green_dark_background white_font">
                <mat-icon svgIcon="xls"></mat-icon> Exportar medidas
              </button>
            </div>
          </div>
        </div>
      }
    </div>
  </div>
</div>