Generated image partial

{% csrf_token %}
{% if missing_credits %}
    {% include 'mainapp/partials/missing_credits_message.html' %}
{% else %}

<div
    class="w-full"
    hx-trigger="load"
    hx-post="{% url 'generated_images_gallery' person_project.id %}"
    hx-target="#generatedImagesGallery"
    hx-swap="innerHTML"
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
>
    <div class="flex flex-col gap-4">
        <div class="relative bg-white p-4 shadow-lg rounded-lg flex justify-center">
            <div class="relative border-8 border-white shadow-inner flex justify-center inline-block">
                <img src="{{ created_image.image.url }}" alt="Generated Image" class="max-w-full h-auto object-contain">
                {% if created_image.is_upscaled %}
                    <span class="absolute top-2 right-2 bg-primary text-white px-2 py-1 rounded-md text-sm">
                        HD
                    </span>
                {% endif %}
            </div>
        </div>
        <div class="flex justify-between items-center">
            <a href="{% url 'download_image' created_image.id %}" download="{{ created_image.image.name|default:'image.png' }}" class="btn btn-primary text-white">
                Download Image
            </a>
        </div>
    </div>
    <div
        class="hidden"
        hx-trigger="load"
        hx-post="{% url 'user_credits_counter' %}"
        hx-target="#user-credits"
        hx-swap="innerHTML"
        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    >
    </div>
</div>
{% endif %}