
<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">
  <div class="boxed_contents">
    <ion-segment class="common_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'" class="lesson">
      <div *ngIf="active_job_count == 0">
        <ion-card>
          <img alt="WrenchBoard Tasks" src="https://www.wrenchboard.com/assets/images/apps/current-tasks.png" />
          <ion-card-header>
            <ion-card-title>Current Tasks</ion-card-title>
            <!--          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
          </ion-card-header>

          <ion-card-content>
            You currently have no active tasks or shores. Visit the Market to find anything interesting to you.
          </ion-card-content>
        </ion-card>
      </div>


      <div class="chat" *ngFor="let item of jobsData;" (click)="activeSeleted(item)">
        <div class="flex">
          <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></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>
            <ion-label>{{item.price*0.01}} {{item.currency}}</ion-label>
            <ion-label class="due_date">Due : {{item.delivery_date |date}}</ion-label>

            <div>
            </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 *ngIf="pastdue_job_count == 0">
        <ion-card>
          <img alt="WrenchBoard Past Due" src="https://www.wrenchboard.com/assets/images/apps/pastdue-task.png" />
          <ion-card-header>
            <ion-card-title>Past Due</ion-card-title>
            <!--        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
          </ion-card-header>

          <ion-card-content>
            You do not have any task past due.
          </ion-card-content>
        </ion-card>
      </div>
      <div class="chat" *ngFor="let item of jobsPastDueData;"  (click)="activeSeleted(item)">
        <div class="flex">
          <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></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 class="due_date">Due : {{item.delivery_date |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 *ngIf="review_job_count == 0">
        <ion-card>
          <img alt="WrenchBoard Review" src="https://www.wrenchboard.com/assets/images/apps/review-task.png" />
          <ion-card-header>
            <ion-card-title>In Review</ion-card-title>
            <!--        <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
          </ion-card-header>

          <ion-card-content>
            No task is currently in review.
          </ion-card-content>
        </ion-card>
      </div>


      <div class="chat" *ngFor="let item of jobsInReviewData;"  (click)="activeSeleted(item)">
        <div class="flex">
          <div class="bg_image back_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+item.job_uid+')'"></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 class="due_date">Due : {{item.delivery_date |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>

</ion-content>

