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

<div class="wizard-step">
    <h2 class="subtitle-h2">Item Basics</h2>
    <p class="step-description">Title, description, and cover image for your item.</p>
    <p class="form-hint">An <strong>item</strong> is an individual piece of content: a song, episode, chapter, download, or release. Fans purchase or access items directly.</p>

    {#- `data-upload-fills` is where the URL the confirm answers with lands, and
        `data-upload-shows` marks each place the picture itself goes. Both are
        host facts about what happens after the bytes land, the same class as
        `data-upload-goes` on the audio surface, and `static/upload.js` reads
        them. The upload itself is described: see `crate::quasi::upload_field`. -#}
    <form hx-post="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/basics"
          hx-target="#wizard-step" hx-swap="innerHTML"
          hx-push-url="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/content"
          data-upload-fills="#cover-image-url">
        <div class="form-group">
            <label for="wiz-item-title">Title</label>
            <input type="text" id="wiz-item-title" name="title" required
                   value="{{ title }}"
                   placeholder="Episode 1, Chapter 1, Track 1..." autocomplete="off">
        </div>

        <div class="form-group">
            <label for="wiz-item-desc">Description</label>
            <textarea id="wiz-item-desc" name="description" rows="5"
                      placeholder="Describe this item...">{{ description }}</textarea>
        </div>

        <div class="form-group">
            <label>Cover Image <span class="wizard-optional-tag">(optional)</span></label>

            <div class="project-image-upload">
                <div class="project-image-preview" data-upload-shows>
                    <div class="project-image-placeholder" data-upload-empty{% if cover_image_url.is_some() %} hidden{% endif %}>No image yet</div>
                    <div class="project-image-current" data-upload-filled{% if cover_image_url.is_none() %} hidden{% endif %}>
                        <img alt="Item image" class="wizard-cover-img"{% if let Some(url) = cover_image_url %} src="{{ url }}"{% endif %}>
                    </div>
                </div>

                {{ crate::quasi::upload_field::image("/api/items/image/presign", "item_id", item_id.as_str())|safe }}
            </div>

            <input type="hidden" name="cover_image_url" id="cover-image-url"
                   value="{% if let Some(url) = cover_image_url %}{{ url }}{% endif %}">
        </div>

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