{% load i18n %}
{# @description One current subscription: its status as a badge, the current period, and what it is for, what it costs and how often. #}
{# @prop subscription:text | description:"A mvp_payments.namespaces.stripe_records.CurrentSubscription." | required #}
{# A status this component does not recognise still renders, as itself, with a neutral badge (Article XV). #}
<c-vars subscription />
<c-mvp.card>
  <c-slot name="badges">
    {% if subscription.status == "active" %}
      <c-badge variant="success" text="{{ subscription.status }}" />
    {% elif subscription.status == "trialing" %}
      <c-badge variant="info" text="{{ subscription.status }}" />
    {% elif subscription.status == "past_due" %}
      <c-badge variant="warning" text="{{ subscription.status }}" />
    {% else %}
      <c-badge text="{{ subscription.status }}" />
    {% endif %}
  </c-slot>
  {% if subscription.period_start or subscription.period_end %}
    <c-mvp.data-field label="{% translate 'Current period' %}">
      {{ subscription.period_start|date }} – {{ subscription.period_end|date }}
    </c-mvp.data-field>
  {% endif %}
  <div class="flex flex-wrap items-baseline justify-between gap-2 py-2">
    <p class="font-medium">{{ subscription.name }}</p>
    <div class="text-right">
      <c-stripe.amount :amount="subscription.amount" />
      {% if subscription.frequency_display %}
        <span class="text-sm text-base-content/60">{{ subscription.frequency_display }}</span>
      {% endif %}
    </div>
  </div>
</c-mvp.card>