{% extends "base.html" %}

{% block title %}Build {{ job_id[:8] }} — {{ app_name }}{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto space-y-6">
  <div>
    <h1 class="text-2xl font-bold text-white">Build Job</h1>
    <p class="text-gray-400 mt-1 font-mono text-sm">{{ job_id }}</p>
  </div>

  <!-- Live status — HTMX loads + polls the HTML status partial -->
  <div
    id="job-status"
    hx-get="/api/builder/jobs/{{ job_id }}/status"
    hx-trigger="load"
    hx-target="#job-status"
    hx-swap="outerHTML"
    class="bg-gray-900 border border-gray-800 rounded-xl p-6 flex items-center gap-3 text-slate-400 text-sm"
  >
    <svg class="w-4 h-4 animate-spin text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
    </svg>
    Loading build status...
  </div>
</div>
{% endblock %}