<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>Find Task</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="on">
        <ion-label>Available</ion-label>
      </ion-segment-button>
      <ion-segment-button value="done">
        <ion-label>Pending</ion-label>
      </ion-segment-button>
    </ion-segment>

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

      <div class="lesson">
        <div class="flex">
          <ion-label class="bold">Available Task(s)</ion-label>
          <!--                <ion-label class="color">.</ion-label>-->
        </div>
        <div class="video" *ngFor="let item of jobsData;" (click)="viewMarketItem( item )">
          <div class="left">
            <div class="bg_image men_image" [style.backgroundImage]="'url('+session_image_server+''+curr_session+'/job/'+item.job_uid+')'"></div>

            <div class="text">
              <div class="bold_text" [innerHTML]="item.title"></div>
              <ion-label class="price_line"> {{item.price*0.01| number : '1.2-2'}} {{item.currency}}  </ion-label>
              <ion-label class="due_date">Timeline: {{item.timeline_days}} days</ion-label>
            </div>
          </div>
          <div class="right">
            <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
          </div>
        </div>
      </div>

    </div>

    <div *ngIf="tabs =='done'">
      <app-waitinterest></app-waitinterest>
<!--      <div class="content" *ngFor="let item of jobsData;" (click)="onCourseDetail()">-->
<!--        <div class="flex">-->
<!--          <div class="text">-->
<!--            <ion-label class="bold_text">{{item.title}}</ion-label>-->
<!--            <ion-label class="due_date">available till : {{item.expire}}</ion-label>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

    </div>

  </div>

</ion-content>
