{% extends "base.j2" -%}
{%- import 'snippets/stripe.j2' as stripe with context -%}

{% block content -%}

<section class="billing-page">

  <div class="settings-form-grid billing-cards-grid">

    <section class="well">
      <h3 class="type-title">Active Card</h3>

      {% if active_card %}
        <p class="billing-meta">The active card will be charged during checkout.</p>
        {{ stripe.display_card(active_card, actions=False) }}
      {% else %}
        <p class="billing-meta">No card on file yet. Add one on the right to enable credit-card checkout.</p>
      {% endif %}

      {% if cards|length >= 1 %}
        <hr class="billing-divider" />
        <h3 class="type-title">Saved Cards</h3>
        {% for card in cards %}
          {{ stripe.display_card(card) }}
        {% endfor %}
      {% endif %}
    </section>

    <section class="well">
      <h3 class="type-title">{% if active_card %}Add Another Card{% else %}Add a Card{% endif %}</h3>
      {{ stripe.new_card() }}
    </section>

  </div>

  {% if paypal_enabled and paypal_user_shop %}
  <section class="well billing-paypal-well">
    <h3 class="type-title">PayPal Payment Method</h3>

    {% if paypal_user_shop.has_saved_payment_method %}
      <div class="billing-paypal-card">
        <div class="billing-paypal-header">
          <svg class="billing-paypal-logo" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20.067 8.478c.492.88.556 2.014.3 3.327-.74 3.806-3.276 5.12-6.514 5.12h-.5a.805.805 0 00-.794.68l-.04.22-.63 3.993-.032.17a.804.804 0 01-.794.679H7.72a.483.483 0 01-.477-.558L9.01 8.975a.964.964 0 01.951-.814h2.053c3.893 0 6.535 1.62 7.055 6.317z" fill="#0070ba"/>
            <path d="M10.964 8.975a.964.964 0 00-.95.814L8.247 21.891a.483.483 0 00.476.558h3.344c.336 0 .622-.243.678-.574l.028-.15.63-3.994.04-.218a.805.805 0 01.795-.68h.5c3.238 0 5.774-1.314 6.514-5.12.256-1.313.192-2.447-.3-3.327a3.918 3.918 0 00-1.172-1.241c-.67-.437-1.53-.695-2.527-.827-.27-.036-.549-.063-.837-.083h-.18z" fill="#0070ba" opacity=".7"/>
          </svg>
          <strong>PayPal Account Connected</strong>
        </div>
        <p class="billing-meta">Your PayPal account is saved for quick checkout. Click the PayPal button at checkout to complete your purchase.</p>
        <form method="POST" action="/billing/disconnect-paypal" class="billing-inline-form">
          <input type="hidden" name="csrf_token" value="{{ request.session.get_csrf_token() }}" />
          <button type="submit" class="mps-button mps-button-small">Disconnect PayPal</button>
        </form>
      </div>
    {% else %}
      <p class="billing-meta">No PayPal account connected. Check the "Save PayPal" box during checkout to save your PayPal account for faster future purchases.</p>
    {% endif %}
  </section>
  {% endif %}

  <section class="billing-actions">
    <a href="/cart" class="product-edit-button mps-button">Review Order</a>
    <a href="/cart/checkout" class="cart-checkout-button mps-button mps-button-green">Checkout</a>
  </section>

</section>

{%- endblock -%}
