<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Selbsteinschätzung</title>
 <style>
    @page {
        size: A4;
        margin: 20mm 15mm 22mm 15mm;

        @bottom-center {
            content: "Seite " counter(page) " / " counter(pages);
            font-size: 10pt;
            color: #6b5a4d;
        }
    }

    body {
        font-family: Arial, Helvetica, sans-serif;
        color: #3c332c;
        font-size: 11pt;
        line-height: 1.45;
        padding-right: 100px; /* Platz für Logo reservieren */
    }

    .logo-top-right {
        position: fixed;
        top: 12mm;
        right: 5mm;
        width: 75px;
        opacity: 0.95;
    }

    .header {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 24px;
    }

    .header h1 {
        margin: 0 0 16px 0;
        font-size: 22pt;
        color: #8f6437;
    }

    .user-name {
        font-size: 16pt;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .date {
        font-size: 11pt;
        color: #786a5d;
    }

    .section {
        border: 1px solid #eadbc8;
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 18px;
        background: #fffaf4;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .section h2 {
        margin-top: 0;
        color: #8f6437;
        font-size: 14pt;
    }

    .chart {
        width: 100%;
        max-width: 100%;
        border: 1px solid #eadbc8;
        border-radius: 8px;
        display: block;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 8px;
    }

    th,
    td {
        padding: 10px 8px;
        border-bottom: 1px solid #eadbc8;
    }

    th {
        background: #f7f1e8;
        text-align: left;
    }

    .col-center {
        text-align: center;
        width: 130px;
    }

    .recommendation-block {
        margin-bottom: 16px;
        padding: 14px 16px;
        border: 1px solid #eadbc8;
        border-radius: 12px;
        background: #fff;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .recommendation-block h3 {
        margin: 0 0 8px 0;
        color: #8f6437;
        font-size: 12.5pt;
    }

    .final-image-wrapper {
        text-align: center;
        margin-top: 22px;
        page-break-inside: avoid;
        break-inside: avoid;
        page-break-before: auto;
    }

    .final-image {
        width: 40%;
        max-width: 410px;
        display: inline-block;
    }

    .closing-block {
        margin-top: 28px;
        padding: 18px 22px;
        border: 1px solid #eadbc8;
        border-radius: 18px;
        background: linear-gradient(180deg, #fffaf4 0%, #f8efe2 100%);
        text-align: center;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .closing-block .closing-headline {
        font-size: 16pt;
        font-weight: 700;
        color: #8f6437;
        margin-bottom: 10px;
    }

    .closing-block .closing-text {
        font-size: 12pt;
        line-height: 1.5;
        margin: 0 auto 10px auto;
        max-width: 90%;
    }

    .closing-block .closing-link {
        font-weight: 700;
        color: #8f6437;
        text-decoration: none;
    }

    .closing-block .closing-impressum {
        margin-top: 10px;
        font-size: 10pt;
        color: #786a5d;
    }

    .closing-block .closing-impressum a {
        color: #8f6437;
        text-decoration: none;
    }
</style>
</head>
<body>
    <img src="{{ logo_up_path }}" class="logo-top-right" alt="Logo">

    <div class="header">
        <h1>Selbsteinschätzung für {{ branche.branchenname }}</h1>
        <div class="user-name">{{ user.name }}</div>
        <div class="date">{{ today_str }}</div>
    </div>

    <div class="section">
        <h2>Grafische Auswertung</h2>
        <img src="{{ chart_pdf_path }}" alt="Assessment Chart" class="chart">
    </div>

    <div class="section">
        <h2>Ergebnisübersicht</h2>
        <table>
            <thead>
                <tr>
                    <th>Thema</th>
                    <th class="col-center">Anzahl positiver Einschätzungen</th>
                </tr>
            </thead>
            <tbody>
                {% for row in rows %}
                <tr>
                    <td>{{ row.titel }}</td>
                    <td class="col-center">{{ row.ja_anzahl }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if pdf_recommendations %}
    <div class="section">
        <h2>Hinweise und Ansprechpartner</h2>

        {% for item in pdf_recommendations %}
        <div class="recommendation-block">
            <h3>{{ item.titel }}</h3>

            {% if item.zusatztext %}
            <p>{{ item.zusatztext }}</p>
            {% endif %}

            {% if item.ansprechpartner %}
            <p>
                <strong>Unser Ansprechpartner für Sie:</strong>
                <a href="mailto:{{ item.ansprechpartner.email }}">
                    {{ item.ansprechpartner.name }}
                </a>
            </p>
            {% else %}
            <p>
                <strong>Unser Ansprechpartner für Sie:</strong>
                aktuell nicht hinterlegt
            </p>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="final-image-wrapper">
        <img src="{{ unternehmer_path }}" class="final-image" alt="Unternehmer">
    </div>



    <div class="closing-block">
        <div class="closing-headline">
            Ihr Team der Berater von
            <a href="https://dasunternehmen.com" class="closing-link">DasUnternehmen.com</a>
        </div>

        <p class="closing-text">
            freut sich darauf, Sie auf Ihrem Weg in eine optimierte Zukunft begleiten zu dürfen.
        </p>

        <div class="closing-impressum">
            <a href="https://dasunternehmen.com/impressum/">Impressum</a>
        </div>
    </div>
</body>
</html>