<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title data-resource-title="MailingFoldersHeaderTitle"></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.Folders.App.js" defer></script>
</head>
<body>
<div id="header-wrapper">
    <div id="header">
        <div id="header-title" data-resource-text="MailingFoldersHeaderTitle"></div>
        <div id="header-description" data-resource-text="MailingFoldersHeaderDescription"></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="folder-information">
            <div class="text-row text-header" data-resource-text="MailingFoldersContentsHeader"></div>
            <div class="text-row-content">
                <div class="text-row text-row-header" data-resource-text="MailingFoldersContentsFolderName"></div>
                <div class="text-row">
                    <input id="folderNameTxt" type="text" class="input-lg"/>
                </div>
            </div>
        </div>

        <div id="resizable-area" style="height: calc(100% - 240px); min-height: 350px; width: 100%;">
            <div style="height: 50%; text-align: center; vertical-align: middle; width: 100%;">
                <div class="text-row" style="height: 100%; vertical-align: middle; width: calc(50% - 45px);">
                    <div class="text-header text-row-content" data-resource-text="MailingFoldersContentsAvailableTemplates"></div>
                    <div style="height: calc(100% - 25px); width: 100%;">
                        <select id="availableTemplatesSelector" multiple="multiple" style="height: 100%; overflow: auto; width: 100%;"></select>
                    </div>
                </div>

                <div class="text-row" style="vertical-align: middle;">
                    <div style="vertical-align: top; width: 100%;">
                        <input id="addTemplateBtn" type="button" value="Add" data-resource-text="MailingFoldersContentsAddButton">
                    </div>
                    <div style="width: 100%;">
                        <input id="removeTemplateBtn" type="button" value="Remove" data-resource-text="MailingFoldersContentsRemoveButton">
                    </div>
                </div>

                <div class="text-row" style="height: 100%; vertical-align: middle; width: calc(50% - 45px);">
                    <div class="text-header text-row-content" data-resource-text="MailingFoldersContentsSelectedTemplates"></div>
                    <div style="height: calc(100% - 25px); width: 100%;">
                        <select id="selectedTemplatesSelector" multiple="multiple" style="height: 100%; overflow: auto; width: 100%;"></select>
                    </div>
                </div>
            </div>

            <div id="folder-options">
                <div class="text-row text-header" data-resource-text="MailingFoldersContentsOptionsHeader"></div>
                <div class="text-row-content">
                    <div class="text-row text-row-header">
                        <input name="folderAccessType" id="accessOptionGlobal" type="radio" value="global" style="vertical-align: middle;">
                        <label class="label-pointer" for="accessOptionGlobal" data-resource-text="MailingFoldersContentsAccessOptionGlobally" style="vertical-align: middle;"></label>
                    </div>
                </div>
                <div class="text-row-content">
                    <div class="text-row text-row-header">
                        <input name="folderAccessType" id="accessOptionHidden" type="radio" value="hidden" style="vertical-align: middle;">
                        <label class="label-pointer" for="accessOptionHidden" data-resource-text="MailingFoldersContentsAccessOptionHidden" style="vertical-align: middle;"></label>
                    </div>
                </div>
                <div class="text-row-content">
                    <div class="text-row text-row-header">
                        <input name="folderAccessType" id="accessOptionCustom" type="radio" value="custom" style="vertical-align: middle;">
                        <label class="label-pointer" for="accessOptionCustom" data-resource-text="MailingFoldersContentsAccessOptionCustomUsers" style="vertical-align: middle;"></label>
                    </div>
                </div>
            </div>

            <div id="folder-search">
                <div class="text-row text-header" data-resource-text="MailingFoldersContentsSearch"></div>
                <div class="text-row-content">
                    <div class="text-row text-row-header" data-resource-text="MailingFoldersContentsAreaName"></div>
                    <div class="text-row">
                        <select class="input-lg" id="customAccessTypeSelector">
                            <option value="user" data-resource-text="MailingFoldersContentsAccessTypeUsers">Users</option>
                            <option value="role" data-resource-text="MailingFoldersContentsAccessTypeRoles">Roles</option>
                        </select>
                    </div>
                </div>

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

                <div id="business-unit-area">
                    <div class="text-row-content">
                        <div class="text-row text-row-header" data-resource-text="MailingFoldersContentsBusinessUnit"></div>
                        <div class="text-row">
                            <select class="input-lg" id="businessUnitsSelector"></select>
                        </div>
                    </div>
                </div>
            </div>

            <div style="height: 50%; text-align: center; vertical-align: middle; width: 100%;">
                <div class="text-row" style="height: 100%; vertical-align: middle; width: calc(50% - 45px);">
                    <div class="text-header text-row-content">
                        <span data-resource-text="MailingFoldersContentsAvailableForSharing"></span>
                        <span id="availableCustomSecurityItemType"></span>
                    </div>
                    <div style="height: calc(100% - 25px); width: 100%;">
                        <select id="availableCustomSecurityItemsSelector" size="15" multiple="multiple" style="height: 100%; overflow: auto; width: 100%;"></select>
                    </div>
                </div>

                <div class="text-row" style="vertical-align: middle;">
                    <div style="width: 100%;">
                        <input id="addCustomSecurityItemBtn" type="button" value="Add" data-resource-text="MailingFoldersContentsAddButton">
                    </div>
                    <div style="width: 100%;">
                        <input id="removeCustomSecurityItemBtn" type="button" value="Remove" data-resource-text="MailingFoldersContentsRemoveButton">
                    </div>
                </div>

                <div class="text-row" style="height: 100%; vertical-align: middle; width: calc(50% - 45px);">
                    <div class="text-header text-row-content">
                        <span data-resource-text="MailingFoldersContentsShared"></span>
                        <span id="selectedCustomSecurityItemType"></span>
                    </div>
                    <div style="height: calc(100% - 25px); width: 100%;">
                        <select id="selectedCustomSecurityItemsSelector" multiple="multiple" style="height: 100%; overflow: auto; width: 100%;"></select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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