<ion-header class="ion-no-border">
  <div class="header-content  mx-20 d-flex justify-between">
    <div class="header-icon-left">
      <button class="btn-no-color cursor-pointer" (click)="close()">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
      </button>
    </div>
    <div class="header-title flex-grow-1">
      <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
    </div>
    <div class="header-icon-right cursor-pointer" (click)="editar(loadedEvent.serialNumber)">
      <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-edit.svg"></ion-icon>
      <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-edit.svg"></ion-icon>
    </div>
  </div>
</ion-header>
<ion-menu autoHide="false" side="end" content-id="main-content">
  <ion-header>
    <ion-toolbar translucent>
      <ion-title>Acções</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list class="cursor-pointer">
      <ion-item (click)="approveTask(loadedEvent.serialNumber)">
        <ion-icon name="checkmark-sharp"></ion-icon>
        <ion-label>Aprovar</ion-label>
      </ion-item>
      <ion-item (click)="emendTask(loadedEvent.serialNumber)">
        <ion-icon name="create-outline"></ion-icon>
        <ion-label>Rever</ion-label>
      </ion-item>
      <ion-item (click)="rejectTask(loadedEvent.serialNumber)">
        <ion-icon name="close-sharp"></ion-icon>
        <ion-label>Rejeitar</ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-content id="main-content">
  <div class="upper-content d-flex width-100">
    <div class="content-location d-flex justify-between width-100">
      <div class="location-detail flex-grow-1">
        <div *ngIf="loadedEvent.workflowInstanceDataFields.Location">
          <ion-label>
            {{loadedEvent.workflowInstanceDataFields.Location}}
          </ion-label>
        </div>
        <div class="content-details">
          <ion-label>
            <p>1 {{customDate}}</p>
            <p>2 das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'HH:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p>
            <p *ngIf="!loadedEvent.workflowInstanceDataFields.IsRecurring">(Não se repete)</p>

            <p *ngIf="loadedEvent.workflowInstanceDataFields.IsRecurring">
              <span *ngIf="loadedEvent.workflowInstanceDataFields.EventRecurrence.Type == 0">Diário</span>
              <span *ngIf="loadedEvent.workflowInstanceDataFields.EventRecurrence.Type == 1">Semanal</span>
              <span *ngIf="loadedEvent.workflowInstanceDataFields.EventRecurrence.Type == 2">Mensal</span>
              <span *ngIf="loadedEvent.workflowInstanceDataFields.EventRecurrence.Type == 3">Anual</span>
              <span *ngIf="loadedEvent.workflowInstanceDataFields.EventRecurrence.Type == -1">Nunca</span>            
            </p>
          </ion-label>
        </div>
      </div>
      <div class="button-calendar-type d-flex flex-grow-1 justify-end">
        <ion-button  class="button-calendar-type" slot="end">{{loadedEvent.workflowInstanceDataFields.Agenda}}</ion-button>
      </div>
    </div>

  </div>
  <div *ngIf="loadedEvent.workflowInstanceDataFields.Participants" class="middle-content">
    <div *ngIf="loadedEvent.workflowInstanceDataFields.Participants">
      <h5>Intervenientes</h5>
      <div *ngFor="let att of loadedEvent.workflowInstanceDataFields.ParticipantsList">
        <ion-label>{{att.Name}}</ion-label>
      </div>
    </div>
    </div>
    <div *ngIf="loadedEvent.workflowInstanceDataFields.Body">
    <h5>Detalhes</h5>
    <ion-item lines="none" class="ion-no-padding ion-no-margin">
      <div [innerHTML]="loadedEvent.workflowInstanceDataFields.Body"></div>
    </ion-item>
  </div>
  <div class="line"></div>

  <div class="d-flex container-div width-100"  >
    <ion-list class="width-100 " >
      <h5>Documentos Anexados</h5>
      <ion-item class="width-100"   *ngFor="let document of loadedAttachments">
        <ion-label
          (click)="viewDocument(document.SourceId, document.ApplicationId)"
          class="width-100 d-block list">
          <p class="d-flex ion-justify-content-between">
            <span class="attach-title-item">{{document.SourceName}}</span>
            <span class="app-name" *ngIf="document.ApplicationId  == 8"> Correspondencia </span>
            <span class="app-name" *ngIf="document.ApplicationId == 386"> AccoesPresidenciais </span>
            <span class="app-name" *ngIf="document.ApplicationId == 361 "> ArquivoDespachoElect </span>
          </p>
          <p><span class="span-left" *ngIf="document.Stakeholders != false">{{document.Stakeholders}}</span><span class="span-right" *ngIf="document.CreateDate != false"> {{document.CreateDate }} </span></p>
        </ion-label>
      </ion-item>
    </ion-list>
  </div>

</ion-content>
<ion-footer>
  <div class="buttons width-100">
    <button class="btn-cancel cursor-pointer" shape="round" (click)="emendTask(loadedEvent.serialNumber)">Rever</button>
    <button class="btn-no-color cursor-pointer" shape="round" (click)="openMenu()"> <ion-icon name="ellipsis-vertical-outline"></ion-icon></button>
    <button class="btn-cancel cursor-pointer" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</button>
  </div>
</ion-footer>
