{% extends "base.html" %}

{% block title %}{{ project.title }} - {{ creator_username }}{% endblock %}
{% block body_attrs %} class="{{ crate::shell::measure(crate::shell::Measure::Wide) }} project-paywall-page"{% endblock %}

{% block head %}
<meta property="og:title" content="{{ project.title }} by {{ creator_username }}">
<meta property="og:description" content="{{ project.description }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ host_url }}/p/{{ project.slug }}">
<link rel="canonical" href="{{ host_url }}/p/{{ project.slug }}">
{% if let Some(img) = project.cover_image_url %}
<meta property="og:image" content="{{ img }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ img }}">
{% else %}
<meta name="twitter:card" content="summary">
{% endif %}
{% endblock %}

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

    <div class="container">
        <section class="paywall-section">
            <div class="paywall-box">
                {% if let Some(cover) = project.cover_image_url %}
                <div class="paywall-cover">
                    <img src="{{ cover }}" alt="{{ project.title }}">
                </div>
                {% endif %}

                <h1 class="paywall-title">{{ project.title }}<span class="dot">.</span></h1>
                <p class="paywall-creator">by <a href="/u/{{ creator_username }}">{{ creator_username }}</a></p>

                {% if !project.description.is_empty() %}
                <p class="paywall-description">{{ project.description }}</p>
                {% endif %}

                {% if project.item_count > 0 %}
                <p class="paywall-item-count">{{ project.item_count }} item{% if project.item_count != 1 %}s{% endif %} included</p>
                {% endif %}

                <div class="paywall-price">{{ price_display }}</div>

                {% match checkout_type %}
                {% when crate::pricing::CheckoutType::OneTime %}
                    {% if session_user.is_some() %}
                    <form method="POST" action="/stripe/checkout/project/{{ project.id }}">
                        <button type="submit" class="btn-primary" data-loading-text="Redirecting to Stripe...">Purchase Access</button>
                    </form>
                    {% else %}
                    <a href="/login" class="btn-primary">Log in to Purchase</a>
                    {% endif %}

                {% when crate::pricing::CheckoutType::PayWhatYouWant %}
                    {% if session_user.is_some() %}
                    <form method="POST" action="/stripe/checkout/project/{{ project.id }}">
                        <div class="form-group form-group--centered-narrow">
                            <label for="amount">Your price ($)</label>
                            <input type="number" name="amount_cents" id="amount" min="0" step="1" placeholder="0">
                        </div>
                        <button type="submit" class="btn-primary" data-loading-text="Redirecting to Stripe...">Purchase Access</button>
                    </form>
                    {% else %}
                    <a href="/login" class="btn-primary">Log in to Purchase</a>
                    {% endif %}

                {% when crate::pricing::CheckoutType::Subscription %}
                    {% if !subscription_tiers.is_empty() %}
                    <div class="paywall-tiers">
                        {% for tier in subscription_tiers %}
                        <div class="card--bordered tier-card">
                            <h3>{{ tier.name }}</h3>
                            <div class="tier-price">{{ tier.price }}/mo</div>
                            {% if !tier.description.is_empty() %}
                            <p class="paywall-desc">{{ tier.description }}</p>
                            {% endif %}
                            {% if session_user.is_some() %}
                            <form method="POST" action="/stripe/subscribe/{{ tier.id }}">
                                <button type="submit" class="btn-primary" data-loading-text="Redirecting to Stripe...">Subscribe</button>
                            </form>
                            {% else %}
                            <a href="/login" class="btn-primary button">Log in to Subscribe</a>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}

                {% when crate::pricing::CheckoutType::None %}
                {% endmatch %}
            </div>
        </section>
    </div>
{% endblock %}