<ion-view id="view-confirm" hide-tabs>
  <ion-nav-bar class="bar-royal">
    <ion-nav-title>
      {{title}}
    </ion-nav-title>
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-content>
    <div class="list">
      <div class="item head">
        <div class="sending-label">
          <img src="img/icon-check-circled.svg">
          <span translate>{{btx.action | translate}}</span>
        </div>
        <div class="amount-label">
          <div class="amount">{{displayAmount}} <span class="unit">{{displayUnit}}</span></div>
          <div class="alternative">{{btx.alternativeAmountStr}}</div>
        </div>
      </div>
      <div class="info">
        <div class="item" ng-if="btx.action === 'sent'">
          <span class="label" translate>To</span>
          <span class="payment-proposal-to">
            <img ng-if="!cardId" src="img/icon-bitcoin-small.svg">
            <img ng-if="cardId" src="img/icon-card.svg" width="34">
            <div copy-to-clipboard="btx.addressTo" class="ellipsis">
              <contact ng-if="!toName" address="{{btx.addressTo}}" class="ellipsis" style="display: block;"></contact>
              <span class="m15l size-14" ng-if="toName">{{toName}}</span>
            </div>
          </span>
        </div>
        <div class="item">
          <span class="label" ng-if="btx.action === 'sent'" translate>From</span>
          <span class="label" ng-if="btx.action !== 'sent'" translate>To</span>
          <div class="wallet">
            <i class="icon big-icon-svg">
              <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
            </i>
            <div>{{wallet.name}}</div>
          </div>
        </div>
        <div class="item single-line">
          <span class="label" translate>Created by</span>
          <span class="item-note">
            {{btx.creatorName}} <time>{{ (btx.ts || btx.createdOn ) * 1000 | amDateFormat:'MM/DD/YYYY hh:mm a'}}</time>
          </span>
        </div>
        <a class="item single-line item-icon-right" ng-hide="insuffientFunds" ng-click="showCommentPopup()">
          <span class="label" translate>Memo</span>
          <span class="item-note m10l">
            {{btx.note.body || btx.message}}
          </span>
          <i class="icon bp-arrow-right"></i>
        </a>
        <div class="item single-line" ng-hide="insuffientFunds">
          <span class="label" translate>Fee</span>
          <span class="item-note">
            {{btx.feeStr}}
          </span>
        </div>
        <div ng-if="actionList[0]">
          <div class="item item-divider" translate>Timeline</div>
          <div class="item timeline-item" ng-class="{'action-created' : a.type == 'created' || a.type == 'accept', 'action-rejected' : a.type == 'reject'}" ng-repeat="a in actionList | orderBy: 'time' :true track by $index">
            <div class="timeline-content">
              <div class="timeline-content__icon">
                <div class="rejected" ng-if="a.type === 'reject'">!</div>
                <img src="img/icon-broadcasted.svg" ng-if="a.type === 'broadcasted'">
                <div ng-if="a.type !== 'reject' && a.type !== 'broadcasted'">
                  {{actionList.length - $index}}
                </div>
              </div>
              <div class="timeline-content__label">
                <div class="action">{{a.description}}</div>
                <div class="name">{{a.by}}</div>
              </div>
              <div>
                <span class="item-note">
                  <time>{{ a.time * 1000 | amTimeAgo}}</time>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <button class="view-on-blockchain-btn button button-standard button-primary" ng-click="viewOnBlockchain()" translate>
      View on blockchain
    </button>

  </ion-content>
</ion-view>
