{% include "wizards/partials/step_nav.html" %}

<div class="wizard-step">
    <h2 class="subtitle-h2">Monetization</h2>
    <p class="step-description">Choose how people access your project. 0% platform fee, only ~3% payment processing fee.</p>

    <form hx-post="/dashboard/new-project/{{ slug }}/step/monetization"
          hx-target="#wizard-step" hx-swap="innerHTML"
          hx-push-url="/dashboard/new-project/{{ slug }}/step/first-content">

        {% if !stripe_connected %}
        <div class="info-box mb-5">
            <strong>Stripe not connected.</strong> To accept payments, connect your Stripe account in
            <a href="/dashboard">Dashboard &rarr; Payments</a>. You can still configure pricing now and connect later.
        </div>
        {% endif %}

        <div class="form-group">
            <label>Project pricing</label>
            <select name="pricing_model" id="pricing-model" data-change="updatePricingUI">
                <option value="free"{% if pricing_model == "free" %} selected{% endif %}>Free: anyone can access</option>
                <option value="buy_once"{% if pricing_model == "buy_once" %} selected{% endif %}>One-time purchase</option>
                <option value="pwyw"{% if pricing_model == "pwyw" %} selected{% endif %}>Pay what you want</option>
                <option value="subscription"{% if pricing_model == "subscription" %} selected{% endif %}>Membership: recurring monthly</option>
            </select>
        </div>

        <div id="buy-once-fields" class="hidden">
            <div class="form-group">
                <label for="price_dollars">Price ($)</label>
                <input type="number" name="price_dollars" id="price_dollars" min="0.50" max="10000" step="0.01"
                       placeholder="9.99" value="{{ price_dollars }}" disabled>
            </div>
        </div>

        <div id="pwyw-fields" class="hidden">
            <div class="form-group">
                <label for="pwyw_min_dollars">Minimum price ($, 0 for no minimum)</label>
                <input type="number" name="pwyw_min_dollars" id="pwyw_min_dollars" min="0" max="10000" step="0.01"
                       placeholder="0.00" value="{{ pwyw_min_dollars }}" disabled>
            </div>
        </div>

        <div id="subscription-fields" class="hidden">
            <div class="info-box mb-4">
                Members get access to all paid items in this project.
                Individual item pricing (pay-once, pay-what-you-want, free) is configured when you create each item.
            </div>

            <div id="tier-list">
            {% for tier in tiers %}
                <div class="tier-row">
                    <span class="tier-name">{{ tier.name }}</span>
                    <span class="tier-price">{{ tier.price_display }}/mo</span>
                </div>
            {% endfor %}
            </div>
            <div id="tier-forms"></div>
            <button type="button" class="btn-secondary mt-2"
                    data-action="addTierForm">Add Tier</button>
        </div>

        <div class="wizard-actions">
            <button type="button" class="btn-secondary"
                    hx-get="/dashboard/new-project/{{ slug }}/step/appearance"
                    hx-target="#wizard-step" hx-swap="innerHTML"
                    hx-push-url="/dashboard/new-project/{{ slug }}/step/appearance">Back</button>
            <button type="button" class="btn-secondary"
                    hx-get="/dashboard/new-project/{{ slug }}/step/first-content"
                    hx-target="#wizard-step" hx-swap="innerHTML"
                    hx-push-url="/dashboard/new-project/{{ slug }}/step/first-content">Skip</button>
            <button type="submit" class="btn-primary">Continue</button>
        </div>
    </form>
</div>

<div id="wizard-project-monetization-cfg" hidden data-tier-count="{{ tiers.len() }}"></div>
<script src="/static/wizard-project-monetization.js?v=0623"></script>