{% extends "base.html" %}

{% block title %}Vergleich: {{ p_a.program_no }} ↔ {{ p_b.program_no }}{% endblock %}

{% block content %}
<div style="max-width: 1600px; margin: 0 auto; padding: 16px 24px;">

  <div style="display:flex; align-items:baseline; gap:12px; margin-bottom:16px;">
    <a href="/programs" style="color:#94a3b8; text-decoration:none; font-size:13px;">← Programme</a>
    <h1 style="margin:0; font-size:20px;">
      ⇆ Side-by-Side Vergleich
    </h1>
  </div>

  <div style="display:grid; grid-template-columns:1fr 1fr; gap:14px;">
    {% for p, a, svg, info in [(p_a, analysis_a, svg_a, svg_info_a), (p_b, analysis_b, svg_b, svg_info_b)] %}
    <div style="background:#0d1117; border:1px solid rgba(255,255,255,0.10); border-radius:10px; overflow:hidden;">
      <div style="background:rgba(0,0,0,0.4); padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.08);">
        <a href="/programs/{{ p.id }}" style="color:#add5f4; font-family:monospace; text-decoration:none;">{{ p.program_no }}</a>
        <span style="color:#cbd5e1; margin-left:6px;">{{ p.name }}</span>
      </div>
      <div style="padding:10px 14px; background:rgba(0,0,0,0.2); display:grid;
                  grid-template-columns:repeat(3,1fr); gap:8px; font-size:11px;">
        <div><span style="color:#64748b;">Zeilen</span><div style="font-family:monospace; color:#fafafa;">{{ a.code_lines }}</div></div>
        <div><span style="color:#64748b;">Werkzeuge</span><div style="color:#add5f4;">{{ a.tools_used|join(', ') or '—' }}</div></div>
        <div><span style="color:#64748b;">Zeit</span><div style="color:#fcc09c;">{{ (a.estimated_time_sec // 60)|int }}:{{ '%02d'|format(a.estimated_time_sec|int % 60) }}</div></div>
      </div>
      <div style="height:380px; background:#0a0d12;">
        {% if svg %}
        <svg viewBox="{{ info.viewbox }}" preserveAspectRatio="xMidYMid meet"
             xmlns="http://www.w3.org/2000/svg" style="width:100%; height:100%;">
          {{ svg | safe }}
        </svg>
        {% endif %}
      </div>
      <details style="padding:8px 14px;">
        <summary style="cursor:pointer; color:#94a3b8; font-size:12px;">Code anzeigen</summary>
        <pre style="font-family:'SF Mono',Menlo,monospace; font-size:11px; color:#cbd5e1; max-height:300px; overflow:auto; margin:8px 0 0;">{{ p.code }}</pre>
      </details>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}