#{param name=sources/}
<div id="outlook-addAttachment" class="ms-Grid">
	<div class="ms-Grid-row text-centered">
		<h4>&{Outlook.command.addAttachment}</h4>
	</div>
	<div id="documentSelector">
		<div class="ms-Grid-row">
			<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
			<div class="ms-Grid-col ms-u-sm10 ms-u-md8 ms-u-lg8">
				<p class="ms-Dialog-subText">&{Outlook.addAttachmentDescription}</p>
			</div>
			<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
		</div>
		<div class="ms-Grid-row">
			<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
			<div class="ms-Grid-col ms-u-sm10 ms-u-md8 ms-u-lg8 ms-TextField">
				<label for="source" class="ms-Label">&{Outlook.documentSource}</label>
				<div class="ms-Dropdown sourceDropdown" tabindex="0">
					<i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
					<select name="source" class="ms-Dropdown-select">
						<%	for(s in sources) { %>
						<option value="${s.id}" data-rootpath="${s.rootPath}">${s.title}</option>
						<%	} %>
					</select>
				</div>
			</div>
			<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
		</div>
		<div class="ms-Grid-row">
			<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
			<div class="ms-Grid-col ms-u-sm10 ms-u-md8 ms-u-lg8 ms-TextField">
				<div class="documentSelectorTabs">
					<button class="ms-Button ms-Button--primary searchTab">
						<span class="ms-Button-label">&{Outlook.documentSearch}</span>
					</button>
					<button class="ms-Button explorerTab" disabled>
						<span class="ms-Button-label">&{Outlook.documentExplorer}</span>
					</button>
				</div>
				<div class="documentSelectorTab documentSearch">
					<form role="form">
						<div class="ms-SearchBox">
							<input class="ms-SearchBox-field" autofocus="autofocus">
							<label class="ms-SearchBox-label">
								<i class="ms-SearchBox-icon ms-Icon ms-Icon--search"></i>&{Outlook.searchName}
							</label>
							<button class="ms-SearchBox-closeButton">
								<i class="ms-Icon ms-Icon--x"></i>
							</button>
						</div>
					</form>
					<div class="documentSelectorContent ms-borderColor-themeTertiary">
						<ul class="ms-List documentSearchResults">
						</ul>
					</div>
				</div>
				<div class="documentSelectorTab documentExplorer" style="display: none;">
					<ul class="ms-List currentFolder">
						<li class="ms-ListItem">
							<div class="ms-TextField ms-ListItem-primaryText">
								<input class="ms-TextField-field pathInfo" type="text" style="font-size: 14px !important;" readonly>
							</div>
							<div class="ms-ListItem-actions pathControls">
								<span class="ms-ListItem-action pathUp" title="&{Outlook.pathUpDescription}">
									<i class="ms-Icon ms-Icon--arrowUp"></i>
								</span>
								<span class="ms-ListItem-action pathOpen" title="&{Outlook.pathOpenDescription}">
									<i class="ms-Icon ms-Icon--arrowUpRight"></i>
								</span>
							</div>
						</li>
					</ul>
					<div class="documentSelectorContent ms-borderColor-themeTertiary">
						<ul class="ms-List folderFiles">
						</ul>
					</div>
				</div>
			</div>
			<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
		</div>
	</div>

	<div id="attach">
		<form role="form">
			<div class="ms-Grid-row">
				<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
				<div class="ms-Grid-col ms-u-sm10 ms-u-md8 ms-u-lg8 ms-TextField">
					<label for="documentPaths" class="ms-Label">&{Outlook.attachingDocuments}</label>
					<ul class="ms-List documents"></ul>
					<span class="ms-TextField-description">&{Outlook.attachingDocumentsDescription}</span>
				</div>
				<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
			</div>
			<div class="ms-Grid-row">
				<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
				<div class="ms-Grid-col ms-u-sm10 ms-u-md8 ms-u-lg8 centered">
					<button class="ms-Button ms-Button--primary attachButton" disabled>
						<span class="ms-Button-label">&{Outlook.attach}</span>
					</button>
					<button class="ms-Button cancelButton">
						<span class="ms-Button-label">&{Outlook.cancel}</span>
					</button>
				</div>
				<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
			</div>
		</form>
	</div>

	<div id="attaching" class="ms-Grid-row centered" style="display: none;">
		<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
		<div class="ms-Grid-col ms-u-sm8 text-centered">
			<div>&{Outlook.addingAttachment}</div>
			<div class="ms-Spinner" style="display: inline-block;"></div>
		</div>
		<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
	</div>
	<div id="attached" class="ms-Grid-row" style="display: none;">
		<div class="ms-Grid-row">
			<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
			<div class="ms-Grid-col ms-u-sm10 ms-u-md8 ms-u-lg8">
				<p class="ms-Dialog-subText attachedAllMessage">&{Outlook.addedAttachment}</p>
				<p class="ms-Dialog-subText attachedSomeMessage" style="display: none;">&{Outlook.addedPartiallyAttachment}</p>
			</div>
			<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
		</div>
		<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
		<div class="ms-Grid-col ms-u-sm10 ms-u-md8 ms-u-lg8">
			<div class="attachedInfo">
				<ul class="ms-List documents"></ul>
			</div>
		</div>
		<div class="ms-Grid-col ms-u-sm1 ms-u-md2 ms-u-lg2"></div>
	</div>
</div>


