{% load i18n %}
{# @description The way to another plan. A reader on no plan gets a link to the plans page. A subscriber gets a control that opens the provider's plan-change screen, or nothing when no endpoint is configured. #}
{# @prop url:text | description:"Where the plans page is mounted." #}
{# @prop subscribed:boolean | default:False | description:"Whether the reader is on a plan already." #}
{# @prop switch_endpoint:text | description:"The project's plan-change endpoint. Without it a subscriber is offered nothing." #}
{# A subscriber is offered the plan switch rather than the plans page, which would start a second subscription (ADR 0008). #}
{# The control carries portal-link's data attributes so billing_portal.js binds it, and reads csrf_token from context for the same reason. #}
<c-vars url subscribed=False switch_endpoint />
{% if subscribed %}
  {% if switch_endpoint %}
    <div data-mvp-payments-portal-link
         data-endpoint="{{ switch_endpoint }}"
         data-csrf-token="{{ csrf_token }}">
      <button type="button" class="btn btn-outline">{% translate "Switch plans" %}</button>
      <p hidden role="alert" data-mvp-payments-portal-link-failure class="text-sm text-error">
        {% translate "Plans could not be changed right now. 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>
  {% endif %}
{% elif url %}
  <a href="{{ url }}" class="btn btn-outline">{% translate "Choose a plan" %}</a>
{% endif %}