48hr.email/infrastructure/web/views/mail.twig

{% extends 'layout.twig' %}

{% block header %}
    <div class="action-links">
        <a href="/inbox/{{ address }}" aria-label="Return to inbox">← Return to inbox</a>
        <a href="/inbox/{{ address }}/{{ uid }}/delete" aria-label="Delete this email">Delete Email</a>
        <a href="/inbox/{{ address }}/{{ uid }}/raw" target="_blank" aria-label="View raw email">View Raw</a>
        {% if lockEnabled and isLocked and hasAccess %}
            <a href="/lock/logout" aria-label="Logout">Logout</a>
        {% else %}
            <a href="/logout" aria-label="Logout">Logout</a>
        {% endif %}
        <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark/light mode">
            <svg class="theme-icon theme-icon-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
            <svg class="theme-icon theme-icon-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            </svg>
        </button>
    </div>
{% endblock %}

{% block body %}
    <div class="mail-container">
        <div class="mail-header">
            <h1 class="mail-subject">{{ mail.subject }}</h1>
            <div class="mail-meta">
                <div class="mail-from">From: {{ mail.from.text }}</div>
                <div class="mail-date" data-date="{{ mail.date|date('c') }}"></div>
            </div>
        </div>

        <div class="mail-content">
            {% if mail.html %}
                <div class="mail-html-content">
                    <iframe sandbox="allow-popups allow-popups-to-escape-sandbox" csp="script-src 'none'" srcdoc='{{ mail.html }}'></iframe>
                </div>
            {% elseif mail.textAsHtml %}
                <div class="mail-text-content">
                    {{ mail.textAsHtml|raw }}
                </div>
            {% else %}
                <div class="mail-empty-content">
                    <p>No content available</p>
                </div>
            {% endif %}
        </div>

        {% if cryptoAttachments and cryptoAttachments|length > 0 %}
            <div class="mail-crypto-keys">
                <div class="crypto-header" id="cryptoHeader">
                    <h4>Cryptographic Keys & Signatures ({{ cryptoAttachments|length }})</h4>
                    <button class="crypto-toggle" aria-label="Toggle cryptographic keys visibility" aria-expanded="false">
                        <svg class="crypto-icon crypto-icon-collapsed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="6 9 12 15 18 9"></polyline>
                        </svg>
                        <svg class="crypto-icon crypto-icon-expanded" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="18 15 12 9 6 15"></polyline>
                        </svg>
                    </button>
                </div>
                <div class="crypto-content" id="cryptoContent" style="display: none;">
                    {% for crypto in cryptoAttachments %}
                        <div class="crypto-item">
                            <div class="crypto-item-header">
                                <span class="crypto-type">{{ crypto.type }}</span>
                                <span class="crypto-filename">{{ crypto.filename }}{% if crypto.info %} · {{ crypto.info }}{% endif %}</span>
                            </div>
                            <pre class="crypto-key-content">{{ crypto.content }}</pre>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        {% if mail.attachments %}
            <div class="mail-attachments">
                <h4>Attachments</h4>
                <div class="attachments-list">
                    {% for attachment in mail.attachments %}
                        <a href="/inbox/{{ address }}/{{ uid }}/{{ attachment.checksum }}" class="attachment-link">
                            📎 {{ attachment.filename }}
                        </a>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>

{% endblock %}

{% block footer %}
    {{ parent() }}
    <script>
        // Initialize crypto keys toggle
        document.addEventListener('DOMContentLoaded', () => {
            if (window.utils && typeof window.utils.initCryptoKeysToggle === 'function') {
                window.utils.initCryptoKeysToggle();
            }
        });
    </script>
{% endblock %}