<mat-card style="width: 75%;margin: 32px auto;" class="mat-elevation-z8">
    <mat-card-title style="text-align: center;">Editar permisos - Perfil {{ profileName }}</mat-card-title>
    <mat-card-content>
        <div class="card-content-container" style="overflow-y: auto;">
            <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>
            <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" *ngIf="!isLoading && !hasError && !isWatching">
                <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
                  <button mat-icon-button disabled></button>
                  <mat-checkbox class="checklist-leaf-node"
                                [checked]="checklistSelection.isSelected(node)"
                                (change)="todoLeafItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
                </mat-tree-node>
              
                <mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding>
                  <button mat-icon-button disabled></button>
                  <mat-form-field appearance="fill">
                    <mat-label>New item...</mat-label>
                    <input matInput #itemValue placeholder="Ex. Lettuce">
                  </mat-form-field>
                </mat-tree-node>
              
                <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
                  <button mat-icon-button matTreeNodeToggle
                          [attr.aria-label]="'Toggle ' + node.item">
                    <mat-icon class="mat-icon-rtl-mirror">
                      {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                    </mat-icon>
                  </button>
                  <mat-checkbox [checked]="descendantsAllSelected(node)"
                                [indeterminate]="descendantsPartiallySelected(node)"
                                (change)="todoItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
                </mat-tree-node>
            </mat-tree>
            <mat-tree [dataSource]="dataSourceSee" [treeControl]="treeControlSee" *ngIf="!isLoading && !hasError && isWatching" class="example-tree">
              <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
                <li class="mat-tree-node">
                  <button mat-icon-button disabled></button>
                  {{ node.name }}
                </li>
              </mat-tree-node>
              <!--<mat-tree-node *matTreeNodeDef="let node; when hasChildSee" matTreeNodePadding>
                <button mat-icon-button matTreeNodeToggle>
                  <mat-icon class="mat-icon-rtl-mirror">
                    {{ treeControlSee.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
                  </mat-icon>
                </button>
                {{ node.name }}
              </mat-tree-node>-->
              <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildSee">
                <li>
                  <div class="mat-tree-node">
                    <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
                      <mat-icon class="mat-icon-rtl-mirror">
                        {{ treeControlSee.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
                      </mat-icon>
                    </button>
                    {{ node.name }}
                  </div>
                  <ul  [@slideVertical]="treeControlSee.isExpanded(node) ? 'show' : null">
                    <ng-container matTreeNodeOutlet></ng-container>
                  </ul>
                </li>
              </mat-nested-tree-node>
            </mat-tree>
        </div>
    </mat-card-content>
    <mat-card-actions *ngIf="!isLoading && !hasError" align="end">
        <button mat-flat-button color="warn" style="margin-right: 8px;" (click)="return()">Cerrar</button>
        <button *ngIf="!isWatching" mat-flat-button color="primary" (click)="save()">
            {{ isNew ? 'Registrar perfil' : 'Guardar cambios' }}
        </button>
    </mat-card-actions>
</mat-card>
