<!-- <button class="user-button" mat-stroked-mini-fab [matMenuTriggerFor]="userMenu">
  <mat-icon class="user-button__icon" style="left: -1px;position: relative;">person</mat-icon>
</button> -->

<div *ngIf="this._router.url != '/auth/login' ">
  
<button mat-icon-button  aria-label="Example icon button with a person icon" [matMenuTriggerFor]="userMenu">
  <!-- <mat-icon style="margin-left:-3px;color:white;margin-bottom: 2px;">person</mat-icon> -->
  <!-- <img src="assets/img/user.png" alt="" class="img-fluid" style="height: 35px;transform: translateY(-5px);"> -->

    <button *ngIf="secuLevel != 'B'" mat-mini-fab  style="transform: translateY(-5px);background-color: #5f5f5f; ">
     {{username?.charAt(0)?.toUpperCase()}}
    </button>

    <button *ngIf="secuLevel == 'B'" class="adminButtom" mat-mini-fab   >
      <span style="font-weight: 900;">{{username.charAt(0).toUpperCase()}}</span>
     </button>

</button>
<mat-menu #userMenu="matMenu" xPosition="before">
  <div class="user-menu-title">

    <div>
      <!-- <img src="assets/img/user.png" alt="" *ngIf="!adminUser" class="img-fluid" style="height: 40px;">
      <img src="assets/img/admin.png" alt="" *ngIf="adminUser" class="img-fluid" style="height: 40px;"> -->
      <button mat-mini-fab   style="transform: translateY(-5px);background-color: #7b7b7b;box-shadow: none; pointer-events: none;">
        {{username?.charAt(0)?.toUpperCase()}}
       </button>
      <!-- <img src="assets/img/user.svg" alt=""> -->
    </div>
    <span class="user-menu-title__name" style="font-weight: 600;text-align: center;">{{getUser()}} </span>

    <p class="user-menu-title__name" >{{getEmail()}} </p>
    <!-- <a class="user-menu-title__link" [href]="flatlogicEmail">Flatlogic.com</a> -->
  </div>
  <button *ngIf="secuLevel == 'User'" mat-menu-item class="user-menu__item-title" (click)="openEditProfile(profile)"  style="align-items: center;display: flex;justify-content: center;">
    <mat-icon class="user-menu-icon">person</mat-icon> {{ 'Edit profile' | translate }}
  </button>
  <button mat-menu-item class="user-menu__item-title" hidden="true">
    <mat-icon class="user-menu-icon">description</mat-icon> {{ 'tasks' | translate }}
  </button>
  <button mat-menu-item class="user-menu__item-title" hidden="true">
    <mat-icon class="user-menu-icon">email</mat-icon> {{ 'messages' | translate }}
  </button>
  <div class="sign-button-wrapper">
    <button class="sign-button"  mat-flat-button (click)="signOutEmit()" *ngIf="(!this._router.url.includes('auth')) "> 
      {{ 'signOut' | translate }} <mat-icon style="font-size: large;transform: translateY(2px);">power_settings_new</mat-icon></button>
    <button class="sign-button" mat-flat-button (click)="signOutEmit()" *ngIf="this._router.url.includes('auth')"> {{ 'signIn' | translate }} </button>
  </div>
</mat-menu>

</div>

<ng-template #profile class="mat-dialog-container">
  <div class="row">
    <div class="col-2 col-xl-2 col-lg-2 col-md-2 col-sm-2"></div>
    <div class="col-8 col-xl-8 col-lg-8 col-md-8 col-sm-8"  style="text-align: center;font-size:large;font-weight: 300;margin-top: 20px;">
      <p>{{getEmail()}}</p>
    </div>
    <div class="col-2 col-xl-2 col-lg-2 col-md-2 col-sm-2" style="cursor: pointer;align-items: center;justify-content: center;display: flex;"><mat-icon (click)="closeDialog()">close</mat-icon></div>


    <div style="text-align: center;">
      <img src="assets/img/user-windows.png" alt="profile" style="width:100px;height:100px;" >
 
    </div>
    <br>
    <br>
    <br>
    <br>
    <div class="col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12"  style="text-align: center;font-size:x-large;font-weight: 500;margin-top: 20px;">
      <p>Hi, {{this.username}}!</p>
    </div>



    <div class="col-1 col-xl-1 col-lg-1 col-md-1 col-sm-1"></div>
    <div class="col-10 col-xl-10 col-lg-10 col-md-10 col-sm-10">
     

    </div>
    <div class="col-1 col-xl-1 col-lg-1 col-md-1 col-sm-1"></div>
    <div class="col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">

      <mat-card class="profiledit">

        <div class="col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
    
        </div>
        <br>
        <div class="row">
        <div class="col-1 col-xl-1 col-lg-1 col-md-1 col-sm-1"></div>
        <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">
          
          <p style="font-weight: 400;margin-top: 10px;">Edit your profile details</p>

          <mat-form-field class="columns" appearance="outline"style="height: 15px;width:100%;">

                  <mat-label *ngIf="this.userDetails?.companyProfile && this.userDetails?.companyProfile != ''; else companyProfile">
                      Company profile</mat-label>
                  <ng-template #companyProfile>
                      <mat-label> {{ 'companyProfile' | translate }}
                      </mat-label>
                  </ng-template>
                  <input matInput readonly [(ngModel)]="this.userDetails.companyProfile"
                      [ngModelOptions]="{standalone: true}" style="width:100%;border-bottom: 0px;" >
                  <button mat-icon-button matSuffix *ngIf="!this.userDetails.companyProfile || this.userDetails.companyProfile=='' || this.userDetails.companyProfile==null"
                      (click)="cmpPrFileInput.click()">
                      <mat-icon>attach_file</mat-icon>
                  </button>
                  <button mat-icon-button matSuffix *ngIf="this.userDetails.companyProfile && this.userDetails.companyProfile!='' && this.userDetails.companyProfile!=null"
                      (click)="removeCmpPrFile()">
                      <mat-icon>delete_outline</mat-icon>
                  </button>
                  <input hidden (change)="uploadCmpPrFiles($event)"
                      #cmpPrFileInput type="file" id="file" >
              </mat-form-field>

           </div>
           <div class="col-1 col-xl-1 col-lg-1 col-md-1 col-sm-1"></div>

           <div class="col-1 col-xl-1 col-lg-1 col-md-1 col-sm-1"></div>

           <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">
               <mat-form-field class="columns" appearance="outline"style="height: 15px;margin-top: 25px;width:100%;">

                       <mat-label *ngIf="this.userDetails?.projectCompletedCert && this.userDetails?.projectCompletedCert != ''; else projectCompletedCert">
                          Project Completed certificate</mat-label>
                       <ng-template #projectCompletedCert>
                           <mat-label> {{ 'projectCompletedCert' | translate }}
                           </mat-label>
                       </ng-template>
                       <input matInput readonly [(ngModel)]="this.userDetails.projectCompletedCert" style="width:100%;border-bottom: 0px;" 
                           [ngModelOptions]="{standalone: true}">
                       <button mat-icon-button matSuffix *ngIf="!this.userDetails.projectCompletedCert || this.userDetails.projectCompletedCert=='' || this.userDetails.projectCompletedCert==null"
                           (click)="prCmpltCertFileInput.click()">
                           <mat-icon>attach_file</mat-icon>
                       </button>
                       <button mat-icon-button matSuffix *ngIf="this.userDetails.projectCompletedCert && this.userDetails.projectCompletedCert!='' && this.userDetails.projectCompletedCert!=null"
                           (click)="removeprCmpltCertFile()">
                           <mat-icon>delete_outline</mat-icon>
                       </button>
                       <input hidden (change)="uploadprCmpltCertFiles($event)"
                           #prCmpltCertFileInput type="file" id="file" >
                   </mat-form-field>

                </div>
           <div class="col-1 col-xl-1 col-lg-1 col-md-1 col-sm-1"></div>



           <div class="col-1 col-xl-1 col-lg-1 col-md-1 col-sm-1"></div>
                         
                <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10" style="margin-top: 20px;">
                   <mat-form-field style="width: 100%" appearance="outline">
                       <mat-label>maximum value of single project completed till date</mat-label>
                       <input matInput [(ngModel)]="this.userDetails.maxAmount" type="number" placeholder="{{ 'maximum value of single project completed till date'| translate }}" style="width:100%;border-bottom: 0px;" >
                   </mat-form-field>
               </div>
               <div class="col-1 col-xl-1 col-lg-1 col-md-1 col-sm-1"></div>
              </div>
                       <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"
                           style="text-align: center;margin-top: 25px;">
                           <button mat-raised-button (click)="saveData()" style="background-color: lavender; width: 75%;border-radius:25px" class="saveButton">{{ 'save' | translate}}</button>
                       </div>
                       <br>
                       <br>
                   
      </mat-card>

    </div>

  </div>
</ng-template>