<div class="modal-header bg-698-blue">
  <h4 class="modal-title text-white font-weight-bold" id="modal-title">
    {{'TEAM_PAYMENT.PAYMENT_CONFIRMATION' | translate}}
  </h4>
  <button
    ng-click="onClose()"
    type="button"
    class="close text-dark"
    data-dismiss="modal"
    aria-label="Close"
  >
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body" id="modal-body">
  <div class="text-center font-weight-bold mb-3" style="font-size: 18px;">
    Please confirm your details
  </div>
  <table class="table border-0" style="font-size: 16px;">
    <tbody>
      <tr>
        <td class="font-weight-bold border-0 pr-2" style="width: 140px;">E-mail:</td>
        <td class="border-0">{{ params.email_address }}</td>
      </tr>
      <tr>
        <td class="font-weight-bold border-0 pr-2">Name:</td>
        <td class="border-0">{{ params.last_name }} {{ params.first_name }}</td>
      </tr>
      <tr>
        <td class="font-weight-bold border-0 pr-2">Package:</td>
        <td class="border-0">{{ packageDetail.name }}</td>
      </tr>
      <tr>
        <td class="font-weight-bold border-0 pr-2">Users:</td>
        <td class="border-0">{{ params.number_of_users || numberOfUsers }}</td>
      </tr>
      <tr>
        <td class="font-weight-bold border-0 pr-2">Billing Cycle:</td>
        <td class="border-0">{{ packageDetail.billing_cycle }}</td>
      </tr>
      <tr>
        <td class="font-weight-bold border-0 pr-2">Total:</td>
        <td class="border-0 font-weight-bold" style="font-size: 18px;">
          {{ currencyInfo }}{{ totalPrice | number }}
        </td>
      </tr>
    </tbody>
  </table>
  <!-- <div class="alert alert-info d-flex align-items-center mt-3" style="font-size: 15px;">
    <i class="fa fa-info-circle mr-2"></i>
    <div>
      This package requires payment information<br />
      You will be asked to provide card information in the next step
    </div>
  </div> -->
  <div class="mt-3 mb-2 d-flex align-items-center"  style="flex-direction: column; font-size: 15px;">
      <span>
      <i class="fa fa-credit-card mr-2"></i>
        Confirm Payment Information
      </span>
    <span>Card Holder Name: <b>{{ cardInfo.cardholderName }}</b></span>
  </div>
  <div class="modal-footer">
    <button
      class="btn btn-outline-dark"
      type="button"
      ng-click="onClose()"
      ng-bind="opts.lblDismiss"
    ></button>
    <button
      class="btn btn-primary"
      type="button"
      ng-click="onAccept()"
      ng-bind="opts.lblAccept"
    ></button>
  </div>
</div>
