<!-- <ion-header hidden class="ion-no-border px-20">
  <div class="header-content d-flex justify-space-between">
    <div class="header-icon-left">
      <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
    </div>
    <div class="header-title flex-grow-1">
      <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
    </div>
    <div class="header-icon-right display-none-{{showAside}}">
      <ion-icon (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>
    </div>
  </div>
</ion-header> -->

<ion-content id="main-content">
  <div class="main-content d-flex height-100" *ngIf="loadedEvent">
    <div class="content d-flex flex-column">
      <div class="header-content width-100 d-flex justify-space-between">
        <div (click)="close()" class="header-icon-left cursor-pointer">
          <ion-icon src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
        </div>
        <div class="header-title flex-grow-1 cursor-pointer">
          <label>{{loadedEvent.workflowInstanceDataFields.Subject}} </label>
        </div>

        <div  (click)="editar(loadedEvent.serialNumber)" class="header-icon-right display-none-{{showAside}}">
          <button class="btn-no-color">
            <ion-icon src="assets/images/icons-edit.svg"></ion-icon>
          </button>
        </div>

        <div (click)="rejectTask(loadedEvent.serialNumber)" class="header-icon-right display-none-{{showAside}}">
          <button class="btn-no-color" >
            <ion-icon class="delete" name="trash-sharp"></ion-icon>
          </button>
        </div>

      </div>
      <div class="upper-content d-flex flex-column">
        <div class="content-location">
          <p>
            <span class="location">{{loadedEvent.workflowInstanceDataFields.Location}}</span>

            <span class="event-type-{{loadedEvent.workflowInstanceDataFields.Agenda}}" *ngIf="loadedEvent.workflowDisplayName == 'Agenda Oficial MDGPR' " style="background-color: #ffb703;">
            {{loadedEvent.workflowInstanceDataFields.Agenda}}
            </span>
            <span class="event-type-{{loadedEvent.workflowInstanceDataFields.Agenda}}" *ngIf="loadedEvent.workflowDisplayName == 'Agenda Pessoal MDGPR' " style="background-color: #f05d5e;">
              {{loadedEvent.workflowInstanceDataFields.Agenda}}
            </span>


            <span class="event-type-{{loadedEvent.workflowInstanceDataFields.Agenda}}" *ngIf="loadedEvent.workflowDisplayName == 'Agenda Oficial PR' " style="background-color: #99e47b;">
              {{loadedEvent.workflowInstanceDataFields.Agenda}}
            </span>
            <span class="event-type-{{loadedEvent.workflowInstanceDataFields.Agenda}}" *ngIf="loadedEvent.workflowDisplayName == 'Agenda Pessoal PR' " style="background-color: #958bfc;">
              {{loadedEvent.workflowInstanceDataFields.Agenda}}
            </span>

          </p>
        </div>
        <div class="content-details">
          <ion-label>
            <p>{{customDate}}</p>
            <p *ngIf="toDateString(loadedEvent.workflowInstanceDataFields.StartDate) == toDateString(loadedEvent.workflowInstanceDataFields.EndDate)">das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'HH:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p>
            <p *ngIf="toDateString(loadedEvent.workflowInstanceDataFields.StartDate) != toDateString(loadedEvent.workflowInstanceDataFields.EndDate)">{{loadedEvent.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ loadedEvent.workflowInstanceDataFields.StartDate | date: 'dd/M/yy'}} </p>
            <p *ngIf="!loadedEvent.workflowInstanceDataFields.IsRecurring">(Não se repete)</p>
            <p *ngIf="loadedEvent.workflowInstanceDataFields.IsRecurring">Repete</p>
          </ion-label>
        </div>
      </div>
      <div class="line"></div>

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

        <div *ngIf="loadedAttachments" class="bottom-content width-100">
          <ion-list>
            <h5>Documentos Anexados</h5>
            <ion-item class="ion-no-margin ion-no-padding"
            *ngFor="let attach of loadedAttachments"
            (click)="viewDocument(attach.SourceId)">
            <ion-label>
              <p class="attach-title-item d-block">{{attach.SourceName}}</p>
              <p><span class="span-left">{{attach.Stakeholders}}</span><span class="span-right">{{ attach.CreateDate | date: 'dd-MM-yyyy HH:mm' }}</span></p>
            </ion-label>
          </ion-item>
          </ion-list>
        </div>

      </div>

    </div>


    <div *ngIf="showAside" class="aside-right flex-column height-100 cursor-pointer">
      <div class="aside-buttons">
        <button hidden full class="btn-ok" shape="round" >Editar evento</button>
        <button (click)="approveTask(loadedEvent.serialNumber)" full class="btn-ok" shape="round" >Aprovar</button>
        <button (click)="emendTask(loadedEvent.serialNumber)" class="btn-cancel" shape="round" >Rever</button>
        <div class="solid"></div>
        <button full  class="btn-cancel" shape="round" (click)="editar(loadedEvent.serialNumber)" >Editar</button>
        <button (click)="rejectTask(loadedEvent.serialNumber)" full class="btn-delete" shape="round" >Rejeitar</button>
      </div>
    </div>

  </div>
</ion-content>

<ion-footer class="display-none-{{showAside}} ion-no-border">
  <div class="buttons">
    <button class="btn-cancel" shape="round" (click)="emendTask(loadedEvent.serialNumber)">Rever</button>
    <button class="btn-ok" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</button>
  </div>
</ion-footer>
