{{template "base" .}}

{{define "title"}}{{.Detail.Title}}{{end}}

{{define "body"}}
<div style="margin-bottom: 20px;">
    <a href="/parlament" style="font-size: 13px; color: var(--text-muted); text-decoration: none;">&larr; Parlamentsgeschehen</a>
</div>

{{with .Detail}}
<div class="page-header" style="margin-bottom: 24px;">
    <div style="display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;">
        <h1 class="page-title" style="margin: 0;">{{.Title}}</h1>
        {{if .Zitation}}<span style="font-size: 15px; color: var(--text-muted); font-weight: 500;">{{.Zitation}}</span>{{end}}
    </div>
    <p class="page-subtitle" style="margin-top: 6px;">
        {{.DocType}}{{if .Date}} · {{.Date}}{{end}}
    </p>
    {{if .Description}}<p style="margin-top: 10px; font-size: 14px; color: var(--text-muted); max-width: 720px; line-height: 1.5;">{{.Description}}</p>{{end}}
    {{if .Topics}}
    <div style="margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap;">
        {{range .Topics}}<span style="display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);">{{.}}</span>{{end}}
    </div>
    {{end}}
</div>

{{/* ── Vote result card ─────────────────────────────────────────────────── */}}
<div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); margin-bottom: 20px;">

    {{/* Result badge + seat counts */}}
    <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;">
        <span style="display: inline-block; padding: 4px 14px; border-radius: 4px; font-size: 14px; font-weight: 700;
            {{if .Passed}}background: #d1fae5; color: #065f46;{{else}}background: #fee2e2; color: #991b1b;{{end}}">
            {{if .Passed}}Angenommen{{else}}Abgelehnt{{end}}
        </span>
        <span style="font-size: 22px; font-weight: 700; color: #065f46;">{{.ForSeats}} Ja</span>
        <span style="font-size: 18px; color: var(--text-muted);">/</span>
        <span style="font-size: 22px; font-weight: 700; color: #991b1b;">{{.AgainstSeats}} Nein</span>
        <a href="https://www.parlament.gv.at{{$.Path}}" target="_blank" rel="noopener"
           style="margin-left: auto; font-size: 13px; color: var(--text-muted); text-decoration: none; white-space: nowrap;">
            parlament.gv.at &rarr;
        </a>
    </div>

    {{/* Seat bar */}}
    <div style="height: 10px; border-radius: 5px; background: #fee2e2; overflow: hidden; margin-bottom: 6px;">
        <div style="height: 100%; width: {{.ForPercent}}%; background: #10b981; border-radius: 5px;"></div>
    </div>
    <div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">{{.ForPercent}}% Dafür</div>
</div>

{{/* ── Two-column faction breakdown ─────────────────────────────────────── */}}
<div class="faction-grid">

    {{/* Yes column */}}
    <div>
        <div style="font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #065f46; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid #10b981;">
            ✓ Dafür
        </div>
        {{range .Factions}}{{if .InFavor}}
        <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
             border-radius: var(--radius); border-left: 3px solid {{.Color}}; background: var(--bg-card); border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);">
            <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: {{.Color}}; flex-shrink: 0;"></span>
            <span style="font-weight: 600; font-size: 15px; flex: 1;">{{.Name}}</span>
            <span style="font-size: 13px; color: var(--text-muted); font-weight: 500;">{{.Seats}} Mandate</span>
        </div>
        {{end}}{{end}}
    </div>

    {{/* No column */}}
    <div>
        <div style="font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #991b1b; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid #ef4444;">
            ✗ Dagegen
        </div>
        {{range .Factions}}{{if not .InFavor}}
        <div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
             border-radius: var(--radius); border-left: 3px solid {{.Color}}; background: var(--bg-card); border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);">
            <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: {{.Color}}; flex-shrink: 0;"></span>
            <span style="font-weight: 600; font-size: 15px; flex: 1;">{{.Name}}</span>
            <span style="font-size: 13px; color: var(--text-muted); font-weight: 500;">{{.Seats}} Mandate</span>
        </div>
        {{end}}{{end}}
    </div>
</div>

{{/* ── Documents ─────────────────────────────────────────────────────────── */}}
{{if .DocGroups}}
<div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); margin-bottom: 20px;">
    <h2 style="font-size: 14px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 14px;">Dokumente</h2>
    <div style="display: flex; gap: 24px; flex-wrap: wrap;">
        {{range .DocGroups}}
        <div>
            <div style="font-size: 13px; font-weight: 600; color: var(--dark); margin-bottom: 6px;">{{.Title}}</div>
            {{range .Files}}
            <a href="https://www.parlament.gv.at{{.Link}}" target="_blank" rel="noopener"
               style="display: inline-block; margin-right: 6px; margin-bottom: 4px; padding: 2px 10px; border-radius: 4px;
               font-size: 12px; font-weight: 600; text-decoration: none;
               {{if eq .Type "PDF"}}background: #fee2e2; color: #991b1b;{{else}}background: #dbeafe; color: #1e40af;{{end}}">
                {{.Type}}
            </a>
            {{end}}
        </div>
        {{end}}
    </div>
</div>
{{end}}

{{/* ── Per-person votes ─────────────────────────────────────────────────── */}}
<div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow);">
    <h2 style="font-size: 14px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 10px;">Abstimmung je Abgeordnetem</h2>
    <p style="font-size: 13px; color: var(--text-muted); margin: 0;">
        Einzelne Abgeordnetenstimmen sind nur bei <em>namentlichen Abstimmungen</em> öffentlich verfügbar.
        Für diesen Beschluss liegt nur das Fraktionsergebnis vor.
    </p>
</div>
{{end}}
{{end}}
