<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=11">
    <meta charset="utf-8"/>
    <link href="../../Css/SP.JQuery.UI.css" rel="stylesheet" type="text/css"/>
    <link href="../../Css/SP.Styles.css" rel="stylesheet" type="text/css"/>
    <script src="../../Js/Email/SP.Email.Wizard.App.js" defer></script>
</head>
<body>
<div id="header-wrapper">
    <div id="header">
        <div id="header-title"></div>
        <div id="header-description"></div>
    </div>
</div>

<div id="content-wrapper">
    <div id="spinner">
        <img id="spinner-image" src="../../Img/SP.Notification.Progress.gif" alt=""/>
        <div id="spinner-header" data-resource-text="CommonInfoProgressBarLoadingText"></div>
        <div id="spinner-body"></div>
    </div>

    <div id="content">
        <div id="definition-information">
            <div class="text-row text-header" data-resource-text="SendMailWizardContentsHeaderDefinition"></div>

            <div class="text-row-content">
                <div class="text-row text-row-header" data-resource-text="SendMailWizardContentsDefinitionName">
                </div>
                <div class="text-row">
                    <input id="definitionTxt" type="text" class="input-lg" maxlength="100">
                </div>
            </div>
        </div>

        <div id="message-information">
            <div class="text-row text-header" data-resource-text="SendMailWizardContentsHeader"></div>

            <div class="text-row-content">
                <div class="text-row text-row-header" data-resource-text="SendMailWizardContentsFolder">
                </div>
                <div class="text-row">
                    <select id="foldersSelector" class="input-lg"></select>
                </div>
            </div>

            <div class="text-row-content">
                <div class="text-row text-row-header" data-resource-text="SendMailWizardContentsEmailTemplate">
                </div>
                <div class="text-row">
                    <select id="templatesSelector" class="input-lg"></select>
                </div>
            </div>

            <div class="text-row-content">
                <div class="text-row text-row-header" data-resource-text="SendMailWizardContentsSubjectTemplate">
                </div>
                <div class="text-row">
                    <input id="subjectTxt" type="text" class="input-lg"/>
                </div>
            </div>

            <div class="text-row-content">
                <div class="text-row text-row-header">
                </div>
                <div class="text-row">
                    <select id="subjectPersonalizationSelector" class="input-lg"></select>
                    <input id="subjectPersonalizationButton" type="button" value="" style="width: 140px;" data-resource-text="SendMailWizardContentsPersonalizationButton"/>
                </div>
            </div>

            <div class="text-row-content">
                <div class="text-row text-row-header" data-resource-text="SendMailWizardContentsFromName">
                </div>
                <div class="text-row">
                    <input class="input-lg" id="fromNameTxt" type="text">
                </div>
            </div>

            <div class="text-row-content">
                <div class="text-row text-row-header" data-resource-text="SendMailWizardContentsFromAddress">
                </div>
                <div class="text-row">
                    <input class="input-lg" id="fromAddressTxt" type="text">
                </div>
            </div>

            <div class="text-row-content">
                <div class="text-row text-row-header" data-resource-text="SendMailWizardContentsReplyToAddress">
                </div>
                <div class="text-row">
                    <input class="input-lg" id="replyToAddressName" type="text">
                </div>
            </div>
        </div>

        <div id="resizable-area" style="height: calc(100% - 330px); min-height: 200px;">
            <div id="personal-information" style="display: block; height: 50%;">
                <div class="text-row text-header" data-resource-text="SendMailWizardContentsPersonal"></div>

                <div class="text-row-content" style="height: calc(100% - 50px);">
                    <div class="text-row" style="height: 100%; width: 100%;">
                        <textarea style="height: 100%; overflow: auto; resize: none; width: 100%;" id="personalInfoTxt"></textarea>
                    </div>
                </div>

                <div class="text-row-content">
                    <div class="text-row text-row-header">
                    </div>
                    <div class="text-row">
                        <select id="bodyPersonalizationSelector" class="input-lg"></select>
                        <input id="bodyPersonalizationButton" type="button" value="" style="width: 140px;" data-resource-text="SendMailWizardContentsPersonalizationButton"/>
                    </div>
                </div>
            </div>

            <div id="email-information" style="display: block; height: 50%;">
                <div class="text-row text-header" data-resource-text="SendMailWizardContentsTemplatePreview"></div>

                <div class="text-row-content" style="height: calc(100% - 45px);">
                    <div id="email-preview-wrapper" class="text-row" style="height: 100%; width: 100%;">
                        <iframe style="background-color: #FFFFFF; border: 1px solid #666; height: 100%; overflow: auto; width: 100%;"></iframe>
                    </div>
                </div>

                <div class="text-row-content">
                    <div style="text-align: right; width: 100%;">
                        <div id="preview-resize" class="text-row">
                            <a href="#">
                                <img id="preview-resize-image" src="../../Img/SP.Button.Maximize.Preview.png" alt=""/>
                            </a>
                        </div>
                        <div id="preview-refresh" class="text-row">
                            <a href="#">
                                <img src="../../Img/SP.Button.Refresh.png" alt=""/>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="send-information">
            <div class="text-row-content">
                <div class="text-row text-header" style="min-width: 150px;" data-resource-text="SendMailWizardContentsSendOptions"></div>
                <div class="text-row">
                    <div>
                        <select id="sendOptionsSelector" class="input-sm">
                            <option value="now" data-resource-text="SendMailWizardContentsSendOptionsNow"></option>
                            <option value="scheduled" data-resource-text="SendMailWizardContentsSendOptionsScheduled"></option>
                        </select>

                        <div id="recipients-length-area" class="text-row">
                            <span data-resource-text="SendMailWizardContentsRecipientsCountStart"></span>
                            <span id="recipients-length">0</span>
                            <span data-resource-text="SendMailWizardContentsRecipientsCountEnd"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div id="scheduled-date-area">
                <div class="text-row-content">
                    <div class="text-row text-row-header"></div>
                    <div class="text-row" data-resource-text="SendMailWizardContentsDateTime"></div>
                </div>

                <div class="text-row-content">
                    <div class="text-row text-row-header"></div>
                    <div class="text-row">
                        <span data-resource-text="SendMailWizardContentsStartDate"></span>
                        <input id="dateInput" type="text" maxlength="10"/>
                        <span data-resource-text="SendMailWizardContentsDateFormat"></span>
                    </div>
                </div>

                <div class="text-row-content">
                    <div class="text-row text-row-header"></div>
                    <div class="text-row">
                        <span data-resource-text="SendMailWizardContentsStartTime"></span>
                        <input id="hourTxt" style="width: 25px;" type="text" maxlength="2">
                        :
                        <input id="minTxt" style="width: 25px;" type="text" maxlength="2">
                        <select id="daytimeSelector" style="width: 45px;">
                            <option value="0" data-resource-text="SendMailWizardContentsDaytimeSelectorAM"></option>
                            <option value="1" data-resource-text="SendMailWizardContentsDaytimeSelectorPM"></option>
                        </select>
                        <span data-resource-text="SendMailWizardContentsTimeFormat"></span>
                    </div>
                </div>

                <div class="text-row-content">
                    <div class="text-row text-row-header"></div>
                    <div class="text-row" style="color: gray; font-size: 10px;">
                        <span id="userTimeZoneName"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="footer-wrapper">
    <div id="footer">
        <input id="sendBtn" type="button" value=""/>
        <input id="cancelBtn" type="button" value="" data-resource-text="SendMailWizardContentsCancelButton"/>
    </div>
</div>
</body>
</html>