{% extends "base.html" %}
{% block title %}Job {{ job_id }} — {{ site_title }}{% endblock %}
{% block content %}
  <p class="back-link"><a href="/">&larr; Alle Jobs</a></p>

  <div class="job-heading">
    <h1>Job {{ job_id }}</h1>
    <p class="job-status status-{{ status.status }}">
      {{ status_label(status.status) }}
      {% if status.status in ACTIVE_STATUSES %}
        &middot; {{ stage_label(status.status, status.stage, status.progress) }}
      {% endif %}
    </p>
  </div>
  {% if status.status in ACTIVE_STATUSES and status.progress and status.progress.total %}
    <div class="progress" aria-hidden="true">
      <span style="width: {{ (status.progress.current / status.progress.total * 100) | int }}%"></span>
    </div>
  {% endif %}
  {% if status.error %}
    <p class="error-box">Fehler: {{ status.error }}</p>
  {% endif %}

  <section>
    <h2>Original &amp; Rembg</h2>
    <div class="pair-grid">
      {% if original_name %}
        {% set img = img_attrs(job_id, original_name, sizes=PAIR_SIZES) %}
        <figure>
          <img class="lightboxable"
               src="{{ img.src }}"
               srcset="{{ img.srcset }}"
               sizes="{{ img.sizes }}"
               data-full-src="{{ img.full_src }}"
               alt="Original"
               loading="lazy"
               decoding="async">
          <figcaption>
            Original &middot;
            <a href="/jobs/{{ job_id }}/files/{{ original_name }}" download>Download</a>
          </figcaption>
        </figure>
      {% else %}
        <p class="empty-state">Original kommt, sobald der Worker greift.</p>
      {% endif %}
      {% if has_rembg and rembg_name %}
        {% set img = img_attrs(job_id, rembg_name, sizes=PAIR_SIZES) %}
        <figure>
          <img class="lightboxable"
               src="{{ img.src }}"
               srcset="{{ img.srcset }}"
               sizes="{{ img.sizes }}"
               data-full-src="{{ img.full_src }}"
               alt="Freigestellt (rembg)"
               loading="lazy"
               decoding="async">
          <figcaption>
            Rembg &middot;
            <a href="/jobs/{{ job_id }}/files/{{ rembg_name }}" download>Download</a>
          </figcaption>
        </figure>
      {% endif %}
    </div>
  </section>

  <section>
    <div class="section-header">
      <h2>Varianten</h2>
      {% if has_rembg %}
        <a class="button" href="/jobs/{{ job_id }}/remix">+ Remix</a>
      {% endif %}
    </div>
    {% if not manifest.variants %}
      <p class="empty-state">Noch keine Varianten fertig.</p>
    {% else %}
      <ul class="variant-grid">
        {% for v in manifest.variants %}
          {% set img = img_attrs(job_id, v.file) %}
          <li class="variant-card">
            <img class="lightboxable"
                 src="{{ img.src }}"
                 srcset="{{ img.srcset }}"
                 sizes="{{ img.sizes }}"
                 data-full-src="{{ img.full_src }}"
                 alt="Variante {{ v.id }}"
                 loading="lazy"
                 decoding="async">
            <div class="variant-meta">
              <strong>{{ v.id }}</strong> <span class="tag">{{ v.source }}</span>
              <dl>
                <dt>BG</dt><dd>{{ v.background_filter }} + {{ v.background_blend }}</dd>
                <dt>FG</dt><dd>{{ v.foreground_filter }} + {{ v.foreground_blend }}</dd>
                <dt>Opacity</dt><dd>{{ v.blend_opacity }}</dd>
              </dl>
              <div class="variant-actions">
                {% if has_rembg %}
                  <a class="button" href="/jobs/{{ job_id }}/remix?from={{ v.id }}">Remix</a>
                {% endif %}
                <a href="/jobs/{{ job_id }}/files/{{ v.file }}" download>Download</a>
              </div>
            </div>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </section>

  {% if intermediates %}
    <section>
      <h2>Zwischenschritte</h2>
      <ul class="intermediate-grid">
        {% for name in intermediates %}
          {% set img = img_attrs(job_id, name) %}
          <li>
            <img class="lightboxable"
                 src="{{ img.src }}"
                 srcset="{{ img.srcset }}"
                 sizes="{{ img.sizes }}"
                 data-full-src="{{ img.full_src }}"
                 alt="{{ name }}"
                 loading="lazy"
                 decoding="async">
            <span>{{ name }}</span>
          </li>
        {% endfor %}
      </ul>
    </section>
  {% endif %}
{% endblock %}