{{define "webmail_shortcuts"}}
<style>
    .msg-row-selected { outline: 2px solid #6ea8fe; outline-offset: -2px; background-color: rgba(110, 168, 254, 0.12); }
</style>
<script>
    // Keyboard shortcuts for the folder list (j/k/Enter/o/c//) and the single-message
    // view (c/r/a/f/#). Feature-detects which page it's on by which elements exist,
    // so one shared partial covers both without a page-specific flag.
    (function() {
        function isTypingTarget(el) {
            if (!el) return false;
            const tag = el.tagName;
            return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable;
        }

        document.addEventListener('keydown', function(e) {
            if (e.metaKey || e.ctrlKey || e.altKey) return;
            if (isTypingTarget(document.activeElement)) return;

            const rows = Array.from(document.querySelectorAll('.msg-row:not(.msg-row-older)'));
            const searchInput = document.getElementById('mailSearchInput');

            if (e.key === '/') {
                if (searchInput) { e.preventDefault(); searchInput.focus(); }
                return;
            }
            if (e.key === 'c' && typeof openCompose === 'function') {
                e.preventDefault();
                openCompose('/webmail/mail/compose');
                return;
            }

            // --- Folder list: j/k select, Enter/o open, #/Delete trash the selected row.
            if (rows.length) {
                let idx = rows.findIndex(function(r) { return r.classList.contains('msg-row-selected'); });
                if (e.key === 'j' || e.key === 'k') {
                    e.preventDefault();
                    if (idx >= 0) rows[idx].classList.remove('msg-row-selected');
                    idx = e.key === 'j' ? Math.min(idx + 1, rows.length - 1) : Math.max(idx - 1, 0);
                    rows[idx].classList.add('msg-row-selected');
                    rows[idx].scrollIntoView({ block: 'nearest' });
                    return;
                }
                if ((e.key === 'Enter' || e.key === 'o') && idx >= 0) {
                    e.preventDefault();
                    const link = rows[idx].querySelector('a[href]');
                    if (link) window.location = link.href;
                    return;
                }
                if ((e.key === '#' || e.key === 'Delete') && idx >= 0) {
                    e.preventDefault();
                    const deleteBtn = rows[idx].querySelector('form[action*="/delete"] button[type=submit]');
                    if (deleteBtn) deleteBtn.click();
                    return;
                }
            }

            // --- Single-message view: r/a/f reply/reply-all/forward, #/Delete trash.
            const replyBtn = document.getElementById('replyBtn');
            if (replyBtn) {
                if (e.key === 'r') { e.preventDefault(); replyBtn.click(); return; }
                if (e.key === 'a') { e.preventDefault(); document.getElementById('replyAllBtn').click(); return; }
                if (e.key === 'f') { e.preventDefault(); document.getElementById('forwardBtn').click(); return; }
                if (e.key === '#' || e.key === 'Delete') {
                    e.preventDefault();
                    const deleteBtn = document.querySelector('form[action*="/delete"] button[type=submit]');
                    if (deleteBtn) deleteBtn.click();
                    return;
                }
            }
        });
    })();
</script>
{{end}}