<mat-toolbar class="fondoNav" [ngStyle]="{
               'background': firstColorBar && secondColorBar
                              ? 'linear-gradient(' + firstColorBar + ', ' + secondColorBar + ')'
                              : (firstColorBar ? firstColorBar : 'transparent'),
               'background-image': textureBar ? 'url(' + textureBar + ')' : 'none'
             }">

    <mat-toolbar-row class="toolBarRow">
        <div class="w-33">
            <div class="fondoDiv" [routerLink]="userData[1]==='PF' ? ['/homePadres/main'] : userData[1]==='AD' ? ['/homeAdmin/main'] : userData[1]==='AL' ?  ['/homeAlumno/main'] : userData[1]==='PR' ?  ['/homeProfe/main'] : ['/homeAdmin/main']" >
                <img class="logoEscuela" [src]="logo ? logo : 'assets/img/logo-abc.png'" alt="">
            </div>
        </div>
        <div class="w-33 justify-center">
            <span class="title cursor-pointer" [style.color]="fontColorBar"
            [routerLink]="userData[1]==='PF' ? ['/homePadres/main'] : userData[1]==='AD' ? ['/homeAdmin/main'] : userData[1]==='AL' ?  ['/homeAlumno/main'] : userData[1]==='PR' ?  ['/homeProfe/main'] : ['/homeAdmin/main']">
                {{name | uppercase}}
            </span>
        </div>
        <div class="w-33 justify-end">
            <div class="inline" [style.color]="fontColorBar">
                <div class="username">
                    <span>{{simulado ? 'Usuario:': 'Bienvenido:'}} </span>
                    <em style="font-weight: 100;"> {{ userData[2] | titlecase}} </em>
                </div>
                <div class="profile">
                    <span style="margin-left: 20px; margin-right: 10px;">Perfil:</span>
                    <span> {{role}}</span>
                </div>
            </div>
            <button class="button" (click)="actualizarActividad(); logout()" mat-fab color="" *ngIf="!simulado">
                <!-- <button class="button" (click)="getTime();logout()" mat-fab color=""> -->
                <mat-icon class="height">
                    logout
                </mat-icon>
            </button>
            <button class="button" (click)="cerrar()" mat-fab color="" *ngIf="simulado">
                <!-- <button class="button" (click)="getTime();logout()" mat-fab color=""> -->
                <mat-icon style="transform: scale(1.4);">
                    close
                </mat-icon>
            </button>
            
        </div>

        <!-- <div routerLink="/home" class="fondoDiv" style="visibility: hidden;"> -->

        <!-- <span class="example-spacer"></span> -->

        <!-- <span class="title cursor-pointer"
            [routerLink]="route == '/homeAdmin/configuracion' || route == '/homeAdmin/calendar'? ['/homeAdmin/main'] : route === '/homePadres/misHijos' || route === '/homePadres/calendar' ? ['/homePadres/main']: ['/homeAdmin/configuracion']">{{(nombreColegio
            ? nombreColegio : 'Colegio ABC') |
            uppercase}}</span> -->

        <!-- <span class="example-spacer"></span> -->


    </mat-toolbar-row>
</mat-toolbar>