{% extends "base.html" %}
{% block title %}{{ data.wave.get('name', 'Wave') }} — 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;}
.section-title{font-size:1rem;font-weight:700;color:#d1fae5;margin:24px 0 12px;}
.gl-table{width:100%;border-collapse:collapse;}
.gl-table thead th{background:#0f172a;color:#94a3b8;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;border-bottom:1px solid #334155;}
.gl-table tbody tr{border-bottom:1px solid #1e293b;cursor:pointer;}
.gl-table tbody tr:hover{background:#1a2540;}
.gl-table tbody td{padding:10px 12px;font-size:.83rem;color:#e2e8f0;vertical-align:middle;}
.gl-table-wrap{background:#1e293b;border:1px solid #334155;border-radius:10px;overflow:hidden;}
.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/waves">&#8592; Waves</a>

<div class="gl-page-header mt-2">
  <h1>{{ data.wave.get('name', 'Unnamed Wave') }}</h1>
  <p>Wave ID: <span style="font-family:monospace;font-size:.85rem;">{{ data.wave.get('id', '') }}</span> &nbsp;|&nbsp; Sequence: W{{ data.wave.get('sequence_num', '?') }}</p>
</div>

<div class="row g-3">
  <div class="col-12 col-md-6">
    <div class="detail-card">
      <h5>Wave Details</h5>
      <div class="detail-row"><span class="label">Status</span>
        <span class="value">
          {% set ws = data.wave.get('status', 'planned') %}
          {% if ws == 'completed' %}<span class="badge bg-success">{{ ws }}</span>
          {% elif ws == 'in_progress' %}<span class="badge bg-warning text-dark">{{ ws }}</span>
          {% elif ws == 'cancelled' %}<span class="badge bg-danger">{{ ws }}</span>
          {% else %}<span class="badge bg-primary">{{ ws }}</span>
          {% endif %}
        </span>
      </div>
      <div class="detail-row"><span class="label">Planned Start</span><span class="value">{{ data.wave.get('planned_start', '—') }}</span></div>
      <div class="detail-row"><span class="label">Planned End</span><span class="value">{{ data.wave.get('planned_end', '—') }}</span></div>
      <div class="detail-row"><span class="label">Workload Count</span><span class="value">{{ data.wave.get('workload_count', 0) }}</span></div>
      {% if data.wave.get('notes') %}
      <div class="detail-row"><span class="label">Notes</span><span class="value">{{ data.wave.get('notes', '') }}</span></div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Workloads in Wave -->
{% if data.workloads %}
<div class="section-title">Workloads in this Wave</div>
<div class="gl-table-wrap">
  <table class="gl-table">
    <thead><tr><th>ID</th><th>Name</th><th>Type</th><th>Risk</th><th>Status</th></tr></thead>
    <tbody>
      {% for wl in data.workloads %}
      <tr onclick="window.location='/govlift/workloads/{{ wl.id }}'">
        <td style="font-size:.75rem;color:#64748b;">{{ wl.id }}</td>
        <td style="font-weight:600;">{{ wl.name }}</td>
        <td>{{ wl.get('workload_type', '—') }}</td>
        <td>
          {% set risk = wl.get('risk_level', 'low') %}
          {% if risk == 'critical' %}<span class="badge bg-danger">{{ risk }}</span>
          {% elif risk == 'high' %}<span class="badge bg-warning text-dark">{{ risk }}</span>
          {% elif risk == 'medium' %}<span class="badge bg-info">{{ risk }}</span>
          {% else %}<span class="badge bg-success">{{ risk }}</span>
          {% endif %}
        </td>
        <td>
          {% set ms = wl.get('migration_status', 'discovered') %}
          {% if ms == 'migrated' %}<span class="badge bg-success">{{ ms }}</span>
          {% elif ms == 'in_migration' %}<span class="badge bg-warning text-dark">{{ ms }}</span>
          {% elif ms == 'failed' %}<span class="badge bg-danger">{{ ms }}</span>
          {% elif ms == 'assessed' %}<span class="badge bg-info">{{ ms }}</span>
          {% elif ms == 'wave_assigned' %}<span class="badge bg-primary">{{ ms }}</span>
          {% else %}<span class="badge bg-secondary">{{ ms }}</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="detail-card empty-state">No workloads assigned to this wave.</div>
{% endif %}

<!-- Migrations in Wave -->
{% if data.migrations %}
<div class="section-title">Migrations in this Wave</div>
<div class="gl-table-wrap">
  <table class="gl-table">
    <thead><tr><th>Job ID</th><th>Workload</th><th>Status</th><th>Started</th><th>Completed</th></tr></thead>
    <tbody>
      {% for mig in data.migrations %}
      <tr onclick="window.location='/govlift/migrations/{{ mig.id }}'">
        <td style="font-size:.75rem;color:#64748b;">{{ mig.id }}</td>
        <td style="font-size:.78rem;">{{ mig.get('workload_id', '—') }}</td>
        <td>
          {% set js = mig.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>
          {% else %}<span class="badge bg-secondary">{{ js }}</span>
          {% endif %}
        </td>
        <td style="font-size:.78rem;color:#94a3b8;">{{ mig.get('started_at', '—') }}</td>
        <td style="font-size:.78rem;color:#94a3b8;">{{ mig.get('completed_at', '—') }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

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