<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>
<!--{{session_image_server+'/'+curr_session+'/job/'+item.job_uid}}-->
<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>
      </div>
      <div class="items">
        <div class="stud">
<!--          <ion-icon slot="start" name="money" color="primary"></ion-icon>-->
          <ion-label>Price: {{jobData.price*0.01| number : '1.2-2'}} {{jobData.currency}}</ion-label>
        </div>
        <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="assignjob">
          <ion-label>Assign Job</ion-label>
        </ion-segment-button>
        <ion-segment-button value="jobdetail">
          <ion-label>Details</ion-label>
        </ion-segment-button>
        <ion-segment-button value="manage">
          <ion-label>Manage</ion-label>
        </ion-segment-button>
      </ion-segment>


      <div *ngIf="tabs =='assignjob'" class="jobowner">


        <ion-accordion-group>
          <ion-accordion value="first">
            <ion-item slot="header" color="light">
              <ion-label>Place in Market</ion-label>
            </ion-item>
            <div class="ion-padding" slot="content">

                <ion-grid>
                    <ion-row>
                        <ion-col>Duration</ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col>
                            <ion-select label="Stacked label" label-placement="stacked">
                                <ion-select-option value="1">1 Day</ion-select-option>
                                <ion-select-option value="2">2 Days</ion-select-option>
                                <ion-select-option value="3">3 Days</ion-select-option>
                                <ion-select-option value="4">4 Days</ion-select-option>
                                <ion-select-option value="5">5 Days</ion-select-option>
                                <ion-select-option value="6">6 Days</ion-select-option>
                                <ion-select-option value="7">1 Week</ion-select-option>
                                <ion-select-option value="14">2 Weeks</ion-select-option>
                            </ion-select>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col class="act_but">
                            <ion-button size="small"
                                             shape="round"
                                             color="secondary"
                        (click)="sendOfferToMarket()">Place Task to the Market</ion-button></ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col>.</ion-col>
                    </ion-row>
                </ion-grid>


            </div>
          </ion-accordion>
          <ion-accordion value="second">
            <ion-item slot="header" color="light">
              <ion-label>Assign to individual</ion-label>
            </ion-item>
            <div class="ion-padding" slot="content">

                <ion-grid>
                    <ion-row>
                        <ion-col>Recipient Email</ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col>
                            <ion-list>
                                <ion-item>
                                    <ion-input label="Email of recipient" placeholder="Enter Recipient Email" maxlength="35"></ion-input>
                                </ion-item>
                            </ion-list>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col class="act_but">
                            <ion-button size="small"
                                             shape="round"
                                             color="secondary"
                                             (click)="sendOfferToIndividual()">Send offer to individual</ion-button></ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col>.</ion-col>
                    </ion-row>
                </ion-grid>

            </div>
          </ion-accordion>
        </ion-accordion-group>
      </div>


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


      </div>

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


      </div>


      <!--      <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>



  </div>
</ion-content>