{% extends 'layout.twig' %}

{% block header %}
    <div class="action-links">
        {% if lockEnabled %}
            {% if isLocked and hasAccess %}
                <a href="#" id="removeLockBtn" aria-label="Remove password lock">Remove Lock</a>
            {% elseif isLocked %}
                <a href="#" id="unlockBtn" aria-label="Unlock inbox">Unlock</a>
            {% else %}
                <a href="#" id="lockBtn" aria-label="Protect inbox with password">Protect Inbox</a>
            {% endif %}
        {% endif %}
        <a href="#" id="forwardAllBtn" aria-label="Forward all emails">Forward All</a>
        <a href="/inbox/{{ address }}/delete-all" aria-label="Delete all emails">Wipe Inbox</a>
        {% if lockEnabled 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 %}
    <script src="/javascripts/qrcode.js"></script>
    <script src="/javascripts/inbox-init.js" defer data-address="{{ address }}" data-expiry-time="{{ expiryTime }}" data-expiry-unit="{{ expiryUnit }}" data-refresh-interval="{{ refreshInterval }}"></script>
    {% if forwardAllSuccess %}
        <div class="success-message">
            ✓ Successfully forwarded {{ forwardAllSuccess }} email(s)!
        </div>
    {% endif %}
    {% if errorMessage %}
        <div class="unlock-error">
            {{ errorMessage }}
        </div>
    {% endif %}
    <div class="inbox-container">
        <div class="inbox-header">
            <h1 class="inbox-title" id="copyAddress" title="Click to copy address">{{ address }}</h1>
            <button id="qrCodeBtn" class="qr-icon-btn" title="Show QR Code" aria-label="Show QR Code">
                <svg class="qr-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <rect x="3" y="3" width="7" height="7"/>
                    <rect x="14" y="3" width="7" height="7"/>
                    <rect x="14" y="14" width="7" height="7"/>
                    <rect x="3" y="14" width="7" height="7"/>
                </svg>
            </button>
            <span id="copyFeedback">Copied!</span>
        </div>

        <div class="emails-container">
            {% for mail in mailSummaries %}
                <a href="{{ mail.to[0] }}/{{ mail.uid }}" class="email-link">
                    <div class="email-card">
                        <div class="email-header">
                            <div class="email-sender">
                                <div class="sender-name">{{ mail.from[0].name }}</div>
                                <div class="sender-email">{{ mail.from[0].address }}</div>
                            </div>
                            <div class="email-date" data-date="{{ mail.date|date('c') }}"></div>
                        </div>
                        <div class="email-subject-row">
                            <div class="email-subject">{{ mail.subject }}</div>
                            <div class="email-expiry">
                                <span class="expiry-timer" data-date="{{ mail.date|date('c') }}">Expires in ...</span>
                            </div>
                        </div>
                    </div>
                </a>
            {% endfor %}

    {% if not mailSummaries %}
        <blockquote>
            There are no mails yet.
        </blockquote>
    {% endif %}
    <div class="refresh-countdown" id="refreshCountdown" title="New emails are fetched from the server only when the timer hits zero. Reloading this page has no effect on fetching.">Fetching new mails in <span id="refreshTimer">--</span>s</div>
    {% if lockEnabled and not isLocked %}
    <!-- Lock Modal -->
    <div id="lockModal" class="modal" style="display: none;" data-lock-error="{{ error|default('') }}">
        <div class="modal-content">
            <span class="close" id="closeLock">&times;</span>
            <h3>Protect Inbox</h3>
            <p class="modal-description">Password-protect this inbox. Locked emails won't be deleted. Protection active for {{ locktimer }}hrs after last login.</p>
            {% if error and error == 'locking_disabled_for_example' %}
                <p id="lockServerError" class="unlock-error">Locking is disabled for the example inbox.</p>
            {% endif %}
            <p id="lockErrorInline" class="unlock-error" style="display:none"></p>
            <form method="POST" action="/lock/lock">
                <input type="hidden" name="address" value="{{ address }}">
                <fieldset>
                    <label for="lockPassword" class="floating-label">Password (min 8 characters)</label>
                    <input type="password" id="lockPassword" name="password" placeholder="Password" required minlength="8" class="modal-input">
                    
                    <label for="lockConfirm" class="floating-label">Confirm Password</label>
                    <input type="password" id="lockConfirm" placeholder="Confirm" required minlength="8" class="modal-input">
                    
                    <button type="submit" class="button-primary modal-button">Lock Inbox</button>
                </fieldset>
            </form>
        </div>
    </div>
    
    {% endif %}

    {% if lockEnabled and isLocked and not hasAccess %}
    <!-- Unlock Modal -->
    <div id="unlockModal" class="modal" style="display: none;" data-unlock-error="{{ unlockError|default('') }}">
        <div class="modal-content">
            <span class="close" id="closeUnlock">&times;</span>
            <h3>Unlock Inbox</h3>
            <p class="modal-description">Enter password to access this locked inbox.</p>
            {% if unlockError %}
                <p class="unlock-error">
                    {% if unlockError == 'invalid_password' %}
                        Invalid password. Please try again.
                    {% elseif unlockError == 'missing_fields' %}
                        Please provide a password.
                    {% else %}
                        An error occurred. Please try again.
                    {% endif %}
                </p>
            {% endif %}
            <form method="POST" action="/lock/unlock">
                <input type="hidden" name="address" value="{{ address }}">
                <input type="hidden" name="redirectTo" value="{{ redirectTo }}">
                <fieldset>
                    <label for="unlockPassword" class="floating-label">Password</label>
                    <input type="password" id="unlockPassword" name="password" placeholder="Password" required class="modal-input">
                    <button type="submit" class="button-primary modal-button">Unlock</button>
                </fieldset>
            </form>
        </div>
    </div>
    
    {% endif %}

    {% if lockEnabled and isLocked and hasAccess %}
    <!-- Remove Lock Modal -->
    <div id="removeLockModal" class="modal" style="display: none;">
        <div class="modal-content">
            <span class="close" id="closeRemoveLock">&times;</span>
            <h3>Remove Password Lock</h3>
            <p class="modal-description">Are you sure you want to remove the password lock from this inbox? This cannot be undone.</p>
            <form method="POST" action="/lock/remove">
                <input type="hidden" name="address" value="{{ address }}">
                <fieldset>
                    <button type="submit" class="button-primary modal-button modal-button-danger">Remove Lock</button>
                    <button type="button" class="button modal-button modal-button-cancel" id="cancelRemoveLock">Cancel</button>
                </fieldset>
            </form>
        </div>
    </div>
    
    {# JS handled in /javascripts/lock-modals.js #}
    {% endif %}

    <!-- QR Code Modal -->
    <div id="qrModal" class="modal">
        <div class="modal-content qr-modal-content">
            <span class="close" id="closeQr">&times;</span>
            <h3>Scan Email Address</h3>
            <div id="qrcode" class="qr-code-container"></div>
            <p class="qr-address-label">{{ address }}</p>
        </div>
    </div>

    <!-- Forward All Modal -->
    <div id="forwardAllModal" class="modal" style="display: none;">
        <div class="modal-content">
            <span class="close" id="closeForwardAll">&times;</span>
            <h3>Forward All Emails</h3>
            <p class="modal-description">Enter the email address to forward all emails in this inbox to. Limited to 25 emails maximum.</p>
            {% if mailSummaries|length > 0 %}
                <p class="modal-info">You have {{ mailSummaries|length }} email(s) in this inbox.</p>
            {% endif %}
            <p id="forwardAllError" class="unlock-error" style="display:none"></p>
            <form method="POST" action="/inbox/{{ address }}/forward-all">
                <fieldset>
                    <label for="forwardAllEmail" class="floating-label">Destination Email</label>
                    <input type="email" id="forwardAllEmail" name="destinationEmail" 
                           placeholder="recipient@example.com" required class="modal-input">
                    <button type="submit" class="button-primary modal-button">Forward All</button>
                </fieldset>
            </form>
        </div>
    </div>
{% endblock %}