<ion-header class="ion-no-border">
  <div class="header-content">
    <div class="header-title d-flex align-center justify-between width-100">
      <div class="flex-grow-1">Eventos para Aprovação</div>
      <div (click)="refreshing()">
        <button class="btn-no-color" >
          <ion-icon slot="end" class="title-icon font-awesome" name="reload-circle"></ion-icon>
        </button>
      </div>
    </div>
  <ion-toolbar>
    <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
      <ion-segment-button value="MDGPR">
        Meu calendário
      </ion-segment-button>
      <ion-segment-button value="PR">
        Presidente da República
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</div>
</ion-header>

<ion-content>
  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
     <ion-refresher-content>
    </ion-refresher-content>
  </ion-refresher>
  <div class="main-content overflow-y-auto height-100" [ngSwitch]="segment" *ngIf="eventsMDGPRList">
    <!--  <div class="header-content width-100"> -->

   <!-- </div> -->
     <ion-list class="width-100" *ngSwitchCase="'MDGPR'" >
      <div
        class="item item-hover ion-no-padding width-100 cursor-pointer"
        *ngFor="let event of eventsMDGPRList"
        (click)="openApproveModal(event.serialNumber, event)"
      >
        <div class="event-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100">
          <div class="approve-event-time">
              <p>{{event.workflowInstanceDataFields.StartDate | date: 'HH:mm'}}</p>
              <p>{{event.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p>
            </div>
            <div class="approve-event-detail">
              <p *ngIf="toDateString(event.workflowInstanceDataFields.StartDate) != toDateString(event.workflowInstanceDataFields.EndDate)">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
              <p *ngIf="toDateString(event.workflowInstanceDataFields.StartDate) == toDateString(event.workflowInstanceDataFields.EndDate)">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
              <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
            </div>
        </div>
      </div>
     </ion-list>
     <ion-list class="width-100" *ngSwitchCase="'PR'">
       <div class="width-100" *ngIf="eventsPRList">
          <div
            class="item ion-no-padding width-100 cursor-pointer"
            *ngFor="let event of eventsPRList"
            (click)="openApproveModal(event.serialNumber, event)"
          >
            <div class="event-pr-{{event.workflowInstanceDataFields.Agenda}} width-100">
              <div class="approve-event-time">
                <p>{{event.workflowInstanceDataFields.StartDate | date: 'HH:mm'}}</p>
                <p>{{event.workflowInstanceDataFields.EndDate | date: 'HH:mm'}}</p>
              </div>
              <div class="approve-event-detail">
                <p *ngIf="toDateString(event.workflowInstanceDataFields.StartDate) != toDateString(event.workflowInstanceDataFields.EndDate)">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
                <p *ngIf="toDateString(event.workflowInstanceDataFields.StartDate) == toDateString(event.workflowInstanceDataFields.EndDate)">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
                <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
              </div>
              </div>
          </div>
       </div>
     </ion-list>
   </div>
</ion-content>
