<ion-modal-view ng-controller="payproController">
  <ion-header-bar align-title="center" class="bar-royal" ng-style="{'background-color': color, 'border-color': color}">
    <button class="button button-clear" ng-click="cancel()">
      {{'Close' | translate}}
    </button>
    <div class="title" translate>
      Payment request
    </div>
  </ion-header-bar>

  <ion-content>
    <div class="header-modal text-center size-42">
      {{amountStr}}
    </div>

    <div class="list">
      <div class="item item-divider" translate>
        Details
      </div>
      <div class="item">
        {{'Pay To'|translate}}
        <span class="item-note">{{paypro.domain}}</span>
      </div>
      <div class="item" ng-if="paypro.toAddress">
        {{'Address'|translate}}
        <span class="item-note">{{paypro.toAddress}}</span>
      </div>
      <div class="item">
        {{'Certified by'|translate}}
        <span class="item-note">
          <span ng-show="paypro.caTrusted">
            <i class="ion-locked" style="color:green"></i>
            {{paypro.caName}}<br>
            <span translate>(Trusted)</span>
          </span>
          <span ng-show="!paypro.caTrusted">
            <span ng-show="paypro.selfSigned">
              <i class="ion-unlocked" style="color:red"></i> <span translate>Self-signed Certificate</span>
            </span>
            <span ng-show="!paypro.selfSigned">
              <i class="ion-locked" style="color:yellow"></i>{{paypro.caName}}<br>
              <span translate>WARNING: UNTRUSTED CERTIFICATE</span>
            </span>
          </span>
        </span>
      </div>
      <div class="item" ng-if="paypro.memo">
        {{'Memo'|translate}}
        <span class="item-note wrapword">{{paypro.memo}}</span>
      </div>
      <div class="item" ng-if="paypro.expires">
        {{'Expires'|translate}}
        <span class="item-note">{{paypro.expires * 1000 | amTimeAgo }}</span>
      </div>
    </div>
  </ion-content>
</ion-modal-view>
