<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-buttons slot="end">
      <!--      <ion-button>-->
      <!--        <ion-icon name="ellipsis-horizontal-circle-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('+session_image_server+'/'+curr_session+'/job/'+jobData.job_uid+')'">
    <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">{{jobData?.title}}</ion-label>
<!--        <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
      </div>

      <div class="row">
        <ion-label class="bg_text">{{jobData.offer_code}}</ion-label>
        <div class="rate">
          <!--        <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
          <ion-label class="review"> ({{jobData.interest_count}} interest)</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-segment class="common_segment" [(ngModel)]="tabs">
        <ion-segment-button value="lesson">
          <ion-label>Show Interest</ion-label>
        </ion-segment-button>

        <ion-segment-button value="about">
          <ion-label>Details</ion-label>
        </ion-segment-button>

        <ion-segment-button value="message">
          <ion-label>Message</ion-label>
        </ion-segment-button>
      </ion-segment>

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

        <!--      <div class="mentor" (click)="onMentor()">-->
        <div class="mentor">
          <div class="left">
            <div class="bg_image men_image" [style.backgroundImage]="'url('+session_image_server+'/'+curr_session+'/job/'+jobData.job_uid+')'"></div>
            <div style="margin-left: 10px;">
              <ion-label class="bold">Expires</ion-label>
              <ion-label class="grey">{{jobData.expire}}</ion-label>
            </div>
          </div>
          <!--        <ion-icon name="chatbubble-ellipses-outline" color="primary"></ion-icon>-->
        </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 =='lesson'" 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 3 - Let's Practice</ion-label>-->
        <!--        <ion-label class="color">75 min</ion-label>-->
        <!--      </div>-->

        <ion-card *ngIf="interestStatus==false;">
          <ion-card-header>
            <ion-card-subtitle>Interested in the task?</ion-card-subtitle>
          </ion-card-header>

          <ion-card-content>
            <ion-button color="secondary" expand="block" (click)="sendJobInterestMessage()">Send Interest Request to Owner</ion-button>
            <ion-label class="description">{{interest_status}}
            </ion-label>
          </ion-card-content>
        </ion-card>

        <ion-card *ngIf="interestStatus==true;">
          <img alt="Silhouette of mountains" src="https://www.wrenchboard.com/assets/images/apps/waiting-task.jpg" />
          <ion-card-header>
            <ion-card-title>Waiting for feedback</ion-card-title>
            <ion-card-subtitle>Sent:  {{interestDate |date}}</ion-card-subtitle>
          </ion-card-header>

          <ion-card-content>
            You have already sent a notice of interest. If the owner accepts, you will receive a notification to start.
          </ion-card-content>
        </ion-card>




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

        <!--          <div class="text">-->
        <!--            <ion-label class="bold_text">Why Using Figma ?</ion-label>-->
        <!--            <ion-label class="grey_text">10 mins</ion-label>-->
        <!--          </div>-->
        <!--        </div>-->
        <!--        <div class="right">-->
        <!--          <ion-icon name="lock-closed-outline"></ion-icon>-->
        <!--        </div>-->
        <!--      </div>-->

      </div>

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

        <ion-card>
          <ion-card-header>
            <ion-card-subtitle>Send Message to task owner</ion-card-subtitle>
          </ion-card-header>

          <ion-card-content>
            <ion-textarea label="Your Message to Job Owner" placeholder="Type something here"  [(ngModel)]='yourmessage' ></ion-textarea>
          </ion-card-content>

          <ion-button color="secondary" expand="block" (click)="sendJobmarketMessage()">Send Message</ion-button>
          <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>-->

