<ion-header mode="ios" class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start" (click)="onBack()">
      <ion-button>
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Jobs Manager</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/jobmanager.jpg)'">
    <div class="ion-padding">
<!--      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>-->
    </div>
  </div>

  <div class="ion-padding">
    <div class="boxed_contents">

<!--      <div class="flex">-->
<!--        <ion-label class="bold_text">Jobs Manager</ion-label>-->
<!--        &lt;!&ndash;      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>&ndash;&gt;-->
<!--      </div>-->

<!--      <div class="row">-->
<!--        <ion-label class="bg_text">.....</ion-label>-->
<!--        <div class="rate">-->
<!--          <ion-button size="small" fill="outline"  (click)="onMyJobs()">-->
<!--            <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
<!--            My Jobs</ion-button>-->
<!--        </div>-->
<!--        <div class="rate">-->
<!--          <ion-button size="small" fill="outline"  (click)="onMyJobs()">-->
<!--            <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
<!--            Pending</ion-button>-->
<!--        </div>-->
<!--      </div>-->

      <!--    <ion-label class="color_text">$40</ion-label>-->

      <div class="items">
        <div class="stud">
          <ion-icon slot="start" name="people" color="primary"></ion-icon>
          <ion-label>{{total_active}} Active</ion-label>
        </div>
        <div class="stud">
<!--          <ion-icon slot="start" name="time" color="primary"></ion-icon>-->
<!--          <ion-label>{{total_review}} Review</ion-label>-->

          <ion-button size="small" fill="outline"  (click)="onMyJobs()">
            <ion-icon name="time" color="warning"></ion-icon>
            My Jobs</ion-button>

        </div>
        <div class="stud">
<!--          <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
<!--          <ion-label>{{total_pastdue}} Past Due</ion-label>-->

          <ion-button size="small" fill="outline"  (click)="onMyPendingJobs()">
            <ion-icon name="document-text" color="warning"></ion-icon>
            Pending</ion-button>

        </div>
      </div>

      <ion-segment class="common_segment" [(ngModel)]="tabs">
        <ion-segment-button value="active">
          <ion-label>Active ({{total_active}})</ion-label>
        </ion-segment-button>
        <ion-segment-button value="review">
          <ion-label>Review ({{total_review}})</ion-label>
        </ion-segment-button>
        <ion-segment-button value="pastdue">
          <ion-label>Past Due ( {{total_pastdue}} )</ion-label>
        </ion-segment-button>
      </ion-segment>

      <div *ngIf="tabs =='active'" class="lesson">
        <ion-label class="head_text">Currently Active</ion-label>

        <div class="video" *ngFor="let item of jobManagerActiveData" (click)="jobActive(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">
              <ion-label class="bold_text">{{item.title}}</ion-label>
              <ion-label class="grey_text">{{item.description}}</ion-label>
              <ion-label class="price_line">{{item.contract}}   {{item.price*0.01}} {{item.currency}}  </ion-label>
              <ion-label class="due_date">Due Date: {{item.delivery_date | date}}</ion-label>
            </div>
          </div>
          <div class="right">
            <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
          </div>
        </div>


      </div>

      <div *ngIf="tabs =='review'" class="lesson">
        <ion-label class="head_text">Jobs Ready for Review</ion-label>

        <div class="video" *ngFor="let item of jobManagerReviewData" (click)="jobReview(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">
              <ion-label class="bold_text">{{item.title}}</ion-label>
              <ion-label class="grey_text">{{item.description}}</ion-label>
              <ion-label class="price_line">{{item.contract}}   {{item.price*0.01}} {{item.currency}}  </ion-label>
              <ion-label class="due_date">Due Date: {{item.delivery_date | date}}</ion-label>
            </div>
          </div>
          <div class="right">
            <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
          </div>
        </div>

      </div>

      <div *ngIf="tabs =='pastdue'" class="lesson">
        <ion-label class="head_text">Jobs Past Due Date</ion-label>

        <div class="video" *ngFor="let item of jobManagerPastDueData" (click)="jobPastDue(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">
              <ion-label class="bold_text">{{item.title}}</ion-label>
              <ion-label class="grey_text">{{item.description}}</ion-label>
              <ion-label class="price_line">{{item.contract}}   {{item.price*0.01}} {{item.currency}}  </ion-label>
              <ion-label class="due_date">Due Date: {{item.delivery_date | date}}</ion-label>

            </div>
          </div>
          <div class="right">
            <ion-icon name="chevron-forward-outline" color="medium"></ion-icon>
          </div>
        </div>

      </div>
    </div>


  </div>
</ion-content>

<!--<ion-footer>-->
<!--  <ion-toolbar>-->
<!--    <div class="button" (click)="onBack()">-->
<!--      <ion-label class="text">Return</ion-label>-->
<!--    </div>-->
<!--  </ion-toolbar>-->
<!--</ion-footer>-->
