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

<div class="wizard-step">
    <h2 class="subtitle-h2">Pricing</h2>
    <p class="step-description">How much should this item cost? 0% platform fee, only ~3% payment processing fee.</p>

    <form hx-post="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/pricing"
          hx-target="#wizard-step" hx-swap="innerHTML"
          hx-push-url="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/preview"
          novalidate>

        <div class="pricing-cards">
            <label class="pricing-card">
                <input type="radio" name="pricing_model" value="free"
                       {% if pricing_model == "free" %}checked{% endif %}
                       data-change="updatePricingFields">
                <span class="pricing-card-inner">
                    <span class="pricing-card-label">Free</span>
                    <span class="pricing-card-desc">No charge. Available to everyone.</span>
                </span>
            </label>

            <label class="pricing-card">
                <input type="radio" name="pricing_model" value="fixed"
                       {% if pricing_model == "fixed" %}checked{% endif %}
                       data-change="updatePricingFields">
                <span class="pricing-card-inner">
                    <span class="pricing-card-label">One-Time Purchase</span>
                    <span class="pricing-card-desc">Set a specific price for this item.</span>
                </span>
            </label>

            <label class="pricing-card">
                <input type="radio" name="pricing_model" value="pwyw"
                       {% if pricing_model == "pwyw" %}checked{% endif %}
                       data-change="updatePricingFields">
                <span class="pricing-card-inner">
                    <span class="pricing-card-label">Pay What You Want</span>
                    <span class="pricing-card-desc">Buyers choose their price above a minimum.</span>
                </span>
            </label>
        </div>

        <div id="pricing-fields-fixed" class="pricing-fields {% if pricing_model != "fixed" %}hidden{% endif %}">
            <div class="form-group">
                <label for="wiz-price">Price ($)</label>
                <input type="number" id="wiz-price" name="price" min="0.50" step="0.01"
                       value="{{ price_dollars }}" placeholder="5.00">
            </div>
        </div>

        <div id="pricing-fields-pwyw" class="pricing-fields {% if pricing_model != "pwyw" %}hidden{% endif %}">
            <div class="form-group">
                <label for="wiz-suggested">Suggested Price ($)</label>
                <input type="number" id="wiz-suggested" name="suggested_price" min="0" step="0.01"
                       value="{{ pwyw_suggested_dollars }}" placeholder="10.00">
            </div>
            <div class="form-group">
                <label for="wiz-min">Minimum Price ($)</label>
                <input type="number" id="wiz-min" name="min_price" min="0" step="0.01"
                       value="{{ pwyw_min_dollars }}" placeholder="0.00">
                <div class="hint">Set to 0 to allow free downloads.</div>
            </div>
        </div>

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

<script src="/static/wizard-item-pricing.js?v=0623"></script>