{% extends "network/base.html" %}
{% block title %}Simulation Results — {{ sim.topology_name }}{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Simulation Results</h1>
    <p class="page-subtitle">{{ sim.topology_name }} — {{ sim.sim_type.upper() }}</p>
  </div>
  <div class="page-actions">
    <a href="/network/" class="btn btn-secondary">← Dashboard</a>
  </div>
</div>

<div class="sim-detail-grid">
  <div class="panel">
    <div class="panel-header"><h2 class="panel-title">Summary</h2></div>
    <div class="sim-summary-box">
      <div class="sim-meta-row">
        <span class="meta-key">Type</span>
        <span class="badge-sim-{{ sim.sim_type }}">{{ sim.sim_type.upper() }}</span>
      </div>
      <div class="sim-meta-row">
        <span class="meta-key">Topology</span>
        <span>{{ sim.topology_name }}</span>
      </div>
      <div class="sim-meta-row">
        <span class="meta-key">Run At</span>
        <span>{{ sim.ran_at[:19].replace('T',' ') if sim.ran_at else '—' }}</span>
      </div>
      <div class="sim-meta-row">
        <span class="meta-key">Summary</span>
        <span class="sim-summary-text">{{ sim.result.get('summary', '—') }}</span>
      </div>
    </div>
  </div>

  <div class="panel">
    <div class="panel-header"><h2 class="panel-title">Details</h2></div>
    <pre class="json-view">{{ sim.result | tojson(indent=2) }}</pre>
  </div>
</div>
{% endblock %}