{# 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>
<section hx-ext="sse"
         sse-connect="/process/{{ doc_id }}?t={{ request.query_params.get('t', '') }}"
         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={{ request.query_params.get('t', '') }}"
       hx-target="#workspace" hx-swap="innerHTML"></div>
</section>