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

<div class="wizard-step">
    <h2 class="subtitle-h2">First Content</h2>
    <p class="step-description">Optionally create your first item or blog post. You can always do this later from the project dashboard.</p>

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

        {% if item_count > 0 %}
        <div class="info-box mb-5">
            You already have {{ item_count }} item{% if item_count != 1 %}s{% endif %} in this project.
        </div>
        {% endif %}

        <div class="content-choice-cards">
            <a href="/dashboard/project/{{ slug }}/new-item" class="content-choice-card">
                <h3>Create an Item</h3>
                <p>Upload audio, write text, or add a digital download using the item wizard.</p>
            </a>

            <div class="content-choice-card is-disabled">
                <h3>Write a Blog Post</h3>
                <p>Write a blog post from the project dashboard after setup.</p>
            </div>
        </div>

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