<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('+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-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">-->
<!--          &lt;!&ndash;        <ion-icon name="star-half-outline" color="warning"></ion-icon>&ndash;&gt;-->
<!--          <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>By:{{jobData.job_to}}</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  class="common_segment" [(ngModel)]="tabs">
          <ion-segment-button value="message">
              <ion-label>Task Updates</ion-label>
          </ion-segment-button>
          <ion-segment-button value="activities">
              <ion-label>Activities</ion-label>
          </ion-segment-button>
      </ion-segment>

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


        <div *ngIf="tabs =='message'" class="lesson">
            <ion-card>
                <ion-card-content  style="padding: 1px;">
                    <ion-textarea
                            style="background-color: aliceblue; margin: 0px; min-height: 120px"
                            label="Your Response"
                            placeholder="Enter your response message here"
                            [(ngModel)]='yourmessage' ></ion-textarea>
                </ion-card-content>
                <ion-grid>
                    <ion-row>
                        <ion-col style="text-align: left;">
                            <ion-button fill="outline"  color="secondary" (click)="startCamera(100)">
                                <ion-icon slot="icon-only" name="camera-reverse-outline"></ion-icon>
                            </ion-button>
                            <ion-button fill="outline" style="margin-left: 10px;" (click)="startCamera(0)">
                                <ion-icon slot="icon-only" name="folder-outline"></ion-icon>
                            </ion-button>
                        </ion-col>
                        <ion-col>
                            <ion-button style="margin-left: 20px;"
                                        color="secondary"
                                        expand="block"
                                        (click)="sendActiveJobMessage()">Send Response</ion-button>
                        </ion-col>
                    </ion-row>
                </ion-grid>

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

        <app-taskactivities [jobData]="jobData"></app-taskactivities>

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


