<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>{{ data.subject }}</title>
</head>
<body>
    <div class="header">
        {% if data.school_info %}
        <div class="school-name">{{ data.school_info.name }}</div>
        <div class="school-info">
            {{ data.school_info.address }}<br>
            Tel: {{ data.school_info.phone }} | E-Mail: {{ data.school_info.email }}
            {% if data.school_info.website %} | {{ data.school_info.website }}{% endif %}
        </div>
        {% else %}
        <div class="school-name">Schule</div>
        {% endif %}
    </div>

    <div class="letter-date">
        {{ data.date }}
    </div>

    <div class="recipient">
        {{ data.recipient_name }}<br>
        {{ data.recipient_address | replace('\n', '<br>') | safe }}
    </div>

    <div class="subject">
        Betreff: {{ data.subject }}
    </div>

    <div class="meta-info" style="font-size: 10pt; color: #666; margin-bottom: 20px;">
        Schüler/in: {{ data.student_name }} | Klasse: {{ data.student_class }}
    </div>

    <div class="content">
        {{ data.content | replace('\n', '<br>') | safe }}
    </div>

    {% if data.gfk_principles_applied %}
    <div style="margin-bottom: 20px;">
        {% for principle in data.gfk_principles_applied %}
        <span class="gfk-badge">GFK: {{ principle }}</span>
        {% endfor %}
    </div>
    {% endif %}

    <div class="signature">
        <p>Mit freundlichen Grüßen</p>
        <p style="margin-top: 30px;">
            {{ data.teacher_name }}
            {% if data.teacher_title %}<br><span style="font-size: 10pt;">{{ data.teacher_title }}</span>{% endif %}
        </p>
    </div>

    {% if data.legal_references %}
    <div class="legal-references">
        <strong>Rechtliche Grundlagen:</strong><br>
        {% for ref in data.legal_references %}
        <div style="margin: 5px 0;">
            {{ ref.law }} {{ ref.paragraph }}: {{ ref.title }}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div style="font-size: 8pt; color: #999; margin-top: 30px; text-align: center;">
        Erstellt mit BreakPilot | {{ generated_at }}
    </div>
</body>
</html>
