{{#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">{{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"}}
        {{i18n 'discourse_patrons.submit'}} {{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.your_information'}}</h3>

      <div class="user-controls">
        <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 class="display-row">
          <div class="field">
            {{i18n 'discourse_patrons.billing.name'}}
          </div>
          <div class="value">
            {{input value=billing.name}}
          </div>
        </div>
        <div class="display-row">
          <div class="field">
            {{i18n 'discourse_patrons.billing.email'}}
          </div>
          <div class="value">
            {{input value=billing.email}}
          </div>
        </div>
        <div class="display-row">
          <div class="field">
            {{i18n 'discourse_patrons.billing.phone'}}
          </div>
          <div class="value">
            {{input value=billing.phone}}
          </div>
        </div>
      </div>

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