{% extends "mvp/account/base.html" %}
{% block account.content %}
  <c-mvp.page>
    <c-mvp.page.title :title="page.title" />
    {# Polls for itself while a payment is on its way; see provider_return. #}
    <div id="mvp-payments-subscription"
         class="flex flex-col gap-6"
         {% if provider_return.poll_url %}hx-get="{{ provider_return.poll_url }}" hx-trigger="every 3s" hx-select="#mvp-payments-subscription" hx-swap="outerHTML"{% endif %}>
      <c-stripe.provider-return :state="provider_return" />
      {% for subscription in subscriptions %}
        <c-stripe.subscription :subscription="subscription" />
      {% empty %}
        {% if not provider_return %}
          <c-stripe.no-subscription />
        {% endif %}
      {% endfor %}
      <div class="flex flex-wrap items-start gap-3"
           data-mvp-payments-subscription-actions>
        <c-stripe.plans-link :url="plans_url"
                                 :subscribed="subscriptions"
                                 :switch_endpoint="plan_switch_endpoint" />
        {% if subscriptions %}
          <c-stripe.portal-link :endpoint="billing_portal_endpoint" />
        {% endif %}
      </div>
    </div>
  </c-mvp.page>
{% endblock account.content %}