
<ion-header mode="ios" class="ion-no-border">
  <ion-toolbar>
<!--    <ion-buttons slot="end">-->
<!--      <ion-button>-->
<!--        <ion-icon name="search-outline"></ion-icon>-->
<!--      </ion-button>-->
<!--    </ion-buttons>-->
    <ion-title>My Tasks</ion-title>
  </ion-toolbar>
</ion-header>


<ion-content class="ion-padding">
  <ion-segment [(ngModel)]="tabs">
    <ion-segment-button value="tasks">
      <ion-label>Active</ion-label>
    </ion-segment-button>
    <ion-segment-button value="pastdue">
      <ion-label>Past Due</ion-label>
    </ion-segment-button>
    <ion-segment-button value="review">
      <ion-label>In Review</ion-label>
    </ion-segment-button>
  </ion-segment>

  <div *ngIf="tabs =='tasks'">

    <div class="chat" *ngFor="let item of jobsData;" (click)="activeSeleted(item)">
      <div class="flex">
        <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
        <div style="margin-left: 10px;">
          <ion-label class="bold_text"> {{item.title}}</ion-label>
          <div style="display: flex;">
            <ion-label class="grey_text"> {{item.job_description}} </ion-label>

          </div>
          <div>
            <hr />
            <ion-label> {{item.delivery_date}}</ion-label>
          </div>
        </div>
      </div>
      <div class="column">
        <ion-icon name="chevron-forward-outline"></ion-icon>
<!--        <ion-label class="small_text"> 11:30 PM</ion-label>-->
<!--        <ion-label class="color_text"> 10</ion-label>-->
      </div>
    </div>
  </div>

  <div *ngIf="tabs =='pastdue'">
    <div class="chat" *ngFor="let item of jobsPastDueData;" (click)="onMessage()">
      <div class="flex">
        <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
        <div style="margin-left: 10px;">
          <ion-label class="bold_text"> {{item.title}}</ion-label>
          <div style="display: flex;">
            <ion-label class="grey_text"> {{item.job_description}} </ion-label>

          </div>
          <div>
            <hr />
            <ion-label> {{item.delivery_date}}</ion-label>
          </div>
        </div>
      </div>
      <div class="column">
        <ion-icon name="chevron-forward-outline"></ion-icon>
        <!--        <ion-label class="small_text"> 11:30 PM</ion-label>-->
        <!--        <ion-label class="color_text"> 10</ion-label>-->
      </div>
    </div>
  </div>

  <div *ngIf="tabs =='review'">
    <div class="chat" *ngFor="let item of jobsInReviewData;" (click)="onMessage()">
      <div class="flex">
        <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item.banner+')'"></div>
        <div style="margin-left: 10px;">
          <ion-label class="bold_text"> {{item.title}}</ion-label>
          <div style="display: flex;">
            <ion-label class="grey_text"> {{item.job_description}} </ion-label>

          </div>
          <div>
            <hr />
            <ion-label> {{item.delivery_date}}</ion-label>
          </div>
        </div>
      </div>
      <div class="column">
        <ion-icon name="chevron-forward-outline"></ion-icon>
        <!--        <ion-label class="small_text"> 11:30 PM</ion-label>-->
        <!--        <ion-label class="color_text"> 10</ion-label>-->
      </div>
    </div>
  </div>
</ion-content>
