<ion-view>
  <ion-nav-bar class="bar-royal">
    <ion-nav-back-button>
    </ion-nav-back-button>
    <ion-nav-title>Amazon.com Gift Cards</ion-nav-title>
  </ion-nav-bar>

  <ion-content>

    <div class="box-notification warning" ng-show="network == 'testnet'">
      Sandbox version. Only for testing purpose
    </div>

    <div class="m20t text-center" ng-click="updatePendingGiftCards()">
      <img src="img/GCs-logo-cllb.png" alt="Amazon.com Gift Card" width="200">
      <div class="size-12 m10t"><b>Only</b> redeemable on www.amazon.com (USA website)</div>
    </div>

    <div ng-if="!giftCards" class="m20t padding text-center">

      <button class="button button-standard button-primary" ui-sref="tabs.giftcards.amazon.buy">
        Buy now
      </button>

      <div class="text-left m30v size-12">
        Amazon.com Gift Cards never expire and can be redeemed towards millions of items at
        <a ng-click="openExternalLink('https://www.amazon.com')">www.amazon.com</a>
      </div>
    </div>

    <div class="m20t" ng-if="giftCards">
      <div class="list">
        <a class="item item-icon-left item-icon-right" href ui-sref="tabs.giftcards.amazon.buy">
          <i class="icon ion-bag"></i>
          Buy Gift Card
          <i class="icon bp-arrow-right"></i>
        </a>
      </div>

      <div class="card">
        <div class="item item-heading">
          Your cards
        </div>
        <div ng-repeat="(id, item) in giftCards | orderObjectBy:'date':true track by $index"
             ng-click="openCardModal(item)"
             class="item item-avatar">
          <img src="img/a-smile_color_btn.png" alt="{{id}}" width="40">
          <h2 ng-if="item.claimCode">
            {{item.amount | currency : '$ ' : 2}}
          </h2>
          <h2 ng-if="!item.claimCode">
            -
          </h2>
          <p>
            <span class="text-warning" ng-if="item.status == 'FAILURE' || item.status == 'RESEND'">Error</span>
            <span class="text-gray" ng-if="item.status == 'PENDING'">Pending to confirmation</span>
            <span class="text-gray" ng-if="item.status == 'SUCCESS' && item.cardStatus == 'Canceled'">Canceled</span>
            <span class="text-gray" ng-if="item.status == 'SUCCESS' && item.cardStatus == 'Fulfilled'">{{item.date | amTimeAgo}}</span>
          </p>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>
