@{
    ViewBag.Title = "Compose";
    ViewBag.Description = "compose";
    Layout = "~/Views/Shared/_Default.cshtml";
}

<div class="mail-container" style="margin:-20px;">
    <div class="mail-header">
        <ul class="header-buttons">
            <li>
                <a class="tooltip-primary" data-toggle="tooltip" data-original-title="Send"><i class="fa fa-external-link"></i> </a>
            </li>
            <li>
                <a class="tooltip-primary" data-toggle="tooltip" data-original-title="Attach"><i class="glyphicon glyphicon-paperclip"></i></a>
            </li>
            <li>
                <a class="tooltip-primary" data-toggle="tooltip" data-original-title="Cancel"><i class="glyphicon glyphicon-remove"></i></a>
            </li>
            <li>
                <a class="tooltip-primary" data-toggle="tooltip" data-original-title="Draft"><i class="glyphicon glyphicon-save"></i></a>
            </li>
        </ul>

        <div class="draft">
            Last Draft Saved 1 minutes ago
        </div>
    </div>
    <div class="mail-body">
        <div class="mail-compose">
            <form method="post" role="form">
                <div class="form-group bordered-left-4 bordered-themeprimary">
                    <label for="to">To:</label>
                    <input type="text" class="form-control" id="to" tabindex="1" />
                    <div class="field-options">
                        <a href="javascript:;" onclick="$(this).hide(); $('#cc').parent().removeClass('hidden'); $('#cc').focus();">CC</a>
                        <a href="javascript:;" onclick="$(this).hide(); $('#bcc').parent().removeClass('hidden'); $('#bcc').focus();">BCC</a>
                    </div>
                </div>
                <div class="form-group hidden bordered-left-4 bordered-themethirdcolor">
                    <label for="cc">CC:</label>
                    <input type="text" class="form-control" id="cc" tabindex="2" />
                </div>
                <div class="form-group hidden bordered-left-4 bordered-themefourthcolor">
                    <label for="bcc">BCC:</label>
                    <input type="text" class="form-control" id="bcc" tabindex="2" />
                </div>
                <div class="form-group bordered-left-4 bordered-themesecondary">
                    <label for="subject">Subject:</label>
                    <input type="text" class="form-control" id="subject" tabindex="1" />
                </div>
                <div class="compose-message-editor">
                    <div id="email-text"></div>
                </div>
            </form>
        </div>
    </div>
    <div class="mail-sidebar">
        <ul class="mail-menu">
            <li>
                <a href="inbox.html">
                    <i class="fa fa-inbox"></i>
                    <span class="badge badge-default badge-square pull-right">6</span>
                    Inbox
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-star"></i>
                    <span class="badge badge-default badge-square pull-right">1</span>
                    Important
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="glyphicon glyphicon-share"></i>
                    <span class="badge badge-default badge-square pull-right">1</span>
                    Sent
                </a>
            </li>

            <li>
                <a href="#">
                    <i class="fa fa-envelope"></i>
                    Drafts
                </a>
            </li>

            <li>
                <a href="#">
                    <i class="fa fa-ban"></i>
                    <span class="badge badge-default badge-square pull-right">1</span>
                    Spam
                </a>
            </li>

            <li>
                <a href="#">
                    <i class="fa fa-trash-o"></i>
                    Trash
                </a>
            </li>
            <li class="divider">
            </li>
            <li>
                <a href="#">
                    + Add Folder
                </a>
            </li>
        </ul>
        <ul class="mail-menu">
            <li class="menu-title">
                <h6>Tags</h6>
            </li>
            <li>
                <a href="#">
                    <span class="badge badge-palegreen badge-tag badge-square"></span>
                    Business
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="badge badge-darkorange badge-tag badge-square"></span>
                    Sports
                </a>
            </li>

            <li>
                <a href="#">
                    <span class="badge badge-yellow badge-tag badge-square"></span>
                    Friends
                </a>
            </li>
            <li class="divider">
            </li>
            <li>
                <a href="#">
                    + Add Tag
                </a>
            </li>
        </ul>
    </div>
</div>

@section PageScripts{
    <script src="~/assets/js/editors/summernote/summernote.js"></script>
    <script>
        $('#email-text').summernote({ height: $(window).height() - 310 });
    </script>
}