{% extends 'layout.twig' %}

{% block header %}
    <div class="action-links">
        <a href="/inbox/{{ address }}" aria-label="Return to inbox">← Return to inbox</a>
        <a href="#" id="forwardBtn" aria-label="Forward this email">Forward Email</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 %}
    {% if forwardSuccess %}
        <div class="success-message">
            ✓ Email forwarded successfully!
        </div>
    {% endif %}
    {% if verificationSent %}
        <div class="verification-message">
            📧 Verification email sent to <strong>{{ verificationEmail }}</strong>. Please check your inbox and click the verification link (expires in 15 minutes).
        </div>
    {% endif %}
    <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>

    <!-- Forward Email Modal -->
    <div id="forwardModal" class="modal" style="display: none;">
        <div class="modal-content">
            <span class="close" id="closeForward">&times;</span>
            <h3>Forward Email</h3>
            <p class="modal-description">Enter the email address to forward this message to.</p>
            {% if errorMessage %}
                <p class="unlock-error">{{ errorMessage }}</p>
            {% endif %}
            <p id="forwardError" class="unlock-error" style="display:none"></p>
            <form method="POST" action="/inbox/{{ address }}/{{ uid }}/forward">
                <fieldset>
                    <label for="forwardEmail" class="floating-label">Destination Email</label>
                    <input type="email" id="forwardEmail" name="destinationEmail" 
                           placeholder="recipient@example.com" required class="modal-input">
                    <button type="submit" class="button-primary modal-button">Forward</button>
                </fieldset>
            </form>
        </div>
    </div>

{% endblock %}

{% block footer %}
    {{ parent() }}
{% endblock %}