<div class="m20t">
  <label class="size-14 text-center">
    <span translate>Send bitcoin</span>
  </label>
</div>
<div class="text-center">
  <div class="size-36">{{tx.amountStr}}</div>
  <div class="size-12 label gray radius" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
  <i class="db fi-arrow-down size-24 m10v"></i>
  <div class="payment-proposal-to" copy-to-clipboard="tx.toAddress">
    <i class="fi-bitcoin left m10l"></i>
    <contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select ellipsis m5t m5b m15l size-14" address="{{tx.toAddress}}"></contact>
    <span ng-if="tx.hasMultiplesOutputs" translate>
      Multiple recipients
    </span>
  </div>
  <div class="m10t size-12" ng-init="processFee(tx.amount, tx.fee)">
    <div ng-show="!showPercentage" ng-click="showPercentage = true">
      <span translate>Fee</span> <span class="tl">({{feeLevel|translate}})</span>:
      <span class="text-bold">{{tx.feeStr}}</span>
      <span class="label gray radius">{{feeAlternativeStr}}</span>
    </div>
    <div ng-show="showPercentage" ng-click="showPercentage = false" translate>
      {{feeRateStr}} of the transaction
    </div>
  </div>
  <div class="row m20t dib">
    <div class="half-row left">
      <button ng-click="cancel()" class="round outline dark-gray expand">
        <span class="size-12" translate>Cancel</span>
      </button>
    </div>
    <div class="half-row left">
      <button ng-click="accept()" class="round expand" ng-class="{'wallet-background-color-default': !color}" ng-style="{'background-color': color}" autofocus>
        <span class="size-12" translate>Confirm</span>
      </button>
    </div>
  </div>
</div>
