@{
    ViewData["Title"] = "Compose";
}
<div class="app">
    <div class="topbar">
        <a class="btn" asp-controller="Mail" asp-action="Index">&larr; <span data-i18n="common_back"></span></a>
        <div class="spacer"></div>
        <span data-i18n="compose_page_title"></span>
    </div>
    <div class="app-body">
        <div class="content">
            <div class="compose-wrap">
                <form id="composeForm">
                    <input type="hidden" name="AccountId" id="AccountId" />

                    <div class="compose-options">
                        <div>
                            <label data-i18n="compose_priority"></label>
                            <select name="Priority">
                                <option value="Low" data-i18n="compose_priority_low"></option>
                                <option value="Normal" selected data-i18n="compose_priority_normal"></option>
                                <option value="High" data-i18n="compose_priority_high"></option>
                            </select>
                        </div>
                        <div>
                            <label data-i18n="compose_sensitivity"></label>
                            <select name="Sensitivity">
                                <option value="Nothing" selected data-i18n="compose_sensitivity_nothing"></option>
                                <option value="Confidential" data-i18n="compose_sensitivity_confidential"></option>
                                <option value="Private" data-i18n="compose_sensitivity_private"></option>
                                <option value="Personal" data-i18n="compose_sensitivity_personal"></option>
                            </select>
                        </div>
                    </div>

                    <label class="checkbox-line">
                        <input type="checkbox" name="RequestReadReceipt" value="true" /> <span data-i18n="compose_request_read_receipt"></span>
                    </label>

                    <label data-i18n="compose_to"></label>
                    <input type="text" name="To" id="ToInput" required />

                    <div class="row-inline">
                        <div><label data-i18n="compose_cc"></label><input type="text" name="Cc" /></div>
                        <div><label data-i18n="compose_bcc"></label><input type="text" name="Bcc" /></div>
                    </div>

                    <label data-i18n="compose_subject"></label>
                    <input type="text" name="Subject" />

                    <label data-i18n="compose_body"></label>
                    <div class="editor-toolbar">
                        <button type="button" data-cmd="bold"><b>B</b></button>
                        <button type="button" data-cmd="italic"><i>I</i></button>
                        <button type="button" data-cmd="underline"><u>U</u></button>
                        <span class="sep"></span>
                        <button type="button" data-cmd="justifyLeft">&#8676;</button>
                        <button type="button" data-cmd="justifyCenter">&#8596;</button>
                        <button type="button" data-cmd="justifyRight">&#8677;</button>
                        <span class="sep"></span>
                        <select id="fontName">
                            <option value="" data-i18n="compose_font_name"></option>
                            <option value="Arial">Arial</option>
                            <option value="Georgia">Georgia</option>
                            <option value="'Courier New'">Courier New</option>
                            <option value="Verdana">Verdana</option>
                            <option value="'Times New Roman'">Times New Roman</option>
                        </select>
                        <select id="fontSize">
                            <option value="" data-i18n="compose_font_size"></option>
                            <option value="1" data-i18n="compose_size_small"></option>
                            <option value="3" selected data-i18n="compose_size_normal"></option>
                            <option value="5" data-i18n="compose_size_large"></option>
                            <option value="7" data-i18n="compose_size_huge"></option>
                        </select>
                        <span class="sep"></span>
                        <label style="display:inline-flex;align-items:center;gap:4px;margin:0;"><span data-i18n="compose_text"></span><input type="color" id="textColor" value="#1f2430" /></label>
                        <label style="display:inline-flex;align-items:center;gap:4px;margin:0;"><span data-i18n="compose_background"></span><input type="color" id="bgColor" value="#ffffff" /></label>
                        <span class="sep"></span>
                        <button type="button" data-cmd="createLink" id="linkBtn" data-i18n="compose_link"></button>
                        <button type="button" data-cmd="insertImage" id="imageBtn" data-i18n="compose_image"></button>
                        <button type="button" id="uploadImageBtn" data-i18n="compose_upload_image"></button>
                        <input type="file" id="inlineImageInput" accept="image/*" multiple style="display:none;" />
                        <span class="sep"></span>
                        <button type="button" data-cmd="insertUnorderedList">&#8226; <span data-i18n="compose_list"></span></button>
                        <button type="button" data-cmd="removeFormat" data-i18n="compose_clear_format"></button>
                    </div>
                    <div id="editor" contenteditable="true" spellcheck="true"></div>
                    <textarea id="HtmlBody" name="HtmlBody" style="display:none;"></textarea>

                    <label data-i18n="compose_attachments"></label>
                    <input type="file" id="attachmentsInput" name="files" multiple />
                    <div id="attachmentsList" class="attachments-list"></div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary" data-i18n="compose_send"></button>
                        <button type="button" class="btn" id="saveDraftBtn" data-i18n="compose_save_draft"></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@section Scripts {
    <script src="~/js/compose.js" asp-append-version="true"></script>
}