{% extends 'layout.twig' %}

{% block header %}
    <div class="action-links">
        <a href="/inbox/{{ address }}" aria-label="Return to inbox">← Return to inbox</a>
        
        {% if currentUser %}
            <!-- Email Dropdown (multiple actions when logged in) -->
            <div class="action-dropdown">
                <button class="dropdown-toggle" aria-label="Email actions">Email ▾</button>
                <div class="dropdown-menu" data-section-title="Email Actions">
                    {% if smtpEnabled %}
                        <a href="#" id="forwardBtn" aria-label="Forward this email">Forward</a>
                    {% endif %}
                    <a href="/inbox/{{ address }}/{{ uid }}/delete" aria-label="Delete this email">Delete</a>
                    <a href="/inbox/{{ address }}/{{ uid }}/raw" target="_blank" aria-label="View raw email">View Raw</a>
                </div>
            </div>

            <!-- Account Dropdown (logged in) -->
            {% if authEnabled %}
                <div class="action-dropdown">
                    <button class="dropdown-toggle" aria-label="Account menu">Account ▾</button>
                    <div class="dropdown-menu" data-section-title="Account">
                        <a href="/account" aria-label="Account settings">Settings</a>
                        <a href="/logout?redirect={{ ('/inbox/' ~ address ~ '/' ~ uid) | url_encode }}" aria-label="Logout">Logout</a>
                    </div>
                </div>
            {% endif %}
        {% else %}
            <!-- Simple buttons when not logged in -->
            <a href="/inbox/{{ address }}/{{ uid }}/delete" aria-label="Delete this email">Delete</a>
            <a href="/inbox/{{ address }}/{{ uid }}/raw" target="_blank" aria-label="View raw email">View Raw</a>
            {% if authEnabled %}
                <a href="/auth" aria-label="Login or Register">Account</a>
            {% endif %}
        {% endif %}

        <a href="/" aria-label="Return to home">Home</a>
        <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="alert alert-success">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline;vertical-align:middle;margin-right:0.5rem">
                <path d="M20 6L9 17l-5-5"></path>
            </svg>
            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|sanitizeHtml }}</h1>
            <div class="mail-meta">
                <div class="mail-from">From: {{ mail.from.text|sanitizeHtml }}</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|sanitizeHtml }}</span>
                                <span class="crypto-filename">{{ crypto.filename|sanitizeHtml }}{% if crypto.info %} · {{ crypto.info|sanitizeHtml }}{% endif %}</span>
                            </div>
                            <pre class="crypto-key-content">{{ crypto.content|sanitizeHtml }}</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|sanitizeHtml }}
                        </a>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>

    <!-- Forward Email Modal -->
    {% if smtpEnabled %}
    <div id="forwardModal" class="modal" style="display: none;">
        <div class="modal-content frosted-glass">
            <span class="close" id="closeForward">&times;</span>
            <h3>Forward Email</h3>
            
            {% if not currentUser %}
                <p class="modal-description auth-required">
                    <strong>Login required:</strong> You must be logged in to forward emails.
                </p>
                <div class="auth-prompt">
                    <a href="/auth?redirect={{ ('/inbox/' ~ address ~ '/' ~ uid)|url_encode }}" class="button button-primary">Login or Register</a>
                </div>
            {% elseif userForwardEmails|length == 0 %}
                <p class="modal-description">You don't have any verified forwarding emails yet.</p>
                <p class="modal-description">Add a verified email address in your account settings to enable forwarding.</p>
                <a href="/account" class="button button-primary">Go to Account Settings</a>
            {% else %}
                <p class="modal-description">Select a verified email address to forward this message to.</p>
                {% if errorMessage %}
                    <p class="alert alert-error">{{ errorMessage }}</p>
                {% endif %}
                <p id="forwardError" class="alert alert-error" style="display:none"></p>
                <form method="POST" action="/inbox/{{ address }}/{{ uid }}/forward">
                    <fieldset>
                        <label for="forwardEmail" class="floating-label">Forward to</label>
                        <select id="forwardEmail" name="destinationEmail" required class="modal-input">
                            <option value="">Select an email...</option>
                            {% for email in userForwardEmails %}
                                <option value="{{ email.email }}">{{ email.email }}</option>
                            {% endfor %}
                        </select>
                        <small class="form-hint">Manage emails in <a href="/account">Account Settings</a></small>
                        <button type="submit" class="button-primary modal-button">Forward</button>
                    </fieldset>
                </form>
            {% endif %}
        </div>
    </div>
    {% endif %}

{% endblock %}

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