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

<div class="wizard-step">
    <h2 class="subtitle-h2">Appearance</h2>
    <p class="step-description">Upload a project image. This appears on your project page and in search results.</p>

    {#- `data-upload-fills` is where the URL the confirm answers with lands, and
        `data-upload-shows` marks each place the picture itself goes, which here
        is two: the dropzone's own preview and the card preview below it. 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/new-project/{{ slug }}/step/appearance"
          hx-target="#wizard-step" hx-swap="innerHTML"
          hx-push-url="/dashboard/new-project/{{ slug }}/step/monetization"
          data-upload-fills="#cover-image-url">

        <div class="form-group">
            <label>Project Image</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="Project image" class="wizard-cover-img"{% if let Some(url) = cover_image_url %} src="{{ url }}"{% endif %}>
                    </div>
                </div>

                {{ crate::quasi::upload_field::image("/api/projects/image/presign", "project_id", project_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="form-group">
            <label>Preview</label>
            <div class="project-card-preview">
                <div class="preview-cover" id="preview-cover" data-upload-shows>
                    <div class="preview-cover-empty" data-upload-empty{% if cover_image_url.is_some() %} hidden{% endif %}>No image</div>
                    <img alt="Preview" class="wizard-cover-img" data-upload-filled{% if cover_image_url.is_none() %} hidden{% endif %}{% if let Some(url) = cover_image_url %} src="{{ url }}"{% endif %}>
                </div>
                <div class="preview-info">
                    <strong>{{ project_title }}</strong>
                </div>
            </div>
        </div>

        <div class="wizard-actions">
            <button type="button" class="btn-secondary"
                    hx-get="/dashboard/new-project/{{ slug }}/step/basics"
                    hx-target="#wizard-step" hx-swap="innerHTML"
                    hx-push-url="/dashboard/new-project/{{ slug }}/step/basics">Back</button>
            <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">Skip</button>
            <button type="submit" class="btn-primary">Continue</button>
        </div>
    </form>
</div>