{% extends "base.html" %}

{% block title %}Diff · {{ program_no }}{% endblock %}

{% block content %}
<div style="max-width: 1280px; margin: 0 auto; padding: 24px;">
  <div style="display:flex; align-items:baseline; gap:12px; margin-bottom:16px;">
    <a href="/programs/{{ program_id }}" style="color:#94a3b8; text-decoration:none; font-size:13px;">← Editor</a>
    <h1 style="margin:0; font-size:20px;">
      📊 Diff: <span style="color:#add5f4; font-family:monospace;">{{ program_no }}</span>
      <span style="color:#cbd5e1; font-weight:500;">· {{ program_name }}</span>
    </h1>
  </div>

  <form method="GET" action="/programs/{{ program_id }}/diff"
        style="background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10);
               border-radius:10px; padding:14px 18px; margin-bottom:18px;
               display:flex; gap:14px; align-items:center;">
    <div>
      <label style="color:#94a3b8; font-size:11px; display:block; margin-bottom:4px;">Vorher (Rev. A)</label>
      <select name="a"
              style="padding:7px 10px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                     background:rgba(0,0,0,0.3); color:#fafafa;">
        {% for r in revisions %}
        <option value="{{ r.rev }}" {% if r.rev == rev_a %}selected{% endif %}>
          Rev. {{ r.rev }} — {{ r.saved_at[:16].replace('T',' ') }} {% if r.notes %} · {{ r.notes }}{% endif %}
        </option>
        {% endfor %}
      </select>
    </div>
    <div style="font-size:24px; color:#94a3b8;">→</div>
    <div>
      <label style="color:#94a3b8; font-size:11px; display:block; margin-bottom:4px;">Nachher (Rev. B)</label>
      <select name="b"
              style="padding:7px 10px; border-radius:5px; border:1px solid rgba(255,255,255,0.15);
                     background:rgba(0,0,0,0.3); color:#fafafa;">
        {% for r in revisions %}
        <option value="{{ r.rev }}" {% if r.rev == rev_b %}selected{% endif %}>
          Rev. {{ r.rev }} — {{ r.saved_at[:16].replace('T',' ') }} {% if r.notes %} · {{ r.notes }}{% endif %}
        </option>
        {% endfor %}
      </select>
    </div>
    <button type="submit"
            style="background:linear-gradient(135deg,#356692,#284e72); color:white;
                   padding:8px 18px; border:none; border-radius:6px; cursor:pointer; margin-top:18px;">
      Vergleichen
    </button>
  </form>

  <!-- Diff-Output -->
  <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 16px; border-bottom:1px solid rgba(255,255,255,0.08);
                font-size:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em;">
      Änderungen Rev. {{ rev_a }} → Rev. {{ rev_b }}
      {% if diff_lines|length == 0 %}
      <span style="color:#86efac; text-transform:none; letter-spacing:0;">· Keine Unterschiede</span>
      {% endif %}
    </div>
    <pre style="margin:0; padding:14px 18px; font-family:'SF Mono',Menlo,monospace; font-size:12px;
                line-height:1.55; color:#cbd5e1; white-space:pre-wrap; overflow-x:auto;">
{%- for line in diff_lines -%}
{%- if line.startswith('+++') or line.startswith('---') -%}
<span style="color:#add5f4; font-weight:600;">{{ line }}</span>
{% elif line.startswith('@@') %}<span style="color:#fcd34d; background:rgba(252,211,77,0.08); display:block; margin:6px 0;">{{ line }}</span>
{%- elif line.startswith('+') -%}
<span style="color:#86efac; background:rgba(22,163,74,0.12); display:block;">{{ line }}</span>
{%- elif line.startswith('-') -%}
<span style="color:#fca5a5; background:rgba(239,68,68,0.12); display:block;">{{ line }}</span>
{%- else -%}
<span style="color:#64748b;">{{ line }}</span>
{%- endif -%}
{% endfor -%}
    </pre>
  </div>
</div>
{% endblock %}