{% extends "admin/change_form.html" %}
{% load static %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'api/admin/image-task-gallery.css' %}">
{% endblock %}

{% block after_field_sets %}
{{ block.super }}
{% if original %}
  {% with input_images=original.input_images.all %}
    {% if input_images or original.input_image or original.status == "succeeded" and original.result_url %}
      <section class="image-task-gallery" aria-labelledby="image-task-gallery-title">
        <h2 id="image-task-gallery-title">图片预览</h2>
        <div class="image-task-gallery__grid">
          {% for input_image in input_images %}
            <figure class="image-task-gallery__item">
              <button
                type="button"
                class="image-task-gallery__trigger"
                data-image-preview
                data-image-url="{{ input_image.image.url }}"
                data-image-label="{% if forloop.first %}主图{% else %}参考图 {{ forloop.counter0 }}{% endif %}"
                title="双击查看大图"
              >
                <img src="{{ input_image.image.url }}" alt="{% if forloop.first %}主图{% else %}参考图 {{ forloop.counter0 }}{% endif %}" loading="lazy">
                <span class="image-task-gallery__unavailable" hidden>图片无法加载</span>
              </button>
              <figcaption>{% if forloop.first %}主图{% else %}参考图 {{ forloop.counter0 }}{% endif %}</figcaption>
            </figure>
          {% empty %}
            {% if original.input_image %}
              <figure class="image-task-gallery__item">
                <button
                  type="button"
                  class="image-task-gallery__trigger"
                  data-image-preview
                  data-image-url="{{ original.input_image.url }}"
                  data-image-label="主图"
                  title="双击查看大图"
                >
                  <img src="{{ original.input_image.url }}" alt="主图" loading="lazy">
                  <span class="image-task-gallery__unavailable" hidden>图片无法加载</span>
                </button>
                <figcaption>主图</figcaption>
              </figure>
            {% endif %}
          {% endfor %}
          {% if original.status == "succeeded" and original.result_url %}
            <figure class="image-task-gallery__item">
              <button
                type="button"
                class="image-task-gallery__trigger"
                data-image-preview
                data-image-url="{{ original.result_url }}"
                data-image-label="生成结果"
                title="双击查看大图"
              >
                <img src="{{ original.result_url }}" alt="生成结果" loading="lazy">
                <span class="image-task-gallery__unavailable" hidden>图片无法加载</span>
              </button>
              <figcaption>生成结果</figcaption>
            </figure>
          {% endif %}
        </div>
      </section>
    {% endif %}
  {% endwith %}

  <dialog class="image-task-preview-dialog" data-image-preview-dialog aria-labelledby="image-task-preview-title">
    <div class="image-task-preview-dialog__header">
      <h2 id="image-task-preview-title" data-image-preview-label>图片预览</h2>
      <button type="button" class="image-task-preview-dialog__close" data-image-preview-close aria-label="关闭图片预览">关闭</button>
    </div>
    <img class="image-task-preview-dialog__image" data-image-preview-image alt="">
    <p class="image-task-preview-dialog__error" data-image-preview-error hidden>图片无法加载。</p>
  </dialog>
{% endif %}
{% endblock %}

{% block admin_change_form_document_ready %}
{{ block.super }}
<script src="{% static 'api/admin/image-task-gallery.js' %}" defer></script>
{% endblock %}