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

<div class="wizard-step">
    <h2 class="subtitle-h2">Sections</h2>
    <p class="step-description">Add tabbed content sections (e.g. Features, Installation, Specs). Sections are optional.</p>

    <div id="sections-list">
        {% for section in sections %}
        <div class="section-row" data-id="{{ section.id }}">
            <span class="section-row-title">{{ section.title }}</span>
            <span class="section-row-length">{{ section.body.chars().count() }} chars</span>
            <button type="button" class="btn-secondary section-delete-btn" data-id="{{ section.id }}">Delete</button>
        </div>
        {% endfor %}
    </div>

    <details class="section-add-details">
        <summary>Add Section</summary>
        <div class="section-add-body">
            <div class="form-group">
                <label for="new-section-title">Title</label>
                <input type="text" id="new-section-title" placeholder="e.g. Features, Installation..." autocomplete="off">
            </div>
            {{ crate::quasi::rich_field::html("new-section", "Body (Markdown)", "Section content...", "", crate::quasi::rich_field::Height::Compact)|safe }}
            <button type="button" class="btn-secondary" id="add-section-btn">Add Section</button>
            <span id="section-add-status" class="field-status ml-2"></span>
        </div>
    </details>

    <form hx-post="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/sections"
          hx-target="#wizard-step" hx-swap="innerHTML"
          hx-push-url="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/pricing">
        <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>

<div id="wizard-item-sections-cfg" hidden data-item-id="{{ item_id }}"></div>
<script src="/static/wizard-item-sections.js?v=0623"></script>