{% load i18n static %}

{% if customer.customer.default_source %}

  {% with source=customer.customer.default_source %}
    {{ source.brand }},
    endend auf {{ source.last4 }},
    gültig bis {{ source.exp_month }}/{{ source.exp_year }}.
  {% endwith %}
  <form method="post" action="{{ charge_url }}">
    {% csrf_token %}
    <input type="hidden" name="id" value="{{ payment.id.hex }}">
    <button type="submit">{{ moocher.title }}</button>
  </form>

{% else %}

  <form method="post" action="{{ charge_url }}" data-publishable-key="{{ publishable_key }}">
    {% csrf_token %}
    <input type="hidden" name="id" value="{{ payment.id.hex }}">
    <strong>{{ moocher.title }}</strong>
    <div id="card-element"></div>
    <div style="padding-top:8px;display:flex">
      <button type="submit" class="button" style="flex-grow:0;margin:-2px 10px 0 0">Zahlen</button>
      <div id="card-errors" role="alert"></div>
    </div>
  </form>

  <script src="https://js.stripe.com/v3/"></script>
  <script src="{% static 'stripe_customers/cards.js' %}"></script>

{% endif %}