<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>My Jobs</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div *ngIf="total_jobs<5;" class="bg_image back_image" [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/joblist.jpg)'">
    <div class="ion-padding">
<!--      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>-->
    </div>
  </div>
  <div class="boxed_contents">

    <div class="ion-padding">
      <div class="flex">
        <ion-label class="bold_text">My Jobs</ion-label>
<!--        <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
      </div>

<!--      <div class="row">-->
<!--        <ion-label class="bg_text">.....</ion-label>-->
<!--        <div class="rate">-->
<!--          &lt;!&ndash;        <ion-icon name="star-half-outline" color="warning"></ion-icon>&ndash;&gt;-->
<!--          &lt;!&ndash;        <ion-label class="review">4.8 (4478 reviews)</ion-label>&ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
      <!--    <ion-label class="color_text">$40</ion-label>-->

      <div class="items">
        <div class="stud">
          <ion-icon slot="start" name="list" color="primary"></ion-icon>
          <ion-label>Total : {{total_jobs}} Job(s) </ion-label>
        </div>
        <!--      <div class="stud">-->
        <!--        <ion-icon slot="start" name="time" color="primary"></ion-icon>-->
        <!--        <ion-label>2.5 hours</ion-label>-->
        <!--      </div>-->
        <!--      <div class="stud">-->
        <!--        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
        <!--        <ion-label>Certificate</ion-label>-->
        <!--      </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="solid"  (click)="addNewJob()">
            <ion-icon name="add-circle" color="warning"></ion-icon>
            Add New</ion-button>

        </div>
      </div>

      <div  class="lesson">
        <!--      <div class="flex">-->
        <!--        <ion-label class="bold">Most Popular Courses</ion-label>-->
        <!--        <ion-label class="color">See all</ion-label>-->
        <!--      </div>-->

        <!--      <div class="sec">-->
        <!--        <ion-label class="grey">Section 1 - Introduction</ion-label>-->
        <!--        <ion-label class="color">15 min</ion-label>-->
        <!--      </div>-->

        <div class="video" *ngFor="let item of jobManagerJobsData" (click)="jobOwnerJobDetails(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.price*0.01}} {{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>


</ion-content>

<div *ngIf="isModalOpenBackdrop==true">
  <ion-backdrop [visible]="isModalOpenBackdrop"></ion-backdrop>
  <ion-modal class="common_modal" [isOpen]="isModalOpen"><ng-template>
    <ion-header  class="modal-head">
      <ion-toolbar>
        <ion-title>Add Job</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="setCloseModal()">Close</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <app-add-jobs></app-add-jobs>
    </ion-content>
    <ion-footer>
      <ion-grid style="background-color: lightgray;">
        <ion-row>
          <ion-col>
            <ion-button
                    (click)="setCloseModal()"
                    shape="round"
                    size="small"
                    color="danger">
              Close
            </ion-button>
          </ion-col>
          <ion-col></ion-col>
          <ion-col>
            <ion-button
                    shape="round"
                    size="small"
                    (click)="processCreateJob()">Create Job</ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>


    </ion-footer>

<!--    <ion-footer>-->
<!--      <ion-toolbar>-->
<!--        <ion-button  [disabled]="isProcessDisabled"       (click)="processPayment(processor)">Create Job </ion-button>-->
<!--      </ion-toolbar>-->
<!--    </ion-footer>-->
  </ng-template>



  </ion-modal>
</div>
