{% extends "base.html" %}

{% block title %}Fan+ - Makenotwork{% endblock %}
{% block body_attrs %} class="padded-page fan-plus-page"{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <div class="container">
        <h1 class="page-title">Fan+</h1>

        {% if just_subscribed %}
        <div class="success-banner">
            You're now a Fan+ member. Welcome.
        </div>
        {% endif %}

        {% if is_subscribed %}
        <div class="status-box">
            <p><strong>Your Fan+ membership is active.</strong></p>
            {% if let Some(end) = period_end %}
            <p>Current period ends: {{ end }}</p>
            {% endif %}
            <p>You'll receive a $5 credit code each billing cycle via email.</p>
        </div>
        {% else %}
        <div class="page-intro">
            Support the platform and get something back every month.
        </div>

        <div class="fan-plus-section">
            <h2 class="section-header">What you get</h2>
            {# Keep this list and the Fan+ card on the landing page identical,
               and keep both to what the code grants. Audited 2026-08-05. #}
            <ul>
                <li><strong>$5 monthly credit</strong>: a promo code delivered by email each billing cycle, usable toward any purchase on the platform</li>
                <li><strong>+ badge</strong>: displayed next to your name on your forum posts</li>
                <li><strong>Forum signatures</strong>: a signature block rendered under everything you post</li>
                <li><strong>Image embeds</strong>: post images in forum threads</li>
            </ul>
        </div>

        <div class="price-callout">$8/month</div>

        <div class="fan-plus-section">
            <p>
                Makenotwork is built on 0% platform fees. Fan+ is how you directly
                support the platform's development and operations, while getting real
                value back each month.
            </p>
        </div>

            {% if session_user.is_some() %}
        <div class="subscribe-form">
            <form method="post" action="/stripe/fan-plus">
                {% if let Some(token) = csrf_token %}
                <input type="hidden" name="_csrf" value="{{ token }}">
                {% endif %}
                <button type="submit" class="subscribe-btn" data-loading-text="Redirecting to Stripe...">Join Fan+</button>
            </form>
        </div>
            {% else %}
        {# Fan+ needs an account, so an anonymous visitor gets both paths: the
           one for people who already have one and the one for people who do
           not. Without the second this page is a dead end for exactly the
           visitor it is written for. #}
        <p class="login-link">
            <a href="/join">Create an account</a> to join, or
            <a href="/login">log in</a> if you already have one.
        </p>
            {% endif %}
        {% endif %}
    </div>
{% endblock %}