<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>Offers</ion-title>
  </ion-toolbar>
</ion-header>


<ion-content>
    <div class="boxed_contents">
        <div class="ion-padding">
            <div class="flex hdt">
                <ion-label class="bold_text">You have {{total_offers}} Offer(s)</ion-label>
            </div>

            <div *ngIf="total_offers>3;">
                <ion-accordion-group>
                    <ion-accordion  *ngFor="let item of myOffersData" value="{{item.offer_uid}}">
                        <ion-item slot="header" color="light">
                            <ion-label>{{item.title}}</ion-label>
                        </ion-item>
                        <div class="ion-padding" slot="content">
                            <div class="offers_div">

                                <ion-grid>
                                    <ion-row>
                                        <ion-col>
                                            <img class="offer_banner" alt="{{item.title}}" src="{{session_image_server+'/'+curr_session+'/job/'+item.job_uid}}" />
                                        </ion-col>
                                        <ion-col>
                                            <div>
                                                <div class="offer_title">{{item.title}}</div>
                                                <div class="expire">Expiration : {{item.expire | date}}</div>
                                                <div class="price">Price : {{item.price*0.01| number : '1.2-2'}} {{item.currency}}</div>
                                            </div>

                                            <div class="detail_txt">
                                                {{(item.job_description.length<95)? item.job_description :item.job_description.substring(0,95)+'...' }}
                                            </div>


                                        </ion-col>
                                    </ion-row>
                                    <ion-row>
                                        <ion-col>
                                            <ion-grid class="action_area">
                                                <ion-row>
                                                    <ion-col>
                                                        <ion-button size="small" (click)="requestReject(item)" color="danger" fill="solid" shape="round">Reject</ion-button>
                                                    </ion-col>
                                                    <ion-col>

                                                    </ion-col>
                                                    <ion-col>
                                                        <ion-button size="small" (click)="requestStart(item)" color="success" fill="solid" shape="round">Start Now</ion-button>
                                                    </ion-col>
                                                </ion-row>
                                            </ion-grid>

                                        </ion-col>
                                    </ion-row>
                                </ion-grid>


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

            <div *ngIf="total_offers>0 && total_offers<4;">
                <div *ngFor="let item of myOffersData">
                    <div class="offers_div">

                        <ion-grid>
                            <ion-row>
                                <ion-col>
                                    <img class="offer_banner" alt="{{item.title}}" src="{{session_image_server+'/'+curr_session+'/job/'+item.job_uid}}" />
                                </ion-col>
                                <ion-col>
                                    <div>
                                        <div class="offer_title">{{item.title}}</div>
                                        <div class="expire">Expiration : {{item.expire | date}}</div>
                                        <div class="price">Price : {{item.price*0.01| number : '1.2-2'}} {{item.currency}}</div>
                                    </div>

                                    <div class="detail_txt">
                                        {{(item.job_description.length<95)? item.job_description :item.job_description.substring(0,95)+'...' }}
                                    </div>


                                </ion-col>
                            </ion-row>
                            <ion-row>
                                <ion-col>
                                    <ion-grid class="action_area">
                                        <ion-row>
                                            <ion-col>
                                                <ion-button size="small" (click)="requestReject(item)" color="danger" fill="solid" shape="round">Reject</ion-button>
                                            </ion-col>
                                            <ion-col>

                                            </ion-col>
                                            <ion-col>
                                                <ion-button size="small" (click)="requestStart(item)" color="success" fill="solid" shape="round">Start Now</ion-button>
                                            </ion-col>
                                        </ion-row>
                                    </ion-grid>

                                </ion-col>
                            </ion-row>
                        </ion-grid>


                    </div>
                </div>
            </div>


        </div>
    </div>

    <!--      <div class="top_banner">-->
    <!--&lt;!&ndash;        <img class="offer_banner" alt="{{item.title}}" src="https://www.wrenchboard.com/assets/images/apps/offerslist/{{item.banner}}" />&ndash;&gt;-->
    <!--        <img class="offer_banner" alt="{{item.title}}" src="{{session_image_server+'/'+curr_session+'/job/'+item.job_uid}}" />-->

    <!--      </div>-->
    <!--      <ion-card-header>-->
    <!--        <ion-card-title class="offer_title">{{item.title}}</ion-card-title>-->
    <!--        <ion-card-subtitle>Expiration:{{item.expire | date}}</ion-card-subtitle>-->
    <!--      </ion-card-header>-->

    <!--      <ion-card-content>-->
    <!--        {{item.job_description}}-->
    <!--      </ion-card-content>-->

    <!--      <ion-grid>-->
    <!--        <ion-row>-->
    <!--          <ion-col>-->
    <!--            <ion-button size="small" (click)="requestReject(item)" color="danger" fill="outline">Reject</ion-button>-->
    <!--          </ion-col>-->
    <!--          <ion-col>-->

    <!--          </ion-col>-->
    <!--          <ion-col>-->
    <!--            <ion-button size="small" (click)="requestStart(item)" color="success" fill="outline">Start Now</ion-button>-->
    <!--          </ion-col>-->
    <!--        </ion-row>-->
    <!--      </ion-grid>-->
<!--  <div class="bg_image back_image" [style.backgroundImage]="'url(assets/images/p4.jpg)'">-->
<!--    <div class="ion-padding">-->
<!--      <ion-icon slot="start" name="arrow-back" class="back" (click)="onBack()"></ion-icon>-->
<!--    </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>-->
