<div class="hide">
    <div class="row">
        <!--<div class="close-icon">
      <a (click)="closeNavDetails()">
        <img src="{{img_path_prefix}}close-icon.png" alt="close">
      </a>
    </div>-->
        <div class="col-md-6 col-xs-12 role-img-container">
            <div class="role-img">
                <img src="{{img_path_prefix}}bitmap.png" alt="">
            </div>
        </div>
        <div class="col-md-6 col-xs-12 role-tiles-container">
            <div class="row">
                <h1>Welcome <strong>{{userName}}</strong>, to the PlayGround</h1>
                <h2>Choose your role</h2>
            </div>
            <div class="row">
                <mat-grid-list cols="3" rowHeight="210px" gutterSize="10px">
                    <mat-grid-tile class="role-box" *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
                        [hidden]="tile.hidden" (click)="routeAuth(tile.title,tile.link)">
                        <img src="{{tile.src}}" class="tile-img">
                        <figcaption>{{tile.title}}</figcaption>
                    </mat-grid-tile>
                </mat-grid-list>
                <!--<app-dialog [title]="dialogData.title" [text]="dialogData.text" (confirm)="confirmDelete($event)"></app-dialog>-->
            </div>
        </div>
    </div>
</div>

<div *ngIf="employee" class="col-lg-10 col-md-10 col-sm-10 col-xs-12 center-always no-padding">
    <div class="row">
        <div class="col-xs-12 role-tiles-container">
            <h1 *ngIf="employee.firstName" class="welcomeText">Welcome <strong>{{employee.firstName}} !</strong></h1>
        </div>
    </div>
    <div class="row" >
        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 no-padding">
            <div class="col-md-3" *ngIf="roleNameEmployee"></div>
            <div class="col-md-3 col-xs-12" *ngIf="checkRoles('TA') || checkRoles('HEAD_COACH') || checkRoles('COACH')"
                (click)="selectSession('TA')">
                <div class="rectangle-TA">
                    <h3>Talent Acquisition
                        <h4>Onboard and Manage Candidates</h4>
                    </h3>
                </div>
            </div>
            <div class="col-md-3 col-xs-12" *ngIf="checkRoles('EMPLOYEE') || checkRoles('HEAD_COACH')" (click)="selectSession('MS')">
                <div class="rectangle-MS" [ngClass]="roleNameEmployee">
                    <h3>My Space
                        <h4>Learning Environment</h4>
                    </h3>
                </div>
                <div *ngIf="checkRoles('HEAD_COACH')" (click)="selectSession('TT')">
                    <div class="rectangle-TT">
                        <h3>Talent Transformation
                            <h4>Manage Employees</h4>
                        </h3>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xs-12" (click)="selectSession('EE')">
                <div class="rectangle-EE">
                    <h3>Engineering Environment
                        <h4>Collaborate with other Engineers and explore. </h4>
                    </h3>
                </div>
            </div>
            <div class="col-md-3 col-xs-12" *ngIf="checkRoles('ADMIN')" (click)="selectSession('AC')">
                <div class="rectangle-AC">
                    <h3>Admin Configurations
                        <h4>Basic Setup, Engineering Environment Configurations and User Management
                        </h4>
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>