<%- include('partials/header') %>

<h2 class="text-center mb-4">Wähle deinen Vertrag</h2>
<p class="text-center text-muted mb-5">
    Transparent, fair und flexibel
</p>

<div class="row g-4">

<% if (vertragsarten.length === 0) { %>
    <div class="col-12 text-center text-muted">
        Aktuell sind keine Verträge verfügbar.
    </div>
<% } %>

<% vertragsarten.forEach(v => { %>

<div class="col-md-4">
    <div class="card h-100 shadow-sm border-0">
        <div class="card-body d-flex flex-column text-center">

            <h4 class="card-title text-primary">
                <%= v.name %>
            </h4>

            <p class="text-muted">
                Laufzeit: <strong><%= v.laufzeit %> Monate</strong>
            </p>

            <p class="card-text">
                <%= v.beschreibung || 'Keine Beschreibung vorhanden.' %>
            </p>

            <div class="my-4">
                <span class="display-6 fw-bold">
                    <%= v.betrag.toFixed(2) %> €
                </span>
                <span class="text-muted"> / Monat</span>
            </div>

            <!-- BUTTONS -->
            <div class="d-grid gap-2 mt-auto">

                <!-- Vertrag auswählen -->
                <a
                    href="/register?vertrag=<%= v.id %>"
                    class="btn btn-success">
                    ✅ Vertrag auswählen
                </a>

                <!-- Vertrag als PDF -->
                <a
                    href="/contracts/pdf/<%= v.id %>"
                    class="btn btn-outline-primary">
                    📄 Vertrag ansehen (PDF)
                </a>

                <!-- NEU: Einverständniserklärung -->
                <a
                    href="/documents/Einverstaendniserklaerung.pdf"
                    class="btn btn-outline-secondary"
                    download>
                    📄 Einverständniserklärung herunterladen
                </a>

            </div>

        </div>
    </div>
</div>

<% }) %>

</div>

<%- include('partials/footer') %>
