{% set done = status in ('complete', 'failed') if status is defined else (job and job.status.value in ('complete', 'failed')) %}
{% set current_status = status if status is defined else (job.status.value if job else 'unknown') %}
{% set log_lines = log if log is defined else (job.log if job else []) %}
{% set _job_id = job_id if job_id is defined else (job.id if job else '') %}
{% set _poll_url = '/api/builder/jobs/' ~ _job_id ~ '/status' %}

<div
  id="job-status"
  {% if not done %}
  hx-get="{{ _poll_url }}"
  hx-trigger="every 2s"
  hx-target="#job-status"
  hx-swap="outerHTML"
  {% endif %}
  class="space-y-5"
>

  <!-- Status header -->
  <div class="bg-slate-900 border border-slate-800 rounded-xl p-5 space-y-4">

    <!-- Status badge row -->
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        {% if current_status == 'complete' %}
          <svg class="w-5 h-5 text-emerald-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          <span class="font-semibold text-emerald-400 text-sm">Build Complete</span>
        {% elif current_status == 'failed' %}
          <svg class="w-5 h-5 text-rose-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          <span class="font-semibold text-rose-400 text-sm">Build Failed</span>
        {% else %}
          <svg class="w-5 h-5 text-cyan-400 animate-spin flex-shrink-0" 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>
          <span class="font-semibold text-cyan-300 text-sm capitalize">{{ current_status | replace('_', ' ') }}…</span>
          <span class="inline-block w-2 h-2 bg-cyan-500 rounded-full animate-pulse"></span>
        {% endif %}
      </div>

      <!-- Action buttons -->
      <div class="flex items-center gap-2">
        {% if current_status == 'complete' and job and job.result %}
          <a href="/builder" class="flex items-center gap-1.5 px-3 py-1.5 bg-emerald-700/30 hover:bg-emerald-700/50 border border-emerald-700/60 text-emerald-300 text-xs font-semibold rounded-lg transition-all">
            Build Another
          </a>
        {% elif current_status == 'failed' %}
          <a href="/builder" class="flex items-center gap-1.5 px-3 py-1.5 bg-slate-700 hover:bg-slate-600 border border-slate-600 text-slate-200 text-xs font-semibold rounded-lg transition-all">
            Try Again
          </a>
        {% endif %}
      </div>
    </div>

    <!-- Build target metadata grid -->
    {% if job %}
    <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
      {% if job.base_image %}
      <div class="bg-slate-950/60 border border-slate-800/60 rounded-lg px-3 py-2">
        <div class="text-[10px] font-bold uppercase text-slate-500 tracking-wider mb-1">Base Image</div>
        <div class="text-xs font-mono text-cyan-300 truncate" title="{{ job.base_image }}">{{ job.base_image }}</div>
      </div>
      {% endif %}
      {% if job.region %}
      <div class="bg-slate-950/60 border border-slate-800/60 rounded-lg px-3 py-2">
        <div class="text-[10px] font-bold uppercase text-slate-500 tracking-wider mb-1">Region</div>
        <div class="text-xs font-mono text-slate-300">{{ job.region }}</div>
      </div>
      {% endif %}
      {% if job.instance_type %}
      <div class="bg-slate-950/60 border border-slate-800/60 rounded-lg px-3 py-2">
        <div class="text-[10px] font-bold uppercase text-slate-500 tracking-wider mb-1">Instance Type</div>
        <div class="text-xs font-mono text-slate-300">{{ job.instance_type }}</div>
      </div>
      {% endif %}
      {% if job.subnet_id %}
      <div class="bg-slate-950/60 border border-slate-800/60 rounded-lg px-3 py-2">
        <div class="text-[10px] font-bold uppercase text-slate-500 tracking-wider mb-1">
          {% if job.subnet_id.startswith('vpc-') %}VPC{% else %}Subnet{% endif %}
        </div>
        <div class="text-xs font-mono text-slate-300 truncate" title="{{ job.subnet_id }}">{{ job.subnet_id }}</div>
      </div>
      {% endif %}
    </div>
    {% endif %}

    <!-- Golden image artifact (on success) -->
    {% if current_status == 'complete' and job and job.result %}
    <div class="flex items-center gap-3 p-3 rounded-lg bg-emerald-950/20 border border-emerald-800/40">
      <svg class="w-4 h-4 text-emerald-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7C5 4 4 5 4 7z M9 12l2 2 4-4"/></svg>
      <div class="flex-1 min-w-0">
        <div class="text-xs text-slate-400">Golden Image Ready</div>
        <div class="text-sm font-mono font-bold text-emerald-300 truncate">{{ job.result.artifact_id }}</div>
        {% if job.result.region %}
        <div class="text-[10px] text-slate-500 mt-0.5">{{ job.result.region }}</div>
        {% endif %}
      </div>
      {% if job.region and job.result.artifact_id %}
      <a href="https://console.aws.amazon.com/ec2/v2/home?region={{ job.region }}#Images:imageId={{ job.result.artifact_id }}"
         target="_blank" rel="noopener"
         class="flex items-center gap-1 text-[10px] text-cyan-400 hover:text-cyan-300 border border-cyan-800/40 rounded px-2 py-1 transition-colors flex-shrink-0">
        AWS Console
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
      </a>
      {% endif %}
    </div>
    {% endif %}

    <!-- Pipeline steps -->
    <div class="grid grid-cols-5 gap-2 text-xs text-center">
      {% set steps = [('provisioning', 'Provision'), ('hardening', 'Harden'), ('scanning', 'Scan'), ('snapshotting', 'Snapshot'), ('complete', 'Done')] %}
      {% set step_order = ['provisioning', 'hardening', 'scanning', 'snapshotting', 'complete'] %}
      {% for step_val, step_label in steps %}
      {% set step_idx = step_order.index(step_val) %}
      {% set current_idx = step_order.index(current_status) if current_status in step_order else (-1 if current_status != 'failed' else 4) %}
      <div class="flex flex-col items-center gap-1">
        <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
          {% if current_status == 'failed' %}bg-rose-900/40 text-rose-500 border border-rose-800/40
          {% elif current_idx > step_idx or current_status == 'complete' %}bg-emerald-900/40 text-emerald-400 border border-emerald-700/40
          {% elif current_idx == step_idx %}bg-cyan-900/40 text-cyan-300 border border-cyan-700/60
          {% else %}bg-slate-800 text-slate-600 border border-slate-700{% endif %}">
          {% if current_idx > step_idx or current_status == 'complete' %}
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
          {% else %}
            {{ loop.index }}
          {% endif %}
        </div>
        <span class="{% if current_idx >= step_idx and current_status != 'failed' %}text-slate-300{% else %}text-slate-600{% endif %} text-[10px]">{{ step_label }}</span>
      </div>
      {% endfor %}
    </div>

  </div>

  <!-- Live log -->
  {% if log_lines %}
  <div class="bg-slate-950 border border-slate-800 rounded-xl p-4 space-y-0.5 max-h-72 overflow-y-auto font-mono text-xs">
    <div class="text-[10px] font-bold uppercase text-slate-600 tracking-wider mb-2">Build Log</div>
    {% for line in log_lines %}
    {% if line.strip() %}
    <div class="{% if 'error' in line.lower() or 'failed' in line.lower() %}text-rose-400{% elif 'warn' in line.lower() %}text-amber-400{% elif line.startswith('[aws]') or line.startswith('[gcp]') or line.startswith('[azure]') %}text-cyan-300{% elif 'complete' in line.lower() or 'ready' in line.lower() or 'success' in line.lower() %}text-emerald-400{% else %}text-slate-400{% endif %} leading-5">{{ line }}</div>
    {% endif %}
    {% endfor %}
  </div>
  {% endif %}

</div>