{{#if confirmation}}
  {{#d-modal closeModal=(action "closeModal") modalStyle="inline-modal" title=(i18n "discourse_patrons.confirm")}}
    {{#d-modal-body}}
      <table class="discourse-patrons-confirmation">
        <tr>
          <td>{{i18n 'discourse_patrons.confirmation.amount'}}</td>
          <td class="discourse-donations-amount">{{format-curency amount}}</td>
        </tr>
        <tr>
          <td>{{i18n 'discourse_patrons.confirmation.last4'}}</td>
          <td class="discourse-patrons-last4">.... .... .... {{last4}}</td>
        </tr>
      </table>

    {{/d-modal-body}}

    <div class='modal-footer'>
      {{#d-button action="confirmStripeCard" class="btn btn-primary btn-payment btn-discourse-patrons"}}
        {{i18n 'discourse_patrons.buttons.confirm_payment'}} {{format-curency amount}}
      {{/d-button}}
    </div>

  {{/d-modal}}

  {{#if paymentError}}
    <div class="popup-tip bad">
      {{paymentError}}
    </div>
  {{/if}}

{{else}}
  <div class="discourse-patrons-section-columns">
    <div class="section-column">
      <h3>{{i18n 'discourse_patrons.payment.your_information'}}</h3>

      <div class="user-controls discourse-patrons-fields discourse-patrons-billing">
        <div class="display-row">
          <div class="field">
            {{i18n 'discourse_patrons.billing.name'}}
          </div>
          <div class="value">
            {{input value=billing.name}}
            <div class="desc">{{i18n 'discourse_patrons.payment.optional'}}</div>
          </div>
        </div>
        <div class="display-row">
          <div class="field">
            {{i18n 'discourse_patrons.billing.email'}}
          </div>
          <div class="value">
            {{input type="email" value=billing.email}}
            <div class="desc">{{i18n 'discourse_patrons.payment.optional'}}</div>
          </div>
        </div>
        <div class="display-row">
          <div class="field">
            {{i18n 'discourse_patrons.billing.phone'}}
          </div>
          <div class="value">
            {{input value=billing.phone}}
            <div class="desc">{{i18n 'discourse_patrons.payment.optional'}}</div>
          </div>
        </div>
      </div>

    </div>
    <div class="section-column">
      <h3>{{i18n 'discourse_patrons.payment.payment_information'}}</h3>

      <div class="user-controls discourse-patrons-fields">
        <div class="display-row">
          <div class="field">
            {{i18n 'discourse_patrons.amount'}}
            {{siteSettings.discourse_patrons_currency}}
          </div>
          <div class="value">
            {{combo-box valueAttribute="value" content=amounts value=amount}}
          </div>
        </div>
      </div>

      {{stripe-card
        amount=amount
        currency=currency
        billing=billing
        handleConfirmStripeCard=(action "handleConfirmStripeCard")
      }}
    </div>
  </div>
{{/if}}