61 lines
3.1 KiB
HTML
61 lines
3.1 KiB
HTML
<div class="mb-3">
|
|
<h6 class="mb-2">Photos</h6>
|
|
|
|
{% with photos=plant.photos.all %}
|
|
{% if photos %}
|
|
<div class="d-flex flex-wrap gap-2 mb-2">
|
|
{% for photo in photos %}
|
|
<div class="position-relative">
|
|
<img src="{{ photo.image.url }}" width="80" height="80"
|
|
class="rounded {% if photo.is_thumbnail %}border border-success border-2{% endif %}"
|
|
style="object-fit:cover;" alt="">
|
|
<div class="d-flex gap-1 mt-1">
|
|
{% if not photo.is_thumbnail %}
|
|
<form method="post" action="{% url 'set_thumbnail' photo.pk %}"
|
|
hx-post="{% url 'set_thumbnail' photo.pk %}"
|
|
hx-target="#photo-gallery" hx-swap="innerHTML">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-outline-success btn-sm py-0 px-1" style="font-size:.7rem;" title="Set as thumbnail">★</button>
|
|
</form>
|
|
{% else %}
|
|
<span class="btn btn-success btn-sm py-0 px-1 disabled" style="font-size:.7rem;" title="Thumbnail">★</span>
|
|
{% endif %}
|
|
<form method="post" action="{% url 'delete_photo' photo.pk %}"
|
|
hx-post="{% url 'delete_photo' photo.pk %}"
|
|
hx-target="#photo-gallery" hx-swap="innerHTML">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-outline-danger btn-sm py-0 px-1" style="font-size:.7rem;" title="Delete">✕</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form method="post" action="{% url 'upload_photo' plant.pk %}" enctype="multipart/form-data"
|
|
hx-post="{% url 'upload_photo' plant.pk %}" hx-target="#photo-gallery" hx-swap="innerHTML"
|
|
hx-encoding="multipart/form-data" hx-indicator="#photo-upload-spinner">
|
|
{% csrf_token %}
|
|
<div class="d-flex gap-2 align-items-center flex-wrap">
|
|
<label class="btn btn-sm btn-outline-secondary mb-0" for="photo-upload-input">📷 Choose photo</label>
|
|
<input type="file" id="photo-upload-input" name="image" accept="image/*" class="d-none"
|
|
onchange="document.getElementById('photo-filename').textContent = this.files[0]?.name || ''">
|
|
<span id="photo-filename" class="text-muted small"></span>
|
|
<button type="submit" class="btn btn-sm btn-outline-secondary">Upload</button>
|
|
<span id="photo-upload-spinner" class="htmx-indicator text-muted small">Uploading…</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{% if request.htmx %}
|
|
<div id="plant-hero-container" hx-swap-oob="true">
|
|
{% if plant.species and plant.species.api_image_url %}
|
|
<img src="{{ plant.species.api_image_url }}" class="plant-hero rounded mb-3" alt="{{ plant.species.common_name }}">
|
|
{% elif plant.thumbnail_url %}
|
|
<img src="{{ plant.thumbnail_url }}" class="plant-hero rounded mb-3" alt="{{ plant.name }}">
|
|
{% else %}
|
|
<div class="plant-hero-placeholder rounded mb-3">🌿</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|