{% load i18n %}
{# @description The way through to the provider's billing portal: a control that posts to the backend's portal endpoint, or a note when there is none. #}
{# @prop endpoint:text | description:"The backend's portal endpoint. Without it, a note replaces the control." #}
{# The CSRF token comes from context, never an attribute a caller could fill with a stale one. billing_portal.js posts the control (ADR 0005). #}
{# Offered only to somebody with a current subscription, because the endpoint creates a provider customer for whoever posts to it (ADR 0007). #}
<c-vars endpoint />
{% if endpoint %}
  <div data-mvp-payments-portal-link
       data-endpoint="{{ endpoint }}"
       data-csrf-token="{{ csrf_token }}">
    <button type="button"
            class="btn btn-primary"
            aria-describedby="mvp-payments-portal-link-note">
      {% translate "Manage subscription" %}
    </button>
    <p id="mvp-payments-portal-link-note" class="text-sm text-base-content/60">
      {% translate "Opens the provider's own site." %}
    </p>
    <p hidden role="alert" data-mvp-payments-portal-link-failure class="text-sm text-error">
      {% translate "The billing portal could not be reached. Try again later." %}
    </p>
    <p hidden role="alert" data-mvp-payments-portal-link-stale class="text-sm text-error">
      {% translate "This page is out of date. Reload it and try again." %}
    </p>
  </div>
{% else %}
  <p class="text-sm text-base-content/60">
    {% translate "Your subscription is managed by the provider. The billing portal cannot be reached right now." %}
  </p>
{% endif %}