{% extends "base.html" %}
{% block title %}Migration {{ data.migration.get('id', '') }} — GovLift{% endblock %}
{% block extra_css %}
<style>
.gl-page-header{background:linear-gradient(135deg,#0f172a,#1a3a2a);padding:22px 28px;border-radius:10px;margin-bottom:24px;}
.gl-page-header h1{margin:0;font-size:1.4rem;font-weight:700;color:#d1fae5;}
.gl-page-header p{margin:4px 0 0;color:#6ee7b7;font-size:.85rem;}
.classification-banner{background:#1e3a1a;border:1px solid #166534;color:#86efac;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-align:center;padding:6px 12px;border-radius:6px;margin-bottom:18px;}
.back-link{color:#6ee7b7;text-decoration:none;font-size:.85rem;}
.back-link:hover{color:#34d399;}
.detail-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:20px 24px;margin-bottom:16px;}
.detail-card h5{font-size:.9rem;color:#94a3b8;margin-bottom:14px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.detail-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #1e293b;font-size:.85rem;}
.detail-row:last-child{border-bottom:none;}
.detail-row .label{color:#94a3b8;}
.detail-row .value{color:#e2e8f0;font-weight:600;}
.badge{font-size:.75rem;}
.log-box{background:#0f172a;border:1px solid #334155;border-radius:8px;padding:14px 18px;font-family:monospace;font-size:.78rem;color:#94a3b8;white-space:pre-wrap;max-height:300px;overflow-y:auto;}
.empty-state{text-align:center;padding:32px;color:#64748b;}
</style>
{% endblock %}
{% block content %}
<div class="classification-banner">{{ classification }}</div>
<a class="back-link" href="/govlift/executor">&#8592; Migration Jobs</a>

<div class="gl-page-header mt-2">
  <h1>Migration Job</h1>
  <p>Job ID: <span style="font-family:monospace;font-size:.85rem;">{{ data.migration.get('id', '') }}</span></p>
</div>

<div class="row g-3">
  <div class="col-12 col-md-6">
    <div class="detail-card">
      <h5>Migration Details</h5>
      <div class="detail-row"><span class="label">Status</span>
        <span class="value">
          {% set js = data.migration.get('status', 'pending') %}
          {% if js == 'completed' %}<span class="badge bg-success">{{ js }}</span>
          {% elif js == 'running' %}<span class="badge bg-warning text-dark">{{ js }}</span>
          {% elif js == 'failed' %}<span class="badge bg-danger">{{ js }}</span>
          {% elif js == 'rolled_back' %}<span class="badge bg-secondary">{{ js }}</span>
          {% else %}<span class="badge bg-secondary">{{ js }}</span>
          {% endif %}
        </span>
      </div>
      <div class="detail-row"><span class="label">Workload</span>
        <span class="value">
          {% if data.workload %}
          <a href="/govlift/workloads/{{ data.workload.id }}" style="color:#6ee7b7;">{{ data.workload.get('name', data.migration.get('workload_id', '—')) }}</a>
          {% else %}{{ data.migration.get('workload_id', '—') }}{% endif %}
        </span>
      </div>
      <div class="detail-row"><span class="label">Wave</span>
        <span class="value">
          {% if data.wave %}
          <a href="/govlift/waves/{{ data.wave.id }}" style="color:#6ee7b7;">{{ data.wave.get('name', data.migration.get('wave_id', '—')) }}</a>
          {% else %}{{ data.migration.get('wave_id', '—') }}{% endif %}
        </span>
      </div>
      <div class="detail-row"><span class="label">Started</span><span class="value">{{ data.migration.get('started_at', '—') }}</span></div>
      <div class="detail-row"><span class="label">Completed</span><span class="value">{{ data.migration.get('completed_at', '—') }}</span></div>
      <div class="detail-row"><span class="label">Pre-Check</span>
        <span class="value">
          {% if data.migration.get('pre_check_passed') is none %}<span style="color:#64748b;">—</span>
          {% elif data.migration.get('pre_check_passed') %}<span style="color:#34d399;">PASS</span>
          {% else %}<span style="color:#f87171;">FAIL</span>
          {% endif %}
        </span>
      </div>
      <div class="detail-row"><span class="label">Post-Check</span>
        <span class="value">
          {% if data.migration.get('post_check_passed') is none %}<span style="color:#64748b;">—</span>
          {% elif data.migration.get('post_check_passed') %}<span style="color:#34d399;">PASS</span>
          {% else %}<span style="color:#f87171;">FAIL</span>
          {% endif %}
        </span>
      </div>
    </div>
  </div>
</div>

{% if data.migration.get('executor_log') %}
<div class="detail-card">
  <h5>Executor Log</h5>
  <div class="log-box">{{ data.migration.get('executor_log', '') }}</div>
</div>
{% endif %}

{% include "includes/iqe_query_widget.html" %}
{% endblock %}