{% extends "base.html" %}
{% block title %}{{ email.subject }} - MailsAuswerten{% endblock %}
{% block content %}
<p style="margin-bottom: 1rem;"><a href="/emails" class="link">&larr; Zurueck zur Liste</a></p>

<div class="card">
    <h1 style="font-size: 1.4rem;">{{ email.subject or '(kein Betreff)' }}</h1>
    <table style="margin-top: 1rem;">
        <tr><td style="width: 120px;"><strong>Von</strong></td><td>{{ email.sender }}</td></tr>
        <tr><td><strong>An</strong></td><td>{{ email.recipients }}</td></tr>
        <tr><td><strong>Datum</strong></td><td>{{ email.date }}</td></tr>
        <tr><td><strong>Message-ID</strong></td><td style="word-break: break-all; font-size: 0.85rem; color: #888;">{{ email.message_id }}</td></tr>
        <tr><td><strong>Konto</strong></td><td>{{ email.account_name or '-' }}</td></tr>
        <tr><td><strong>Abgerufen am</strong></td><td>{{ email.fetched_at }}</td></tr>
    </table>
</div>

<div class="card">
    <h2 style="margin-bottom: 1rem;">Inhalt</h2>
    {% if email.body_text %}
        <pre style="white-space: pre-wrap; font-family: inherit; line-height: 1.6;">{{ email.body_text }}</pre>
    {% elif email.body_html %}
        <iframe srcdoc="{{ email.body_html|e }}" style="width: 100%; min-height: 400px; border: 1px solid #eee; border-radius: 4px;"></iframe>
    {% else %}
        <p style="color: #888;">(kein Inhalt)</p>
    {% endif %}
</div>

{% if email.attachments %}
<div class="card">
    <h2 style="margin-bottom: 1rem;">Anhaenge ({{ email.attachments|length }})</h2>
    <table>
        <thead>
            <tr>
                <th>Dateiname</th>
                <th>Typ</th>
                <th>Groesse</th>
                <th>Pfad</th>
            </tr>
        </thead>
        <tbody>
            {% for att in email.attachments %}
            <tr>
                <td>{{ att.filename }}</td>
                <td>{{ att.content_type }}</td>
                <td>{{ "%.1f KB"|format(att.file_size / 1024) if att.file_size else '-' }}</td>
                <td style="font-size: 0.85rem; color: #888; word-break: break-all;">{{ att.file_path }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
{% endblock %}