{% load static %}

<div class="series-images-list">
    {% for image in images %}
        <div class="d-flex align-items-center mb-2">
            {% if image.image %}
                <a href="{% url 'atlas:series_image_dicom' pk=image.pk %}" target="_blank" class="me-2">
                    <img src="{{ image.image.url }}" alt="image-{{ image.pk }}" style="width:96px;height:auto;object-fit:cover;border-radius:.25rem;" class="img-thumbnail">
                </a>
            {% else %}
                <div class="me-2 bg-secondary" style="width:96px;height:72px;border-radius:.25rem;"></div>
            {% endif %}

            <div class="flex-grow-1">
                <div><strong>{{ image.image.name|default:"(no file)" }}</strong></div>
                {% if image.image %}
                    <div class="small text-muted">{{ image.image.size|filesizeformat }}</div>
                {% endif %}
                {% if image.image_blake3_hash %}
                    <div class="small text-muted">hash: {{ image.image_blake3_hash }}</div>
                {% endif %}
            </div>

            <div class="ms-auto text-end">
                <a href="{% url 'atlas:series_image_dicom' pk=image.pk %}" class="btn btn-sm btn-outline-secondary">View DICOM</a>
            </div>
        </div>
    {% empty %}
        <p class="text-muted">No images found for this series.</p>
    {% endfor %}
</div>