{% 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 %}
                       onchange="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 %}
                       onchange="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 %}
                       onchange="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>
function updatePricingFields() {
    var model = document.querySelector('input[name="pricing_model"]:checked');
    if (!model) return;
    var val = model.value;
    document.getElementById('pricing-fields-fixed').style.display = val === 'fixed' ? '' : 'none';
    document.getElementById('pricing-fields-pwyw').style.display = val === 'pwyw' ? '' : 'none';
}
</script>