<div class="animated fadeIn prevent-select" (window:resize)="onResize()" [ngClass]="{ items_container: screenSize > 640, 
  items_container_full_width: screenSize <= 640 }">
    <div id="navigation" class="mb-8">
      <div class="prev-page prevent-select raised-button-background mat-elevation-z8" (click)="goBack(1)" matRipple>
        <mat-icon style="color: white;">arrow_back</mat-icon>
        <div class="page-name ml-4">Elección de datos a exportar según el nivel de acceso</div>
      </div>
    </div>
    <mat-card style="width: 100%; height: 100%;" [ngClass]="{ override_elevation_z8: screenSize > 640, override_elevation_z0: screenSize <= 640 }">
      <mat-card-title style="text-align: center; margin: 15px 0;">Elección de exportación de datos</mat-card-title>
      <mat-card-content>
        <div class="form-order-container" *ngIf="isLoading">
          <div class="is-loading animated fadeIn fast">
            <mat-spinner align="center"></mat-spinner>
            <h3>Cargando datos ...</h3>
          </div>
        </div>
  
        <div class="form-order-container" *ngIf="!isLoading && hasError">
          <div class="has-error animated fadeIn fast">
            <mat-icon class="red_primary_font mb-40" >error</mat-icon>
            <h3>{{ errorStr }}</h3>
          </div>
        </div>
  
        <div class="form-order-container animated fadeIn pt-2 " *ngIf="!isLoading && !hasError">
          <div class="form-column" style="box-sizing: border-box;">
            <div class="form-row">
              <div class="form-cell C12" *ngFor="let module of exportableSpreadsheets">
                <div class="item-permissions">
                  <div class="title">{{ module.moduleName }}</div>
                  <mat-slide-toggle  [checked]="exportPermissions.get(module.module)" (change)="permissionsChange($event, module.module, module.spreadsheets)" 
                  [disabled]="module.spreadsheets.length == 0">
                    Permitir exportar
                  </mat-slide-toggle>
                </div>
                <div class="form-column mt-4 pl-32 " *ngIf="module.spreadsheets.length > 0" style="box-sizing: border-box;">
                  <div class="form-row">
                    <div class="form-cell C12" *ngFor="let spreadsheet of module.spreadsheets">
                      <div class="item-permissions">
                        <div class="title">{{ spreadsheet.id }} - {{ spreadsheet.name }}</div>
                        <mat-slide-toggle [checked]="exportPermissions.get(spreadsheet.id)" (change)="permissionsChange($event, spreadsheet.id, undefined)">
                          Permitir exportar
                        </mat-slide-toggle>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </mat-card-content>
      <mat-card-actions align="end">
        <button mat-button (click)="saveExportPermissions()">
          Guardar permisos
        </button>
      </mat-card-actions>
    </mat-card>
  </div>