doneit-web/src/app/modals/profile/edit-profile/edit-profile.page.html

<ion-content class=" bg-blue">
  <div class="main-content header-fix width-100 overflow-y-auto height-100">
    <div class="profile-header width-100 ">
      <div class="div-logo  width-40">
        <div class="logo-icon">
          <img *ngIf="ThemeService.currentTheme == 'default' " src='assets/images/logo-no-bg.png' alt='logo'>
          <img *ngIf="ThemeService.currentTheme == 'gov' " src='assets/images/theme/gov/governoangola_A.png' alt='logo'>
          <img *ngIf="ThemeService.currentTheme == 'doneIt' "
            src='assets/images/theme/{{ThemeService.currentTheme}}/governoangola_A1.png' alt='logo'>
        </div>
        <div *ngIf="ThemeService.currentTheme == 'gov'"
          class="logo-description d-flex align-center justify-content-center">
          <div class="logo-description-content">
            <!-- <p class="logo-description-text">Calendário Partilhado</p> -->
            <p class="logo-description-text tp-5">{{ environment.logoLabel }}</p>
            <div class="add-line"></div>
            <p class="logo-description-text tp-5">GABINETE DIGITAL</p>
          </div>
        </div>
        <div *ngIf="ThemeService.currentTheme == 'default'"
          class="logo-description d-flex align-center justify-content-center">
          <div class="logo-description-content">
            <!-- <p class="logo-description-text color-white">Calendário Partilhado</p> -->
            <p class="logo-description-text tp-5 color-white">{{ environment.logoLabel }}</p>
            <div class="add-line-white"></div>
            <p class="logo-description-text tp-5 color-white">GABINETE DIGITAL</p>
          </div>
        </div>

        <div *ngIf="ThemeService.currentTheme == 'doneIt'"
          class="logo-description d-flex align-center justify-content-center">
          <div class="logo-description-content">
            <!-- <p class="logo-description-text color-white">Calendário Partilhado</p> -->
            <p class="logo-description-text tp-5 color-white" style="color: transparent;">{{ environment.logoLabel }}
            </p>
            <div class="add-line-white"></div>
          </div>
        </div>
      </div>
      <div class="btn-close d-flex cursor-pointer pr-20" (click)="close()">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon"
          src="assets/images/icons-search-close.svg"></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon"
          src="assets/images/theme/gov/icons-search-close.svg"></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="icon"
          src="assets/images/theme/{{ThemeService.currentTheme}}/icons-search-close.svg"></ion-icon>
      </div>
    </div>
    <div class="profile-content overflow-y-auto width-100 height-100">
      <div class="profile-title d-flex justify-space-between align-center width-100">
        <div class="d-flex align-center">
          <div>Dados do perfil</div>
        </div>

        <!-- <div class="d-flex " (click)="close()">
          <ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
        </div> -->
      </div>

      <div>
        <div class="d-flex align-center flex-column" (click)="takePicture()">

          <div *ngIf="profilePicture == '' ">
            <img
             
              class="profile-pic" src="assets/images/theme/gov/icons-profile.svg">

            <!-- <img *ngIf="SessionStore.user.RoleDescription == 'Presidente da República' " class="profile-pic"
              src='assets/images/presidente.png'>
            <img *ngIf="SessionStore.user.RoleDescription == 'Ministro e Director do Gabinete do PR' "
              class="profile-pic" src='assets/images/ministro.png'>
            <img *ngIf="SessionStore.user.RoleDescription == 'Secretário Geral' " class="profile-pic"
              src='assets/images/secretaria_geral.png'> -->
          </div>

          <div *ngIf="profilePicture != '' ">
            <img class="profile-pic" src={{profilePicture}}>
          </div>



          <!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="profile-pic"
            src="assets/images/icons-default-profile.svg"></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="profile-pic"
            src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="profile-pic"
            src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon> -->
          <div
            style="background: black;width: 50px;height: 50px;position: relative;top: -33px;left: 38px;border-radius: 55px;overflow: hidden;border: 5px solid white;">
            <img src="assets/images/camera.png">
          </div>
        </div>

      </div>

      <div class="profile-info">
        <div class="user-role" *ngIf="SessionStore.user.RoleDescription">{{SessionStore.user.RoleDescription}}</div>

        <div class="container-div width-100">
          <div class="ion-item-class-2">
            <div class="ion-icon-class">
              <ion-icon slot="start" name="person" class="ion-icon-class-theme"></ion-icon>
            </div>
            <div class="ion-input-class">
              <ion-input disabled placeholder="Nome" [(ngModel)]="SessionStore.user.FullName"></ion-input>
            </div>
          </div>
        </div>

        <div class="container-div width-100">
          <div class="ion-item-class-2">
            <div class="ion-icon-class">
              <ion-icon slot="start" name="mail" class="ion-icon-class-theme"></ion-icon>
            </div>
            <div class="ion-input-class">
              <ion-input disabled placeholder="Email" [(ngModel)]="SessionStore.user.Email"></ion-input>
            </div>
          </div>
        </div>

        <!-- <div class="profile-title d-flex justify-space-between align-center width-100">
          <div class="d-flex align-center">
            <div>Tema</div>
          </div>
        </div>

        <div class="profile-title d-flex justify-space-between align-center width-100">
          <div class="d-flex align-center">
            <div class="btn-close d-flex cursor-pointer" (click)="changeTheme('gov')">
              <img style="width: 40px;" src="assets/images/theme/gov/governoangola_A.png">
            </div>

            <div class="btn-close d-flex cursor-pointer pr-10 pl-10" (click)="changeTheme('default')">
              <img style="width: 40px;" src="assets/images/logo-removebg-preview.png" />
            </div>

          </div>
        </div> 

      </div>


      <div class="login-preference width-100" *ngIf="!platform.is('desktop') && !platform.is('mobileweb')">
        <div class="preference">Preferência Login</div>

        <ion-row>
          <ion-col class="align-center d-flex">
            <div class="d-flex align-center" (click)="LoginPreferenceMethod('Pin')">
              <ion-checkbox [checked]="SessionStore.user.LoginPreference=='Pin' " class="checkBox"></ion-checkbox>
              PIN
            </div>
          </ion-col>
        </ion-row>
      </div>
    </div>
  </div>
</ion-content>
<!--
  Para adicionar a funcionalidade assim que o método
  para alterar o nome e email estiver pronto
-->
<ion-footer hidden class=" footer-container ion-no-border bg-blue">

  <div class="d-flex justify-space-between">

    <ion-buttons slot="end" (click)="close()">
      <button class="btn-ok" fill="clear" color="#fff">
        <ion-label>Enviar</ion-label>
      </button>
    </ion-buttons>
    <ion-buttons slot="start" (click)="close()">
      <button class="btn-cancel" fill="clear" color="#061b52">
        <ion-label>Cancelar</ion-label>
      </button>
    </ion-buttons>
    
  </div>

</ion-footer>