<ion-header class="ion-no-border">
  <app-header></app-header>
</ion-header>
<ion-content class="container-wrapper">
  <div class="main-content d-flex height-100 pl-20 overflow-hidden">
    <div class="content d-flex flex-column" *ngIf="task">
      <div class="main-header" >
        <div class="title-content width-100 d-flex justify-space-between align-center">
          <div class="font-30 cursor-pointer align-center d-flex" (click)="goBack()" defaultHref="#">
            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" 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>
          </div>
          <div class="middle d-flex align-center flex-grow-1">
            <div class="title">{{ task.Folio}}</div>
          </div>
          <div class="div-icon" (click)="openOptions()">
            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="font-25 cursor-pointer" src="assets/images/icons-menu.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="font-25 cursor-pointer" src="assets/images/theme/gov/icons-menu.svg"></ion-icon>
          </div>
        </div>
      </div>
      <div class="upper-content" >
        <div class="content-details">
          <ion-label>
            <p><span class="date">{{customDate}}</span><span class="label">{{ task.activityInstanceName }}</span></p>
            <p><span class="color-red">{{ task.DeadlineType }}</span></p>
          </ion-label>
        </div>
      </div>
      <div class="line"></div>

      <div class="overflow-y-auto">
        <div class="middle-content" >
          <div *ngIf="intervenientes.length > 0">
            <h5 >Intervenientes</h5>
            <ion-item class="ion-no-margin ion-no-padding">
              <ion-label *ngIf="intervenientes">
                <div *ngFor="let interveniente of intervenientes">
                  <p>{{interveniente.Name}}</p>
                </div>
              </ion-label>
            </ion-item>
          </div>
          <div *ngIf="cc!='' && cc!=' ' ">

            <h5 *ngIf="cc.length > 0">Com conhecimento</h5>
            <ion-item *ngIf="cc.length > 0" class="ion-no-margin ion-no-padding">
              <ion-label>
                <div *ngFor="let c of cc">
                  <p>{{c.Name}}</p>
                </div>
              </ion-label>
            </ion-item>
          </div>
          <div *ngIf="fulltask.workflowInstanceDataFields.TaskMessage">
            <h5>Detalhes</h5>
            <ion-item class="ion-no-margin ion-no-padding">
                <p [innerHTML]="fulltask.workflowInstanceDataFields.TaskMessage"></p>
            </ion-item>
          </div>
        </div>
        <div class="bottom-content width-100">
          <ion-list *ngIf="fulltask.Documents">
            <h5>Documentos Anexados</h5>
            <ion-item *ngFor="let attachment of fulltask.Documents"
            class="ion-no-margin ion-no-padding cursor-pointer">
            <ion-label
            (click)="viewDocument(attachment.DocId, attachment)">
              <p *ngIf="attachment.Assunto" class="attach-title-item">{{ attachment.Assunto }}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></span></p>
              <p *ngIf="!attachment.Assunto" class="attach-title-item">{{ attachment.DocNumber }}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></span></p>
              <p><span class="span-left">{{attachment.Sender}}</span><span class="span-right">{{ attachment.DocDate | date: 'dd/MM/yy' }}</span></p>
            </ion-label>
          </ion-item>
          </ion-list>
        </div>
      </div>

    </div>

    <div *ngIf="task" class="aside-right flex-column  height-100 overflow-y-auto">
      <div class="buttons px-20" *ngIf="task.activityInstanceName == 'Tarefa de Despacho'">
        <div class="option-desc"> <div>Responder ao PR</div> </div>
        <button (click)="openAddNoteModal('Executado')" class="btn-cancel mb-0" style="margin-bottom: 0px !important;" shape="round" >Executado</button>
        <!-- <div class="solid"></div> -->
        <div class="option-desc">Reencaminhar para Área jurídica</div>
        <button (click)="openAddNoteModal('Gerar Diploma')" class="btn-cancel" style="margin-bottom: 0px !important;" shape="round" >Gerar Diploma </button>
        <!-- <div class="solid"></div> -->
        <div class="option-desc">Outras opções</div>
        <button (click)="openExpedientActionsModal('0',fulltask)" class="btn-cancel" shape="round" >Efetuar Despacho</button>
        <button (click)="openExpedientActionsModal('1',fulltask)" class="btn-cancel" shape="round" >Solicitar Parecer</button>
        <button (click)="openDelegarModal(task)" class="btn-cancel" shape="round" >Delegar</button>
        <button (click)="openBookMeetingModal(task)" class="btn-cancel" shape="round" >Marcar Reunião</button>
        <!-- <div class="solid"></div> -->
        <button (click)="sendExpedienteToPending()" *ngIf="task.Status != 'Pending'" class="btn-cancel" shape="round" >Enviar para Pendentes</button>
      </div>
      <div class="buttons px-20" *ngIf="task.activityInstanceName == 'Concluir Despacho'">
        <button (click)="openAddNoteModal('Concluido')" class="btn-cancel" shape="round" >Marcar como Concluído</button>
        <button (click)="openAddNoteModal('Reexecução')" class="btn-cancel" shape="round" >Enviar para Reexecução</button>
        <button (click)="openBookMeetingModal(task)" class="btn-cancel" shape="round" >Marcar Reunião</button>
        <button (click)="sendExpedienteToPending()" *ngIf="task.Status != 'Pending'" class="btn-cancel" shape="round" >Enviar para Pendentes</button>
      </div>
    </div>

    <div *ngIf="!task" class="px-20">
      <ion-list>
        <ion-list-header>
          <ion-label>
            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
          </ion-label>
        </ion-list-header>
        <ion-item>
          <ion-label>
            <h3>
              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
            </h3>
            <p>
              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
            </p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            <h3>
              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
            </h3>
            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
          </ion-label>
        </ion-item>
        <ion-item>
          <ion-label>
            <h3>
              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
            </h3>
            <p>
              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
            </p>
          </ion-label>
        </ion-item>
        <button color="medium" shape="round" expand="block">
          <!-- <ion-icon color="medium" name="attach" slot="start"></ion-icon> -->
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </button>
      </ion-list>
    </div>
  </div>
</ion-content>

