<ion-view id="txp-details" 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 class="tx-details-content">
    <div class="list" ng-if="btx">
      <div class="item head">
        <div class="sending-label" ng-if="btx.confirmations > 0">
          <img src="img/icon-tx-sent-outline.svg" ng-if="btx.action === 'sent'">
          <img src="img/icon-tx-received-outline.svg" ng-if="btx.action === 'received'">
          <img src="img/icon-tx-moved-outline.svg" ng-if="btx.action === 'moved'">
          <span ng-if="btx.action === 'sent'">{{'Sent' | translate}}</span>
          <span ng-if="btx.action === 'received'">{{'Received' | translate}}</span>
          <span ng-if="btx.action === 'moved'">{{'Moved' | translate}}</span>
        </div>
        <div class="sending-label" ng-if="btx.confirmations === 0">
          <img src="img/icon-confirming.svg">
          <span ng-if="btx.action == 'sent' || btx.action == 'moved'" translate>Sending</span>
          <span ng-if="btx.action == 'received'" translate>Receiving</span>
        </div>
        <div class="amount-label">
          <div class="amount">{{displayAmount}} <span class="unit">{{displayUnit}}</span></div>
          <div class="alternative" ng-click="showRate = !showRate">
            <span ng-if="!showRate">{{btx.alternativeAmountStr}}</span>
            <span ng-if="showRate">
              <span ng-if="!rate">...</span>
              <span ng-if="rate">
                {{rate| currency:'':2}} {{alternativeIsoCode}} ({{rateDate | amDateFormat:'MM/DD/YYYY HH:mm a'}})
              </span>
            </span>
          </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-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color': wallet.color}" class="bg"/>
            </i>
            <div>{{wallet.name}}</div>
          </div>
        </div>
        <div class="item single-line" ng-if="btx.action != 'received' && isShared">
          <span class="label" translate>Created by</span>
          <span class="item-note">
            {{btx.creatorName}}
          </span>
        </div>
        <div class="item single-line" ng-if="btx.ts || btx.createdOn || btx.time">
          <span class="label" translate>Date</span>
          <span class="item-note">
            <time>{{ (btx.ts || btx.createdOn || btx.time) * 1000 | amDateFormat:'MM/DD/YYYY hh:mm a'}}</time>
          </span>
        </div>
        <a class="item item-icon-right" ng-class="{'single-line': !btx.note.body && !btx.message}" ng-click="showCommentPopup()">
          <span class="label" translate>Memo</span>
          <div class="item-note" style="display: block; float: none; margin-bottom: .25rem;">
            {{btx.note.body || btx.message}}
          </div>
          <i class="icon bp-arrow-right"></i>
        </a>
        <div class="item single-line" ng-click="toggleFeeFiat = !toggleFeeFiat">
          <span class="label" translate>Fee</span>
          <span class="item-note">
            <span ng-if="!toggleFeeFiat">{{btx.feeStr}}</span>
            <span ng-if="toggleFeeFiat">{{feeFiatStr}}</span>
          </span>
        </div>
        <div class="item low-fees" ng-if="btx.action == 'received' && btx.lowFees">
          <i class="icon"><img src="img/icon-warning.png" width="20px"></i>
          <span translate>This transaction could take a long time to confirm or could be dropped due to the low fees set by the sender</span>
        </div>
        <div class="item single-line">
          <span class="label" translate>Confirmations</span>
          <span class="item-note">
            <span ng-if="!btx.confirmations || btx.confirmations == 0" translate>
              Unconfirmed
            </span>
            <span ng-if="btx.confirmations>0 && !btx.safeConfirmed">
              {{btx.confirmations}}
            </span>
            <span ng-if="btx.safeConfirmed">
              {{btx.safeConfirmed}}
            </span>
          </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 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 ng-if="btx" class="view-on-blockchain-btn button button-standard button-primary" ng-click="viewOnBlockchain()" translate>
      View on blockchain
    </button>

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