path: root/templates/mail/webmail/compose.django

<div class="flex flex-col h-full">
    <div class="flex items-center justify-between px-6 py-2 border-b border-white/[0.04] shrink-0">
        <h3 class="text-sm font-medium text-zinc-200">{% if reply_to %}Reply{% else %}New Message{% endif %}</h3>
        <button type="button" onclick="var t = document.getElementById('webmail-empty-template'); if (t) document.getElementById('webmail-preview').innerHTML = t.innerHTML;" class="webmail-btn-icon" title="Discard">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <form id="compose-form" class="flex flex-col flex-1 min-h-0">
        <input type="hidden" id="compose-draft-id" value="{{ draft_id }}">
        <input type="hidden" id="compose-from-mailbox-id" value="{{ active_mailbox.ID }}">
        <input type="hidden" id="compose-to-value" value="{% if reply_to %}{{ reply_to.FromAddress }}{% endif %}">
        <input type="hidden" id="compose-cc-value" value="">
        <input type="hidden" id="compose-bcc-value" value="">

        <div class="border-b border-white/[0.04]">
            <div class="flex items-start px-6 py-1.5 border-b border-white/[0.04]">
                <label class="text-xs text-zinc-500 w-12 shrink-0 leading-[24px]">From</label>
                <div class="dropdown flex-1 min-w-0" data-dropdown>
                    <input type="hidden" value="{{ active_mailbox.ID }}" data-dropdown-value>
                    <button type="button" class="flex items-center gap-1 text-left" data-dropdown-trigger>
                        <span class="webmail-tag" data-dropdown-label>{{ active_mailbox.User.DisplayName }} &lt;{{ active_mailbox.Address }}&gt;</span>
                        <svg class="w-3 h-3 text-zinc-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                        </svg>
                    </button>
                    <div class="dropdown-menu min-w-[16rem]" data-dropdown-menu>
                        <div class="dropdown-options" data-dropdown-options>
                            {% for address in from_addresses %}
                            <button type="button" class="dropdown-option" data-dropdown-option data-value="{{ address.MailboxID }}" data-label="{{ address.DisplayName }} <{{ address.Address }}>" onclick="document.getElementById('compose-from-mailbox-id').value = '{{ address.MailboxID }}';">
                                <p class="text-sm text-zinc-200">{{ address.DisplayName }}</p>
                                <p class="text-xs text-zinc-500">{{ address.Address }}</p>
                            </button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-start px-6 py-1.5 border-b border-white/[0.04]">
                <label class="text-xs text-zinc-500 w-12 shrink-0 leading-[24px]">To</label>
                <div class="webmail-tag-input flex-1 min-w-0" id="to-field">
                    <div class="tags-container">
                        <span id="to-tags"></span>
                        <input type="text" autocomplete="off" placeholder="Add recipient..." class="webmail-compose-field flex-1 min-w-[80px] leading-[24px]" data-recipient-input data-field="to">
                    </div>
                    <div class="webmail-autocomplete" data-autocomplete></div>
                </div>
            </div>

            <div class="flex items-start px-6 py-1.5 border-b border-white/[0.04]">
                <label class="text-xs text-zinc-500 w-12 shrink-0 leading-[24px]">Cc</label>
                <div class="webmail-tag-input flex-1 min-w-0" id="cc-field">
                    <div class="tags-container">
                        <span id="cc-tags"></span>
                        <input type="text" autocomplete="off" placeholder="Add Cc..." class="webmail-compose-field flex-1 min-w-[80px] leading-[24px]" data-recipient-input data-field="cc">
                    </div>
                    <div class="webmail-autocomplete" data-autocomplete></div>
                </div>
            </div>

            <div class="flex items-start px-6 py-1.5 border-b border-white/[0.04]">
                <label class="text-xs text-zinc-500 w-12 shrink-0 leading-[24px]">Bcc</label>
                <div class="webmail-tag-input flex-1 min-w-0" id="bcc-field">
                    <div class="tags-container">
                        <span id="bcc-tags"></span>
                        <input type="text" autocomplete="off" placeholder="Add Bcc..." class="webmail-compose-field flex-1 min-w-[80px] leading-[24px]" data-recipient-input data-field="bcc">
                    </div>
                    <div class="webmail-autocomplete" data-autocomplete></div>
                </div>
            </div>

            <div class="flex items-start px-6 py-1.5">
                <label class="text-xs text-zinc-500 w-12 shrink-0 leading-[24px]">Subject</label>
                <input type="text" name="subject" value="{% if reply_to %}Re: {{ reply_to.Subject }}{% endif %}" required autocomplete="off" placeholder="Subject" class="webmail-compose-field flex-1 min-w-0 leading-[24px]">
            </div>
        </div>

        <div class="webmail-toolbar" id="compose-toolbar">
            <button type="button" data-command="bold" title="Bold"><b>B</b></button>
            <button type="button" data-command="italic" title="Italic"><i>I</i></button>
            <button type="button" data-command="underline" title="Underline"><u>U</u></button>
            <div class="separator"></div>
            <button type="button" data-command="insertUnorderedList" title="Bullet list">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                </svg>
            </button>
            <button type="button" data-command="insertOrderedList" title="Numbered list">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.242 5.992h12m-12 6.003h12m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99" />
                </svg>
            </button>
            <div class="separator"></div>
            <button type="button" data-command="formatBlock" data-value="blockquote" title="Quote">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
                </svg>
            </button>
            <button type="button" data-command="createLink" title="Link">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
                </svg>
            </button>
        </div>

        <div class="flex-1 min-h-0 overflow-y-auto">
            <div id="compose-editor" class="webmail-editor" contenteditable="true" data-placeholder="Write your message...">{% if reply_to %}<br><br><blockquote>On {{ reply_to.CreatedAt|date:"Jan 2, 2006 3:04 PM" }}, {{ reply_to.FromAddress }} wrote:<br><br>{{ reply_to.Snippet }}</blockquote>{% endif %}</div>
        </div>

        <div class="flex items-center justify-between px-6 py-3 border-t border-white/[0.04] shrink-0">
            <div class="flex items-center gap-2">
                <button type="button" onclick="submitCompose('send')" class="webmail-btn webmail-btn-primary">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
                    </svg>
                    Send
                </button>
                <button type="button" onclick="submitCompose('draft')" class="webmail-btn webmail-btn-ghost">
                    Save Draft
                </button>
            </div>
        </div>
    </form>
</div>

<script>
(function() {
    var composeState = { to: [], cc: [], bcc: [] };
    var allRecipients = [
        {% for r in all_recipients %}
        { address: "{{ r.Address }}", display_name: "{{ r.DisplayName }}" }{% if not forloop.Last %},{% endif %}
        {% endfor %}
    ];

    {% if reply_to %}
    composeState.to.push("{{ reply_to.FromAddress }}");
    {% endif %}

    function renderTags(field) {
        var container = document.getElementById(field + "-tags");
        if (!container) return;
        container.innerHTML = "";
        composeState[field].forEach(function(address, index) {
            var tag = document.createElement("span");
            tag.className = "webmail-tag";
            tag.innerHTML = '<span class="truncate">' + address + '</span><span class="remove" data-field="' + field + '" data-index="' + index + '">&times;</span>';
            container.appendChild(tag);
        });
        updateHiddenField(field);
    }

    function updateHiddenField(field) {
        var hiddenInput = document.getElementById("compose-" + field + "-value");
        if (hiddenInput) {
            hiddenInput.value = composeState[field].join(", ");
        }
    }

    function addRecipient(field, address) {
        address = address.trim();
        if (!address || composeState[field].indexOf(address) !== -1) return;
        composeState[field].push(address);
        renderTags(field);
    }

    function removeRecipient(field, index) {
        composeState[field].splice(index, 1);
        renderTags(field);
    }

    document.querySelectorAll("[data-recipient-input]").forEach(function(input) {
        var field = input.dataset.field;
        var autocomplete = input.closest(".webmail-tag-input").querySelector("[data-autocomplete]");

        input.addEventListener("input", function() {
            var query = input.value.toLowerCase().trim();
            if (query.length < 1) { autocomplete.classList.remove("visible"); return; }

            var matches = allRecipients.filter(function(r) {
                var alreadyAdded = composeState[field].indexOf(r.address) !== -1;
                return !alreadyAdded && (r.address.toLowerCase().indexOf(query) !== -1 || r.display_name.toLowerCase().indexOf(query) !== -1);
            }).slice(0, 8);

            if (matches.length === 0) { autocomplete.classList.remove("visible"); return; }

            autocomplete.innerHTML = "";
            matches.forEach(function(match) {
                var option = document.createElement("div");
                option.className = "webmail-autocomplete-option";
                option.innerHTML = '<p class="text-sm text-zinc-200">' + match.display_name + '</p><p class="text-xs text-zinc-500">' + match.address + '</p>';
                option.addEventListener("mousedown", function(e) {
                    e.preventDefault();
                    addRecipient(field, match.address);
                    input.value = "";
                    autocomplete.classList.remove("visible");
                });
                autocomplete.appendChild(option);
            });
            autocomplete.classList.add("visible");
        });

        input.addEventListener("keydown", function(e) {
            if (e.key === "Enter" || e.key === "," || e.key === "Tab") {
                e.preventDefault();
                var val = input.value.replace(",", "").trim();
                if (val) { addRecipient(field, val); input.value = ""; }
                autocomplete.classList.remove("visible");
            }
            if (e.key === "Backspace" && input.value === "" && composeState[field].length > 0) {
                removeRecipient(field, composeState[field].length - 1);
            }
        });

        input.addEventListener("blur", function() {
            setTimeout(function() { autocomplete.classList.remove("visible"); }, 200);
            var val = input.value.replace(",", "").trim();
            if (val) { addRecipient(field, val); input.value = ""; }
        });
    });

    document.addEventListener("click", function(e) {
        if (e.target.classList.contains("remove") && e.target.dataset.field) {
            removeRecipient(e.target.dataset.field, parseInt(e.target.dataset.index));
        }
    });

    renderTags("to");
    renderTags("cc");
    renderTags("bcc");

    var toolbar = document.getElementById("compose-toolbar");
    var editor = document.getElementById("compose-editor");

    toolbar.querySelectorAll("[data-command]").forEach(function(button) {
        button.addEventListener("click", function() {
            var command = button.dataset.command;
            var value = button.dataset.value || null;

            if (command === "createLink") {
                if (typeof webmailPrompt === "function") {
                    webmailPrompt({
                        title: "Insert Link",
                        placeholder: "https://example.com",
                        confirmText: "Insert",
                        onConfirm: function(url) {
                            editor.focus();
                            document.execCommand("createLink", false, url);
                        }
                    });
                }
                return;
            }

            document.execCommand(command, false, value);
            editor.focus();
            updateToolbarState();
        });
    });

    function updateToolbarState() {
        toolbar.querySelectorAll("[data-command]").forEach(function(button) {
            var command = button.dataset.command;
            var isActive = false;

            if (command === "bold" || command === "italic" || command === "underline" || command === "insertUnorderedList" || command === "insertOrderedList") {
                isActive = document.queryCommandState(command);
            }

            if (isActive) {
                button.classList.add("active");
            } else {
                button.classList.remove("active");
            }
        });
    }

    editor.addEventListener("keyup", updateToolbarState);
    editor.addEventListener("mouseup", updateToolbarState);
    editor.addEventListener("focus", updateToolbarState);

    window.submitCompose = function(action) {
        var form = document.getElementById("compose-form");
        var url = action === "draft" ? "/mail/webmail/draft" : "/mail/webmail/send";
        var draftButton = form.querySelector("[onclick=\"submitCompose('draft')\"]");

        htmx.ajax("POST", url, {
            swap: "none",
            values: {
                from_mailbox_id: document.getElementById("compose-from-mailbox-id").value,
                to_address: document.getElementById("compose-to-value").value,
                cc_addresses: document.getElementById("compose-cc-value").value,
                bcc_addresses: document.getElementById("compose-bcc-value").value,
                subject: form.querySelector("[name='subject']").value,
                body: editor.innerHTML,
                draft_id: document.getElementById("compose-draft-id").value
            }
        }).then(function() {
            if (action === "draft" && draftButton) {
                var originalText = draftButton.textContent;
                draftButton.textContent = "Saved!";
                setTimeout(function() { draftButton.textContent = originalText; }, 1500);
            }
        });
    };
})();
</script>