| 1 |
{% include "wizards/partials/step_nav.html" %} |
| 2 |
|
| 3 |
<div class="wizard-step"> |
| 4 |
<h2 class="subtitle-h2">Item Basics</h2> |
| 5 |
<p class="step-description">Title, description, and cover image for your item.</p> |
| 6 |
<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> |
| 7 |
|
| 8 |
<form hx-post="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/basics" |
| 9 |
hx-target="#wizard-step" hx-swap="innerHTML" |
| 10 |
hx-push-url="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/content"> |
| 11 |
<div class="form-group"> |
| 12 |
<label for="wiz-item-title">Title</label> |
| 13 |
<input type="text" id="wiz-item-title" name="title" required |
| 14 |
value="{{ title }}" |
| 15 |
placeholder="Episode 1, Chapter 1, Track 1..." autocomplete="off"> |
| 16 |
</div> |
| 17 |
|
| 18 |
<div class="form-group"> |
| 19 |
<label for="wiz-item-desc">Description</label> |
| 20 |
<textarea id="wiz-item-desc" name="description" rows="5" |
| 21 |
placeholder="Describe this item...">{{ description }}</textarea> |
| 22 |
</div> |
| 23 |
|
| 24 |
<div class="form-group"> |
| 25 |
<label>Cover Image <span class="wizard-optional-tag">(optional)</span></label> |
| 26 |
|
| 27 |
<div class="project-image-upload" id="image-upload-area"> |
| 28 |
<div class="project-image-dropzone" id="image-dropzone"> |
| 29 |
{% if let Some(url) = cover_image_url %} |
| 30 |
<div class="project-image-current" id="image-current"> |
| 31 |
<img src="{{ url }}" alt="Item image" class="wizard-cover-img"> |
| 32 |
</div> |
| 33 |
{% else %} |
| 34 |
<div class="project-image-placeholder" id="image-placeholder"> |
| 35 |
<p>Square, at least 400x400px</p> |
| 36 |
<p class="hint">JPG, PNG, or WebP. Max 10 MB.</p> |
| 37 |
</div> |
| 38 |
{% endif %} |
| 39 |
<input type="file" id="image-file-input" accept="image/jpeg,image/png,image/webp" class="sr-only"> |
| 40 |
</div> |
| 41 |
|
| 42 |
<button type="button" class="btn-secondary" id="choose-image-btn" |
| 43 |
data-action="click" data-target="image-file-input">Choose File</button> |
| 44 |
|
| 45 |
<div class="upload-status" id="image-upload-status"> |
| 46 |
<div class="upload-progress-inline hidden" id="image-upload-progress"> |
| 47 |
<span id="image-upload-filename"></span> |
| 48 |
<span id="image-upload-percent">0%</span> |
| 49 |
<div class="progress-bar-container"> |
| 50 |
<div class="progress-bar" id="image-progress-bar"></div> |
| 51 |
</div> |
| 52 |
</div> |
| 53 |
<div class="upload-error-inline hidden" id="image-upload-error"> |
| 54 |
<span class="error-message" id="image-error-message"></span> |
| 55 |
</div> |
| 56 |
</div> |
| 57 |
</div> |
| 58 |
|
| 59 |
<input type="hidden" name="cover_image_url" id="cover-image-url" |
| 60 |
value="{% if let Some(url) = cover_image_url %}{{ url }}{% endif %}"> |
| 61 |
</div> |
| 62 |
|
| 63 |
<div class="wizard-actions"> |
| 64 |
<button type="button" class="btn-secondary" |
| 65 |
hx-get="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/type" |
| 66 |
hx-target="#wizard-step" hx-swap="innerHTML" |
| 67 |
hx-push-url="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/type">Back</button> |
| 68 |
<button type="submit" class="btn-primary">Continue</button> |
| 69 |
</div> |
| 70 |
</form> |
| 71 |
</div> |
| 72 |
|
| 73 |
<mnw-image-uploader hidden |
| 74 |
data-presign-url="/api/items/image/presign" |
| 75 |
data-confirm-url="/api/items/image/confirm" |
| 76 |
data-id-field="item_id" |
| 77 |
data-id-value="{{ item_id }}" |
| 78 |
data-alt="Item image"></mnw-image-uploader> |
| 79 |
|