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

  <h1>Job {{ job_id }}</h1>
  <p class="job-status status-{{ status.status }}">Status: {{ status.status or "unbekannt" }}</p>
  {% 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 %}
        <figure>
          <img class="lightboxable" src="/jobs/{{ job_id }}/files/{{ original_name }}" alt="Original" loading="lazy">
          <figcaption>
            Original &middot;
            <a href="/jobs/{{ job_id }}/files/{{ original_name }}" download>Download</a>
          </figcaption>
        </figure>
      {% endif %}
      {% if has_rembg %}
        <figure>
          <img class="lightboxable" src="/jobs/{{ job_id }}/files/rembg.png" alt="Freigestellt (rembg)" loading="lazy">
          <figcaption>
            Rembg &middot;
            <a href="/jobs/{{ job_id }}/files/rembg.png" 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 %}
          <li class="variant-card">
            <img class="lightboxable" src="/jobs/{{ job_id }}/files/{{ v.file }}" alt="Variante {{ v.id }}" loading="lazy">
            <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 %}
          <li>
            <img class="lightboxable" src="/jobs/{{ job_id }}/files/intermediates/{{ name }}" alt="{{ name }}" loading="lazy">
            <span>{{ name }}</span>
          </li>
        {% endfor %}
      </ul>
    </section>
  {% endif %}
{% endblock %}