<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>{{jobData.title}}</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/taskbanners/'+item_banner+')'">
    <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-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
<!--      </div>-->
      <div class="flex">
<!--        <ion-label class="bold_text">{{jobData.title}}</ion-label>-->
      </div>

      <div class="row">
        <ion-label class="bg_text">{{jobData.contract}}</ion-label>
        <div class="rate">
          <!--        <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
          <ion-label class="review"> Due date: {{jobData.delivery_date |date}} </ion-label>
        </div>
      </div>

      <ion-label class="color_text">Price: {{jobData.price*0.01| number : '1.2-2'}} {{jobData.currency}}</ion-label>

      <div class="items">
        <div class="stud">
          <ion-icon slot="start" name="time" color="primary"></ion-icon>
          <ion-label>Timeline: {{jobData.timeline_days}} days</ion-label>
        </div>
        <!--      <div class="stud">-->
        <!--        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
        <!--        <ion-label>Certificate</ion-label>-->
        <!--      </div>-->
      </div>

<!--      <ion-card>-->
<!--        <ion-card-header>-->
<!--          <ion-card-subtitle>Task Actions</ion-card-subtitle>-->
<!--        </ion-card-header>-->
<!--        <ion-card-content>-->
<!--          This task is already past the due date. You can extend the timeline or cancel the job.-->
<!--        </ion-card-content>-->

<!--        <ion-button fill="clear">Extend Due Date</ion-button>-->
<!--        <ion-button color="danger" fill="clear">Cancel Task</ion-button>-->
<!--      </ion-card>-->

      <!--      <ion-grid>-->
      <!--        <ion-row>-->
      <!--          <ion-col>-->
      <!--            <ion-card color="secondary">-->
      <!--              <ion-card-header>-->
      <!--                <ion-card-subtitle>Card Subtitle</ion-card-subtitle>-->
      <!--              </ion-card-header>-->

      <!--              <ion-card-content>-->
      <!--                <ion-button color="secondary" expand="block" fill="outline"  >Extend Due Date</ion-button>-->
      <!--              </ion-card-content>-->
      <!--            </ion-card>-->
      <!--          </ion-col>-->
      <!--          <ion-col>-->
      <!--            <ion-card color="danger">-->
      <!--              <ion-card-header>-->
      <!--                <ion-card-subtitle>-->
      <!--                  Card Subtitle-->
      <!--                </ion-card-subtitle>-->
      <!--              </ion-card-header>-->

      <!--              <ion-card-content>-->
      <!--                <ion-button color="secondary" expand="block" fill="outline">Cancel Task</ion-button>-->
      <!--              </ion-card-content>-->
      <!--            </ion-card>-->
      <!--          </ion-col>-->
      <!--        </ion-row>-->
      <!--      </ion-grid>-->

      <ion-segment [(ngModel)]="tabs">
        <ion-segment-button value="activities">
          <ion-label>Activities</ion-label>
        </ion-segment-button>
        <!--        <ion-segment-button value="lesson">-->
        <!--          <ion-label>Show Interest</ion-label>-->
        <!--        </ion-segment-button>-->
        <ion-segment-button value="message">
          <ion-label>Send Message</ion-label>
        </ion-segment-button>
      </ion-segment>

      <!--      <div *ngIf="tabs =='about'" class="about">-->
      <!--        <ion-label class="head_text">{{jobData.offer_code}}</ion-label>-->

      <!--        &lt;!&ndash;      <div class="mentor" (click)="onMentor()">&ndash;&gt;-->
      <!--        <div class="mentor">-->
      <!--          <div class="left">-->
      <!--            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->
      <!--            <div style="margin-left: 10px;">-->
      <!--              <ion-label class="bold">Expires</ion-label>-->
      <!--              <ion-label class="grey">{{jobData.expire}}</ion-label>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--          &lt;!&ndash;        <ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>&ndash;&gt;-->
      <!--        </div>-->

      <!--        <ion-label class="head_text">Description</ion-label>-->
      <!--        <ion-label class="description">{{jobData.job_description}}-->
      <!--        </ion-label>-->

      <!--        <ion-label class="head_text">Delivery Details</ion-label>-->
      <!--        <ion-label class="description">{{jobData.description}}-->
      <!--        </ion-label>-->
      <!--      </div>-->

        <div *ngIf="tabs =='activities'" class="lesson">
            <app-taskactivities [jobData]="jobData"></app-taskactivities>
        </div>


      <div *ngIf="tabs =='message'" class="lesson">


          <ion-card>
              <ion-card-header>
                  <ion-card-subtitle>Send Message</ion-card-subtitle>
              </ion-card-header>

              <ion-card-content>
                  <ion-textarea label="Your Message to Job Owner" placeholder="Type message here"  [(ngModel)]='yourmessage' ></ion-textarea>
                  <ion-button color="secondary" expand="block" (click)="sendActiveJobMessage()">Send Updates</ion-button>
              </ion-card-content>


              <ion-label class="description">{{interest_msg_status}}
              </ion-label>
          </ion-card>


        <!--      <div class="video">-->

        <!--          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/taskbanners/default.jpg)'"></div>-->







        <!--      <div class="story-item">-->
        <!--        <div class="menu">-->
        <!--          <div class="text">-->
        <!--            <div class="select show">-->
        <!--              <ion-icon slot="start" name="star" color="light" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num white">All</ion-label>-->
        <!--            </div>-->
        <!--            <div class="select">-->
        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num">1</ion-label>-->
        <!--            </div>-->
        <!--            <div class="select">-->
        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num">2</ion-label>-->
        <!--            </div>-->
        <!--            <div class="select">-->
        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num">3</ion-label>-->
        <!--            </div>-->
        <!--            <div class="select">-->
        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num">4</ion-label>-->
        <!--            </div>-->
        <!--            <div class="select">-->
        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num">5</ion-label>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--      </div>-->

        <!--      <div class="reviw_list" *ngFor="let item of [1,2,3,4,5]">-->
        <!--        <div class="profile">-->
        <!--          <div class="left">-->
        <!--            <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/p2.jpg)'"></div>-->
        <!--            <div style="margin-left: 10px;">-->
        <!--              <ion-label class="bold">Jonathon Williams</ion-label>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--          <div class="right">-->
        <!--            <div class="select">-->
        <!--              <ion-icon slot="start" name="star" color="primary" class="star_icon"></ion-icon>-->
        <!--              <ion-label class="rate_num">5</ion-label>-->
        <!--            </div>-->
        <!--            <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <ion-label>The course is very good. the experience of the menter is very clear and easy to understand-->
        <!--        </ion-label>-->

        <!--        <div class="like">-->
        <!--          <ion-icon slot="start" name="heart" color="danger" class="heart"></ion-icon>-->
        <!--          <ion-label class="count">330</ion-label>-->
        <!--          <ion-label class="time">2 Days ago</ion-label>-->
        <!--        </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>-->


