<ion-header class="ion-no-border">
  <app-header></app-header>
</ion-header>

<ion-content class="height-100 container-wrapper">
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content>
    </ion-refresher-content>
  </ion-refresher>

  <div class="main-content d-flex height-100 border-t-radius">

      <!-- Aside left -->
      <div class="aside-wrapper d-flex flex-column width-md-40 flex-grow-1">
        <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
        <div class="title-container">
          <div class="title">
            <ion-label>Gabinete Digital</ion-label>
          </div>
          <button *ngIf="hideRefreshBtn" class="btn-no-color btn-refresh" (click)="doRefresh($event)">
            <ion-icon class="title-icon font-awesome" name="reload-circle"></ion-icon>
          </button>
          <div *ngIf="!hideRefreshBtn" class="title-icons">
              <ion-segment [(ngModel)]="segmentVista" (ionChange)="onSegmentVistaChange()">
                <ion-segment-button value="listview" class="ion-segment-button-no-border">
                  <fa-icon icon="align-justify"></fa-icon>
                </ion-segment-button>
                <ion-segment-button value="boxview" class="ion-segment-button-no-border">
                  <fa-icon icon="th-large"></fa-icon>
                </ion-segment-button>
              </ion-segment>
          </div>
        </div>
        <div [ngSwitch]="segmentVista" class="overflow-y-auto">
          <!-- This is the list view -->

          <div *ngSwitchCase="'listview'">
            <ion-item-sliding>
            <div class="listview">
              <ion-list *ngIf="allProcessesList">
                <div
                  class="item-wrapper box-hover ion-no-padding cursor-pointer"
                  *ngFor = "let task of allProcessesList"
                  (click)="goToProcess(task.SerialNumber, task.WorkflowName, task.activityInstanceName)">
                  <div class="item width-100">
                    <div class="item-top-detail">
                      <div class="item-subject">
                        <ion-label>{{ task.Folio }}</ion-label>
                      </div>
                      <div *ngIf="task.DocumentsQty != 0" class="item-icon">
                        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-attachment.svg"></ion-icon>
                        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-expediente-attachment.svg"></ion-icon>
                        <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' " src="assets/images/theme/gov/icons-expediente-attachment.svg"></ion-icon>
                        <label>{{task.DocumentsQty}}</label>
                      </div>
                    </div>
                    <div class="item-middle-detail">
                      <div class="item-remetente">
                        <ion-label>{{task.Senders}}</ion-label>
                      </div>
                    </div>
                    <div *ngIf="task.Agenda" class="item-middle-detail">
                      <div class="item-remetente">
                        <ion-label>{{task.customDate}}</ion-label>
                      </div>
                    </div>
                    <div *ngIf="task.Agenda" class="item-middle-detail-extra">
                      <div class="item-middle-detail-extra-text">
                        <ion-label *ngIf=" task.WorkflowName == 'Agenda Oficial PR' || task.WorkflowName == 'Agenda Pessoal PR'">
                          Agenda {{task.Agenda}} do Presidente da República
                        </ion-label>
                        <ion-label *ngIf=" task.WorkflowName == 'Agenda Oficial MDGPR' || task.WorkflowName == 'Agenda Pessoal MDGPR'">
                          A sua agenda {{task.Agenda}}
                        </ion-label>
                      </div>
                    </div>
                    <div class="item-bottom-detail d-flex align-items-center">
                      <div class="item-workflow">
                        <span class="label">{{task.activityInstanceName}}</span>
                      </div>
                      <div class="item-date">
                        <ion-label>{{ task.CreateDate | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
                      </div>
                    </div>
                  </div>
                </div>
              </ion-list>
            </div>
          </ion-item-sliding>
          </div>

          <!-- This is the box view -->
          <div *ngSwitchCase="'boxview'" class="aside overflow-y-auto d-flex  flex-wrap width-100 height-100">

            <div *ngIf="hideInMobile" (click)="openAllProcessesPage()" [class.active]="selectedElement == 'allProcessesTag'"  class="box-hover exp-card d-flex flex-column" >
              <div class="d-flex justify-center">
               <!--  <ion-icon  src="assets/images/icons-agenda.svg"></ion-icon> -->
                <fa-icon class="icon-selected" icon="align-justify"></fa-icon>
              </div>
              <p class="text-center exp-card-title ">Todas as tarefas</p>
              <p class="text-center exp-card-content">{{ allProcessesList.length }} <span class="title1">Documentos</span></p>
            </div>

            <div (click)="openEventsToApprovePage();selectedElement='approval'" [class.active]="selectedElement == 'approval'"  class="box-hover exp-card d-flex flex-column" *ngIf="loggeduser.Profile == 'MDGPR'" >
              <div class="d-flex justify-center">
                <ion-icon  src="assets/images/icons-agenda.svg"></ion-icon>
              </div>
              <p class="text-center exp-card-title ">Eventos para Aprovação</p>
              <p class="text-center exp-card-content">{{eventoaprovacaostore.countMd + eventoaprovacaostore.countPr}} <span class="title1">Documentos</span></p>
            </div>

            <div (click)="openExpedientListPage(); selectedElement='Correspondence'" [class.active]="selectedElement == 'Correspondence'" class="box-hover exp-card d-flex flex-column justify-center">
              <div class="d-flex justify-center">
                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-correspondencia.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'Correspondence'" src="assets/images/theme/gov/icons-correspondencia.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'Correspondence'" src="assets/images/theme/gov/icons-correspondencia-hover.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'Correspondence'" src="assets/images/theme/gov/icons-correspondencia.svg"></ion-icon>
              </div>
              <p class="text-center exp-card-title ">Expediente</p>
              <p class="text-center exp-card-content">{{expedientegbstore.count}} <span class="title1">Documentos</span></p>
            </div>

            <!-- <div  [class.active]="selectedElement == 'Pending'" (click)="openPendentesPage(); selectedElement='Pending'" class="exp-card d-flex flex-column justify-center" > -->
            <div  [class.active]="selectedElementF('Pending')" (click)="openPendentesPage(); selectedElement='Pending'" class="box-hover exp-card d-flex flex-column justify-center"  >
              <div class="d-flex justify-center">
                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-pendente.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'Pending'" src="assets/images/theme/gov/icons-expediente-pendente.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'Pending'" src="assets/images/theme/gov/icons-expediente-pendente-hover.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'Pending'" src="assets/images/theme/gov/icons-expediente-pendente.svg"></ion-icon>
              </div>
              <p *ngIf="loggeduser.Profile == 'MDGPR'" class="text-center exp-card-title ">Pendentes</p>
              <p *ngIf="loggeduser.Profile == 'PR'" class="text-center exp-card-title ">Meus Pendentes</p>
              <p class="text-center exp-card-content"><span class="number">{{pendentesstore.count}} </span> <span class="title1">Documentos</span></p>
            </div>

            <div *ngIf="loggeduser.Profile == 'PR'" (click)="openDespachosPrPage(); selectedElement='DispatchesPr'" [class.active]="selectedElement == 'DispatchesPr'" class="box-hover exp-card d-md-flex flex-column justify-center" >
              <div class="d-flex justify-center">
                <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-despachos-presidente.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DispatchesPr'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DispatchesPr'"  src="assets/images/theme/gov/icons-despachos-presidente-hover.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'DispatchesPr'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
              </div>
              <p class="text-center exp-card-title " *ngIf="loggeduser.Profile == 'MDGPR'">Despacho do Presidente da República</p>
              <p class="text-center exp-card-title " *ngIf="loggeduser.Profile == 'PR'">Despachos criados por mim</p>
              <p class="text-center exp-card-content">{{ despachoprstore.count }} <span class="title1">Documentos</span> </p>
            </div>

            <div [class.active]="selectedElement == 'Dispatches'" class="box-hover exp-card d-flex flex-column justify-center" (click)="openDespachosPage(); selectedElement='Dispatches'" *ngIf="loggeduser.Profile == 'MDGPR'">
              <div class="d-flex justify-center">
                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-despachos-presidente.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'Dispatches'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'Dispatches'"  src="assets/images/theme/gov/icons-despachos-presidente-hover.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'Dispatches'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
              </div>
              <p class="text-center exp-card-title ">Despachos</p>
              <p class="text-center exp-card-content">{{despachoStore.count}} <span class="title1">Documentos</span> </p>
            </div>

            <div (click)="openPedidosPage('parecer'); selectedElement='RequestsForOpinion'" [class.active]="selectedElement == 'RequestsForOpinion'" class="box-hover exp-card d-flex flex-column justify-center">
              <div class="d-flex justify-center">
                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-parecer.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'RequestsForOpinion' " src="assets/images/theme/gov/icons-expediente-parecer.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'RequestsForOpinion'" src="assets/images/theme/gov/icons-expediente-parecer-hover.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'RequestsForOpinion' " src="assets/images/theme/gov/icons-expediente-parecer.svg"></ion-icon>
              </div>
              <p *ngIf="loggeduser.Profile == 'MDGPR'" class="text-center exp-card-title ">Pedidos de Parecer</p>
              <p *ngIf="loggeduser.Profile == 'PR'" class="text-center exp-card-title ">Pedidos de Parecer solicitados por mim</p>
              <p class="text-center exp-card-content">{{pedidosstore.countparecer}} <span class="title1">Documentos</span></p>
            </div>

            <div (click)="openPedidosPage('deferimento'); selectedElement = 'RequestForApproval'" [class.active]="selectedElement == 'RequestForApproval'" class="box-hover exp-card d-flex flex-column justify-center">
              <div class="d-flex justify-center">
                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-deferimento.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'RequestForApproval'" src="assets/images/theme/gov/icons-expediente-deferimento.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'RequestForApproval'" src="assets/images/theme/gov/icons-expediente-deferimento-hover.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'RequestForApproval'" src="assets/images/theme/gov/icons-expediente-deferimento.svg"></ion-icon>
              </div>
              <p class="text-center exp-card-title ">Pedidos de Deferimento</p>
              <p class="text-center exp-card-content">{{pedidosstore.countdeferimento}} <span class="title1">Documentos</span></p>
            </div>


            <!-- <div *ngIf="p.userRole(['MDGPR'])" (click)="openExpedientesPrPage(); selectedElement='ExpedientesPr'" [class.active]="selectedElement == 'ExpedientesPr'" class="exp-card-long justify-center width-100 white-background">
              <div class="center-div">F
                <div class="exp-card-icon">
                  <ion-icon  src="assets/images/icons-expediente-presidente.svg"></ion-icon>
                </div>
                <div class="exp-card-text">
                  <p class="exp-card-title " *ngIf="loggeduser.Profile == mdgpr">Expediente Presidente</p>
                  <p class="exp-card-title " *ngIf="loggeduser.Profile == pr">Expediente</p>
                  <p class="exp-card-content"><span class="number">{{expedienteprstore.count}} </span> <span class="title1">Documentos</span> </p>
                </div>
              </div>
            </div> -->

            <div *ngIf="loggeduser.Profile == 'MDGPR'" (click)="openDespachosPrPage(); selectedElement='showDespachosPr'" [class.active]="selectedElement == 'showDespachosPr'" class="box-hover exp-card-long width-100 d-flex flex-column justify-center">
              <div class="center-div">
                <div class="exp-card-icon">
                  <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-despachos-presidente.svg"></ion-icon>
                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'showDespachosPr'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
                  <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'showDespachosPr'"  src="assets/images/theme/gov/icons-despachos-presidente-hover.svg"></ion-icon>
                  <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'showDespachosPr'"  src="assets/images/theme/gov/icons-despachos-presidente.svg"></ion-icon>
                </div>
                <div class="exp-card-text">
                  <p class="exp-card-title">Despacho do Presidente da República</p>
                  <p class="text-center exp-card-content">{{ despachoprstore.count }} <span class="title1">Documentos</span> </p>
                </div>
              </div>
            </div>

            <div *ngIf="loggeduser.Profile == 'MDGPR'" (click)="openDiplomasPage('validar'); selectedElement='DiplomasPorValidar'" [class.active]="selectedElement == 'DiplomasPorValidar'" class="box-hover exp-card d-flex flex-column justify-center">
              <div class="d-flex justify-center">
                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-diploma.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DiplomasPorValidar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DiplomasPorValidar' " src="assets/images/theme/gov/icons-expediente-diploma-hover.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'DiplomasPorValidar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
              </div>
              <p class="text-center exp-card-title " *ngIf="loggeduser.Profile == 'MDGPR' ">Diplomas por Validar</p>
              <p class="text-center exp-card-title " *ngIf="loggeduser.Profile == 'PR'">Diplomas por Assinar</p>
              <p class="text-center exp-card-content">{{ deplomasStore.deplomasReviewCount }} <span class="title1">Documentos</span> </p>
            </div>

            <div *ngIf="loggeduser.Profile == 'MDGPR'" (click)="openDiplomasPage('assinados'); selectedElement='DiplomasAssinados'" [class.active]="selectedElement == 'DiplomasAssinados'" class="box-hover exp-card d-flex flex-column justify-center">
              <div class="d-flex justify-center">
                <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-diplomas-assinados-presidente.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DiplomasAssinados'"  src="assets/images/theme/gov/icons-diplomas-assinados-presidente.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DiplomasAssinados'"  src="assets/images/theme/gov/icons-diplomas-assinados-presidente-hover.svg"></ion-icon>
                <ion-icon *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'DiplomasAssinados'"  src="assets/images/theme/gov/icons-diplomas-assinados-presidente.svg"></ion-icon>
              </div>
              <p class="text-center exp-card-title " *ngIf="loggeduser.Profile == 'MDGPR'">Diplomas assinados PR</p>
              <p class="text-center exp-card-title " *ngIf="loggeduser.Profile == 'PR'" >Diplomas</p>
              <p class="text-center exp-card-content">{{ deplomasStore.countDiplomasAssinadoListCount }} <span class="title1">Documentos</span></p>
            </div>

            <div *ngIf="loggeduser.Profile == 'PR'" (click)="openDiplomasAssinarPage(); selectedElement='DiplomasAssinar'" [class.active]="selectedElement == 'DiplomasAssinar'" class="box-hover exp-card d-flex flex-column justify-center">
              <div class="d-flex justify-center">
                <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-expediente-diploma.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DiplomasAssinar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DiplomasAssinar' " src="assets/images/theme/gov/icons-expediente-diploma-hover.svg"></ion-icon>
                <ion-icon  *ngIf="ThemeService.currentTheme == 'tribunal' && selectedElement != 'DiplomasAssinar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
              </div>
              <p class="text-center exp-card-title">Diplomas para Assinar</p>
              <p class="text-center exp-card-content">{{ deplomasStore.diplomasListCount }} <span class="title1">Documentos</span></p>
            </div>

          </div>

      </div>
      </div>

      <!-- Aside right -->
      <div class="aside-content d-none flex-column height-100">

        <app-empty-container [texto]="emptyTextDescription"  [style.display]="showEmptyContainer ? 'flex' : 'none'"   class="height-100 flex-column"></app-empty-container>
        <app-all-processes [profile]="profile" class=" height-100 flex-column"  [style.display]="showAllProcesses ? 'flex' : 'none'" ></app-all-processes>
        <app-events-to-approve [profile]="'MDGPR'" [style.display]="showEventsToApprove ? 'flex' : 'none'" class=" height-100 flex-column"></app-events-to-approve>

        <app-expedients [profile]="profile" class=" height-100 flex-column"  [style.display]="showExpedients ? 'flex' : 'none'" ></app-expedients>
        <app-pedidos [profile]="profile" [segment]="segment" [serialNumber]="serialNumber" class=" height-100 flex-column"  [style.display]="showPedidos ? 'flex' : 'none'"></app-pedidos>
        <app-despachos  [profile]="profile" class="height-100 flex-column"  [style.display]="showDespachos ? 'flex' : 'none'"  ></app-despachos>
        <app-despachos-pr [profile]="profile" class=" height-100 flex-column" [style.display]="showDespachosPr ? 'flex' : 'none'" ></app-despachos-pr>
        <app-pendentes  [profile]="profile" class=" height-100 flex-column" [style.display]="showPendentes ? 'flex' : 'none'" ></app-pendentes>
        <app-diplomas (openExpedientDetail)="openExpedientesPrPage($event)" [profile]="profile" [segment]="segment" class=" height-100 flex-column" [style.display]="showDiplomas ? 'flex' : 'none'"></app-diplomas>
        <app-diplomas-assinar class=" height-100 flex-column" [style.display]="showDiplomasAssinar ? 'flex' : 'none'"></app-diplomas-assinar>
        <app-expedientes-pr [profile]="profile" class=" height-100 flex-column" [style.display]="showExpedientesPr ? 'flex' : 'none'" ></app-expedientes-pr>
        <app-signed-diploma  [profile]="profile" class=" height-100 flex-column"  [style.display]="showSignedDiploma ? 'flex' : 'none'" ></app-signed-diploma>
      </div>
  </div>
</ion-content>
