<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="boxed_contents">
        <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="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.contract}}</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"> ({{jobData.interest_count}} interest)</ion-label>&ndash;&gt;-->
<!--                </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>

            <div  *ngIf="status_description == 'ACTIVE'" >
                <ion-segment class="common_segment" [(ngModel)]="tabs">
                    <ion-segment-button value="activities">
                        <ion-label>Send Updates</ion-label>
                    </ion-segment-button>
                    <ion-segment-button value="review">
                        <ion-label>Actions</ion-label>
                    </ion-segment-button>
                    <ion-segment-button value="about">
                        <ion-label>Details</ion-label>
                    </ion-segment-button>
                </ion-segment>

                <div *ngIf="tabs =='about'" class="about">
                    <div class="work_area">
                        <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 *ngIf="tabs =='activities'" class="lesson">
                    <ion-card>
                        <ion-card-content  style="padding: 1px;">
                            <ion-textarea
                                    style="background-color: aliceblue; margin: 0px; min-height: 120px"
                                    label="Your Message to Job Owner"
                                    placeholder="Enter your updates 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 Updates</ion-button>
                                </ion-col>
                            </ion-row>
                        </ion-grid>

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

                <div *ngIf="tabs =='review'" class="review_tab">
                    <!--              <div class="total">-->
                    <!--                  <div class="star-rate">-->
                    <!--                      &lt;!&ndash;          <ion-icon name="star-half-outline" color="warning"></ion-icon>&ndash;&gt;-->
                    <!--                      <ion-label class="bold">Task Actions</ion-label>-->
                    <!--                  </div>-->
                    <!--                  &lt;!&ndash;        <ion-label class="color">See all</ion-label>&ndash;&gt;-->
                    <!--              </div>-->

                    <ion-card>
                        <!--                  <ion-card-header>-->
                        <!--                      <ion-card-subtitle>Completed the task?</ion-card-subtitle>-->
                        <!--                  </ion-card-header>-->

                        <ion-card-content>
                            <ion-grid>
                                <ion-row>
                                    <ion-col>
                                        <div color="warning"  class="ion-text-wrap task_button" (click)="taskCancel()">Send cancellation request</div>
                                    </ion-col>
                                    <ion-col>
                                        <div color="secondary"  class="ion-text-wrap task_button cpl" (click)="taskCompleted()">Send completion Message</div>
                                    </ion-col>
                                </ion-row>
                            </ion-grid>

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

                    <!--              <ion-card color="warning">-->
                    <!--                  <ion-card-header>-->
                    <!--                      <ion-card-subtitle>Cancel the task?</ion-card-subtitle>-->
                    <!--                  </ion-card-header>-->

                    <!--                  <ion-card-content>-->
                    <!--                      <ion-label class="description">{{interest_status}}-->
                    <!--                      </ion-label>-->
                    <!--                  </ion-card-content>-->
                    <!--              </ion-card>-->
                </div>
            </div>

            <div *ngIf="status_description == 'PASTDUE'" >
                <ion-card color="danger">
                    <ion-card-header>
                        <ion-card-subtitle>Task is pat due date</ion-card-subtitle>
                    </ion-card-header>

                    <ion-card-content>
                        <ion-button color="secondary" expand="block" >Request Extension</ion-button>
                    </ion-card-content>
                </ion-card>
            </div>
            <div *ngIf="status_description == 'REVIEW'" >
                <ion-card color="success">
                    <ion-card-header>
                        <ion-card-subtitle>Task is in Review</ion-card-subtitle>
                    </ion-card-header>

                    <ion-card-content> THis task is in review , the owner will give feedback soon. </ion-card-content>
                </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>-->

