{# templates/_processing.html #}
{% with compact=True %}{% include "_drop_zone.html" %}{% endwith %}
<div class="status-row">
  <span class="filename">{{ filename }}</span>
  <span>{{ size_human }}</span>
  <span class="right" id="processing-status-indicator" style="color:#3b82f6">● {{ _('processing.in_progress') }}</span>
</div>
{% if start_on_load %}
<div hx-post="/process/{{ doc_id }}/start?t={{ session_token }}"
     hx-trigger="load"
     hx-target="#processing-error"
     hx-swap="none"
     hx-on:htmx:response-error="
       var target = document.getElementById('processing-error');
       if (target) {
         target.innerHTML = '<div class=&quot;error-block&quot;><div class=&quot;title&quot;>{{ _('processing.error.title') }}</div><div>{{ _('processing.error.hint') }}</div></div>';
       }
       var ind = document.getElementById('processing-status-indicator');
       if (ind) { ind.style.color = '#dc2626'; ind.textContent = '✕ {{ _('preview.failed') }}'; }
     "></div>
{% endif %}
<section hx-ext="sse"
         sse-connect="/process/{{ doc_id }}?t={{ session_token }}"
         sse-close="done,failed">
  <div id="stages-host" sse-swap="stage">
    {% include "_stages.html" %}
  </div>
  <div id="processing-error" sse-swap="failed"
       hx-on:htmx:after-swap="
         document.querySelectorAll('#stages-host .stage').forEach(function(el){
           el.classList.remove('active');
           el.classList.add('todo');
         });
         var ind = document.getElementById('processing-status-indicator');
         if (ind) { ind.style.color = '#dc2626'; ind.textContent = '✕ {{ _('preview.failed') }}'; }
         var stages = document.getElementById('stages-host');
         if (stages) stages.style.display = 'none';
         var prog = document.querySelector('#processing-stages-wrap .progress');
         if (prog) prog.style.display = 'none';
       "></div>
  <div hx-trigger="sse:done" hx-get="/preview/{{ doc_id }}?t={{ session_token }}"
       hx-target="#workspace" hx-swap="innerHTML"></div>
</section>