
<ion-content>
  <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>

  <div class="ion-padding">
    <div class="flex">
      <ion-label class="bold_text">You have {{total_offers}} offer(s)</ion-label>
<!--      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
    </div>

    <ion-card *ngFor="let item of myOffersData">
      <div class="top_banner">
        <img class="offer_banner" alt="{{item.title}}" src="https://www.wrenchboard.com/assets/images/apps/offerslist/{{item.banner}}" />
      </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>


    </ion-card>



  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <div class="button" (click)="onBack()">
      <ion-label class="text">Return</ion-label>
    </div>
  </ion-toolbar>
</ion-footer>
