<div class="items-container animated fadeIn prevent-select">
  <div class="row-tools-bar no-padding">
    <button mat-raised-button class="raised-button-background mb-8" (click)="goBack(1)">
      Administración de perfiles<mat-icon>arrow_back</mat-icon>
    </button>
  </div>
  <mat-card class="override-elevation-z8" style="width: 100%; height: 100%;">
    <mat-card-title style="text-align: center; margin: 15px 0;">{{ tituloCard }}</mat-card-title>
    <mat-card-content>
      <div class="loader-container animated fadeIn" *ngIf="isLoading">
        <mat-spinner></mat-spinner>
        <h2 class="loader-label">Cargando...</h2>
      </div>
      <div class="error-container animated fadeIn fast" *ngIf="!isLoading && hasError">
        <mat-icon style="color: #e53935; transform: scale(5); margin: 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="name-container animated fadeIn" *ngIf="!isLoading && !hasError">
        <mat-form-field appearance="outline" style="width: 384px;">
          <mat-label>Nombre del perfil</mat-label>
          <input matInput placeholder="Ingresa el nombre del perfil" [formControl]="profileName" [errorStateMatcher]="errorMatcher">
          <mat-error *ngIf="profileName.hasError('required')">
            El nombre del perfil es <strong>requerido</strong>
          </mat-error>
          <mat-error *ngIf="profileName.hasError('minlength')">
            El nombre del perfil debe tener al menos <strong>8 caracteres</strong>
          </mat-error>
          <mat-error *ngIf="profileName.hasError('maxlength')">
            El nombre del perfil debe tener máximo <strong>50 caracteres</strong>
          </mat-error>
        </mat-form-field>
        <h2>Asignar permisos</h2>
        <div class="accordion-container">
          <mat-accordion class="example-headers-align">
            <mat-expansion-panel *ngFor="let module of permissions" class="mat-elevation-z0 borders" [disabled]="!module.enabled">
              <mat-expansion-panel-header>
                <mat-panel-title>{{ module.id }}</mat-panel-title>
                <mat-panel-description>
                  {{ module.name }}
                  <button mat-flat-button class="no_wrap" (click)="enableModule(module.id)" [ngClass]="{
                      green_primary_background: module.access == 2 && module.enabled,
                      amber_primary_background: module.access == 1 && module.enabled,
                      red_primary_background: module.access == 0 && module.enabled,
                      white_font: module.access == 0 && module.enabled,
                  }" [disabled]="!module.enabled">{{ getAccessText(module.access) }}</button>
                </mat-panel-description>
              </mat-expansion-panel-header>
              <mat-accordion *ngIf="hasChildren(module.id)" class="example-headers-align">
                <mat-expansion-panel *ngFor="let submodule of module.children" class="mat-elevation-z0 borders">
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                      {{ submodule.id }}
                    </mat-panel-title>
                    <mat-panel-description>
                      {{ submodule.name }}
                      <button mat-flat-button class="white_font no_wrap" (click)="enableSubmodule(module.id, submodule.id)" [ngClass]="{
                          green_primary_background: submodule.access == 2,
                          amber_primary_background: submodule.access == 1,
                          red_primary_background: submodule.access == 0
                      }">{{ getAccessText(submodule.access) }}</button>
                    </mat-panel-description>
                  </mat-expansion-panel-header>
                  <mat-accordion class="example-headers-align">
                    <mat-expansion-panel *ngFor="let function of submodule.children" [hideToggle]="function.children == undefined || function.children == null || function.children.length == 0" class="mat-elevation-z0 borders">
                      <mat-expansion-panel-header>
                        <mat-panel-title>
                          {{ function.id }}
                        </mat-panel-title>
                        <mat-panel-description>
                          {{ function.name }}
                          <button mat-flat-button class="white_font no_wrap" (click)="enableFunction(module.id, submodule.id, function.id)" [ngClass]="{
                            green_primary_background: function.access == 2,
                            amber_primary_background: function.access == 1,
                            red_primary_background: function.access == 0
                          }">{{ getAccessText(function.access) }}</button>
                        </mat-panel-description>
                      </mat-expansion-panel-header>
                      <mat-accordion *ngIf="!(function.children == undefined || function.children == null || function.children.length == 0)" class="example-headers-align">
                        <mat-expansion-panel *ngFor="let screen of function.children" hideToggle class="mat-elevation-z0 borders">
                          <mat-expansion-panel-header>
                            <mat-panel-title>
                              {{ screen.id }}
                            </mat-panel-title>
                            <mat-panel-description>
                              {{ screen.name }}
                              <button mat-flat-button class="white_font no_wrap" (click)="enableScren(module.id, submodule.id, function.id, screen.id)" [ngClass]="{
                                green_primary_background: screen.access == 2,
                                amber_primary_background: screen.access == 1,
                                red_primary_background: screen.access == 0
                              }">{{ getAccessText(screen.access) }}</button>
                            </mat-panel-description>
                          </mat-expansion-panel-header>
                        </mat-expansion-panel>
                      </mat-accordion>
                    </mat-expansion-panel>
                  </mat-accordion>
                </mat-expansion-panel>
              </mat-accordion>
              <div *ngIf="!hasChildren(module.id)" class="img-container">
                <img src="assets/img/empty_data.svg" alt="prueba" width="128px" class="mb-8">
                <p>No se encontró información</p>
              </div>
            </mat-expansion-panel>
          </mat-accordion>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions align="end" *ngIf="!isLoading && !hasError">
      <div matTooltip="Su perfil no cuenta con los permisos suficientes para ejecutar esta acción." 
      [matTooltipDisabled]="realTimeUpdateEnabled" *ngIf="action != 'detalles'">
        <button mat-button (click)="save()" [disabled]="!realTimeUpdateEnabled">Guardar perfil</button>
      </div>
    </mat-card-actions>
  </mat-card>
</div>
