{% extends "layouts/settings.html" %}
{% load static %}
{% block title %}Plan & billing · DemandTrail Messaging{% endblock %}
{% block page_header %}{% endblock %}
{% block content_wrap %}{% endblock %}

{% block content %}
<div class="max-w-[1060px] w-full">
  <h1 class="page-title">Plan &amp; billing</h1>
  <p class="page-lede mt-1.5 mb-6">What this organization is on, and what it is using.</p>

  {% if checkout_state == "cancelled" %}
    <div class="alert-info mb-4">Checkout was cancelled. No charge was made.</div>
  {% elif checkout_state == "activating" %}
    <div class="alert-info mb-4">
      Activating your subscription. Refresh in a few seconds.
    </div>
  {% endif %}

  {% if stripe_enabled %}
    <div class="plan-grid">
      {% for card in plans %}
        <div class="plan-card{% if card.key == plan %} plan-card-current{% endif %}">
          <div class="plan-card-head">
            <span class="plan-card-title">
              {% if card.show_logo %}
                <img src="{% static 'img/demandtrail-symbol.png' %}" alt="" class="plan-card-logo" />
              {% endif %}
              <span class="plan-card-name">{{ card.name }}</span>
            </span>
            {% if card.key == plan %}
              <span class="status-pill status-pill-active"><span class="status-pill-dot"></span>Current plan</span>
            {% endif %}
          </div>
          <p class="plan-card-tagline">{{ card.tagline }}</p>

          {% if card.price %}
            <p class="plan-price">
              <span class="plan-price-amount">{{ card.price.amount }}</span>
              <span class="plan-price-note">{{ card.price.note }}</span>
            </p>
          {% endif %}

          {% comment %}
            The call to action sits above the feature list. Somebody who already
            knows they want the plan should not have to travel the whole list to
            act, and both columns then start their bullets at the same height
            whatever each one offers.

            Rendered only when there is something to put in it: Django leaves
            the whitespace inside a template block, so an empty div is not
            `:empty` and a CSS rule could not collapse the gap.
          {% endcomment %}
          {% if card.key == plan and can_manage_billing and can_manage %}
            <div class="plan-card-actions">
              {% comment %}
                The Customer Portal. A plain POST, not a link: it mints a
                single-use session server-side, so the URL cannot be written
                here in advance.

                The redirect it answers with lands on billing.stripe.com, and
                Chrome and Safari check form-action against every hop of a form
                submission's navigation — so that origin is named in the policy.
                See OAUTH_FORM_ACTION in config/settings/base.py, and issue #115
                for the flow where this was found the hard way.
              {% endcomment %}
              <form method="post" action="{% url 'billing:portal' %}">
                {% csrf_token %}
                <button type="submit" class="btn-pill-secondary">Manage billing</button>
              </form>
            </div>
          {% elif card.key == "paid" and card.key != plan and can_manage %}
            <div class="plan-card-actions">
              {% comment %}
                One call to action, and a toggle that swaps the price beside it.

                The swap is CSS, not JavaScript: the two radios precede both
                price blocks, so `input:checked ~ .plan-price` picks the one to
                show. That keeps the page working with no script at all, which
                matters here because the CSP is 'self' with a per-request nonce
                and an inline handler would be refused outright.

                The radios are moved off-screen rather than display:none — a
                hidden input is not focusable, and the control would stop working
                for anybody on a keyboard. Their value posts with the form and
                the view validates it against the same two-element allowlist it
                always did, so this is presentation and not a new input to trust.
              {% endcomment %}
              <form method="post" action="{% url 'billing:checkout' %}">
                {% csrf_token %}
                <fieldset class="plan-pricing">
                  <legend class="sr-only">Billing interval</legend>
                  <input type="radio" name="interval" id="interval-monthly-{{ card.key }}" value="monthly" checked />
                  <input type="radio" name="interval" id="interval-yearly-{{ card.key }}" value="yearly" />

                  <div class="plan-interval">
                    <label for="interval-monthly-{{ card.key }}">Monthly</label>
                    <label for="interval-yearly-{{ card.key }}">
                      Yearly <span class="plan-save">{{ yearly_saving }}</span>
                    </label>
                  </div>

                  {% for key, price in paid_prices.items %}
                    <p class="plan-price" data-interval="{{ key }}">
                      <span class="plan-price-amount">{{ price.amount }}</span>
                      <span class="plan-price-cadence">{{ price.cadence }}</span>
                      <span class="plan-price-note">{{ price.note }}</span>
                    </p>
                  {% endfor %}
                </fieldset>
                <button type="submit" class="btn-pill-primary w-full">Subscribe</button>
              </form>
            </div>
          {% endif %}

          <ul class="plan-card-features">
            {% for feature in card.features %}
              <li>{% include "partials/_nav_icon.html" with name=feature.icon %}<span>{{ feature.text }}</span></li>
            {% endfor %}
          </ul>
        </div>
      {% endfor %}
    </div>

    {% if renews_on %}
      <p class="mb-4 text-sm" style="color: var(--text-secondary);">Renews on {{ renews_on|date:"j F Y" }}.</p>
    {% elif cancels_on %}
      <p class="mb-4 text-sm" style="color: var(--text-secondary);">
            Your plan ends on {{ cancels_on|date:"j F Y" }}. Your work stays here.
      </p>
    {% endif %}

    {% if not can_manage %}
      <p class="mb-4 text-sm" style="color: var(--text-tertiary);">
        Only organization admins can change the plan.
      </p>
    {% endif %}
  {% else %}
    {% comment %}
      No payment provider configured, which is every self-hosted install. There
      is deliberately no plan comparison here: rendering a Free column whose
      limits are fiction on a box that has no limits is the one thing the
      promise in docs/SPEC.md §1.1 actually forbids.
    {% endcomment %}
    <div class="card p-6 mb-4">
      <h2 class="section-title mb-3">Self-hosted</h2>
      <p>
        Every feature is available, with no limits and nothing counted. There is no plan to be on and no
        payment provider to configure.
      </p>
    </div>
  {% endif %}

  <div class="card p-6">
    <h2 class="section-title mb-3">Usage</h2>
    <table class="plan-usage">
      {% for row in usage_rows %}
        <tr class="{% if row.at_limit %}plan-usage-at{% elif row.near_limit %}plan-usage-near{% endif %}">
          <td class="plan-usage-icon">{% include "partials/_nav_icon.html" with name=row.icon %}</td>
          <td>{{ row.label }}</td>
          <td class="plan-usage-figure">
            {% if row.limit is None %}{{ row.used }}{% else %}{{ row.used }} of {{ row.limit }}{% endif %}
          </td>
        </tr>
      {% endfor %}
    </table>
  </div>
</div>
{% endblock %}