@{
    ViewData["Title"] = "Mail";
    ViewData["HasSidebar"] = true;
}
<div class="app">
    @await Html.PartialAsync("_Topbar")
    <div class="app-body">
        <div class="sidebar" id="sidebar">
            <a class="btn btn-primary compose-btn" asp-controller="Mail" asp-action="Compose" data-i18n="sidebar_new_message"></a>
            <ul class="folder-list" id="folderList"></ul>
        </div>
        <div class="col-resizer" data-resize-target=".sidebar" data-resize-key="sidebar" data-min="160" data-max="480"></div>
        <div class="content" id="mailContent">
            <div class="message-list-pane">
                <div class="list-toolbar">
                    <div class="list-toolbar-row list-toolbar-row-wrap">
                        <select id="markActions">
                            <option value="" data-i18n="mail_actions" selected></option>
                            <option value="markRead" data-i18n="action_mark_read"></option>
                            <option value="markUnread" data-i18n="action_mark_unread"></option>
                            <option value="flag" data-i18n="action_flag"></option>
                            <option value="unflag" data-i18n="action_unflag"></option>
                            <option value="markAllRead" data-i18n="action_mark_all_read"></option>
                            <option value="markAllUnread" data-i18n="action_mark_all_unread"></option>
                        </select>
                        <select id="moveToFolder">
                            <option value="" data-i18n="mail_move_to" selected></option>
                        </select>
                        <select id="deleteActions">
                            <option value="" data-i18n="mail_delete_menu" selected></option>
                            <option value="delete" data-i18n="action_delete"></option>
                            <option value="emptyTrash" data-i18n="action_empty_trash"></option>
                            <option value="emptySpam" data-i18n="action_empty_spam"></option>
                        </select>
                    </div>
                    <div class="list-toolbar-row">
                        <div class="sort-links">
                            <span data-i18n="mail_sort"></span>
                            <a href="#" data-sort="date" data-i18n="mail_sort_date"></a>
                            <a href="#" data-sort="subject" data-i18n="mail_sort_subject"></a>
                            <a href="#" data-sort="from" data-i18n="mail_sort_from"></a>
                            <a href="#" data-sort="size" data-i18n="mail_sort_size"></a>
                        </div>
                    </div>
                    <div class="list-toolbar-row checkbox-grid-row toolbar-checkbox-row">
                        <span class="flag-col"></span>
                        <input type="checkbox" data-select-all />
                        <input type="checkbox" id="unreadOnlyToggle" />
                        <label for="unreadOnlyToggle" class="unread-only-label" data-i18n="mail_unread_only"></label>
                        <a class="btn" href="#" id="spamBtn" data-i18n="mail_spam"></a>
                    </div>
                </div>
                <div id="messageListBody"></div>
            </div>
            <div class="col-resizer" data-resize-target=".message-list-pane" data-resize-key="messagelist" data-min="260" data-max="720"></div>
            <div class="detail-pane" id="detailPane"></div>
        </div>
    </div>
</div>
@section Scripts {
    <script src="~/js/mail.js" asp-append-version="true"></script>
}