<div class="modal fade">
	<div class="modal-header b-header-toolbar g-ui-user-select-none">

		<button type="button" class="close" data-bind="command: cancelCommand">×</button>

		<div class="btn-toolbar">

			<a class="btn button-create-contact" data-bind="command: newCommand">
				<i class="fontastic">✚</i>
				<span data-i18n="CONTACTS/BUTTON_ADD_CONTACT"></span>
			</a>

			<a class="btn btn-success button-new-message fontastic" data-bind="command: newMessageCommand">✉</a>

			<a class="btn button-delete fontastic" data-bind="command: deleteCommand">🗑</a>

			<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, visible: !contacts.importing() && !contacts.syncing()">
				<a id="contacts-more-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-toggle="dropdown">☰</a>
				<ul class="dropdown-menu g-ui-menu right-edge" role="menu" aria-labelledby="contacts-more-dropdown-id">
					<li class="e-item" role="presentation">
						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="initDom: importUploaderButton">
							<i data-bind="css: {'icon-import': !contacts.importing(), 'icon-spinner': contacts.importing}"></i>
							<span data-i18n="CONTACTS/BUTTON_IMPORT"></span>
						</a>
					</li>
					<li class="e-item dividerbar" role="presentation">
						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: exportCsv">
							<i class="icon-export"></i>
							<span data-i18n="CONTACTS/BUTTON_EXPORT_CSV"></span>
						</a>
					</li>
					<li class="e-item" role="presentation">
						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: exportVcf">
							<i class="icon-export"></i>
							<span data-i18n="CONTACTS/BUTTON_EXPORT_VCARD"></span>
						</a>
					</li>
					<li class="e-item dividerbar" role="presentation" data-bind="visible: enableContactsSync() && allowContactsSync()">
						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: syncCommand">
							<i class="fontastic" data-bind="css: {'icon-spinner': contacts.syncing}">⇆</i>
							<span data-i18n="CONTACTS/BUTTON_SYNC"></span>
						</a>
					</li>
				</ul>
			</div>
			<span data-bind="visible: contacts.importing() || contacts.syncing()" class="btn"><i class="icon-spinner"></i></span>
		</div>
	</div>
	<div class="modal-body">
		<div class="b-list-toolbar">
			<input type="search" class="e-search" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: search" />
		</div>
		<div class="b-list-content g-ui-user-select-none" data-bind="css: {'hideContactListCheckbox': !useCheckboxesInList()}">
			<div class="content">
				<div class="listClear" data-bind="visible: viewClearSearch() && '' !== search()">
					<span class="g-ui-link" data-i18n="CONTACTS/CLEAR_SEARCH" data-bind="command: clearCommand"></span>
				</div>
				<div class="listEmptyList" data-bind="visible: 0 === contacts().length && '' === search() && !contacts.loading()"
					data-i18n="CONTACTS/EMPTY_LIST"></div>
				<div class="listEmptyListLoading" data-bind="visible: 0 === contacts().length && '' === search() && contacts.loading()">
					<i class="icon-spinner"></i>
					<span data-i18n="GLOBAL/LOADING"></span>
				</div>
				<div class="listEmptySearchList" data-bind="visible: 0 === contacts().length && '' !== search() && !contacts.loading()"
					data-i18n="CONTACTS/EMPTY_SEARCH"></div>
				<div class="e-contact-foreach g-ui-user-select-none" data-bind="foreach: contacts, visible: 0 < contacts().length">
					<div class="e-contact-item g-ui-user-select-none" data-bind="css: lineAsCss()">
						<div class="checkboxItem fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
						<div class="nameParent actionHandle" data-bind="text: display"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="b-list-footer-toolbar thm-message-list-bottom-toolbar">
			<div class="footer-pager">
				<!-- ko template: { name: 'Paginator', data: contactsPaginator } --><!-- /ko -->
			</div>
		</div>
		<div class="b-view-content-toolbar btn-toolbar" data-bind="css: {'read-only': viewReadOnly}">
			<div class="btn-group">
				<button class="btn button-save-contact" data-bind="visible: !emptySelection(), command: saveCommand, css: {'dirty': watchDirty}">
					<i data-bind="css: {'icon-ok': !viewSaving(), 'icon-spinner': viewSaving()}"></i>
					<span data-i18n="CONTACTS/BUTTON_CREATE_CONTACT" data-bind="visible: '' === viewID()"></span>
					<span data-i18n="CONTACTS/BUTTON_UPDATE_CONTACT" data-bind="visible: '' !== viewID()"></span>
				</button>
			</div>
			<div class="btn-group dropdown colored-toggle button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
				<a id="button-add-prop-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle" data-toggle="dropdown">
					<span data-i18n="CONTACTS/ADD_MENU_LABEL"></span>
					<span class="caret"></span>
				</a>
				<ul class="dropdown-menu g-ui-menu right-edge" style="text-align: left" tabindex="-1" role="menu" aria-labelledby="button-add-prop-dropdown-id">
					<li class="e-item" role="presentation">
						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewEmail">
							<i class="icon-none"></i>
							<span data-i18n="GLOBAL/EMAIL"></span>
						</a>
					</li>
					<li class="e-item" role="presentation">
						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewPhone">
							<i class="icon-none"></i>
							<span data-i18n="CONTACTS/ADD_MENU_PHONE"></span>
						</a>
					</li>
					<li class="e-item" role="presentation">
						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewWeb">
							<i class="icon-none"></i>
							<span data-i18n="CONTACTS/ADD_MENU_URL"></span>
						</a>
					</li>
					<li class="e-item dividerbar" role="presentation">
						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewNickname">
							<i class="icon-none"></i>
							<span data-i18n="CONTACTS/ADD_MENU_NICKNAME"></span>
						</a>
					</li>
<!--									<li class="e-item" role="presentation">
						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: addNewAddress">
							<span data-i18n="CONTACTS/ADD_MENU_ADDRESS"></span>
						</a>
					</li>-->
				</ul>
			</div>
		</div>
		<div class="b-view-content" data-bind="css: {'read-only': viewReadOnly}">
			<div class="b-contact-view-desc" data-bind="visible: emptySelection"
				data-i18n="CONTACTS/CONTACT_VIEW_DESC"></div>
			<div data-bind="visible: !emptySelection()">
				<div class="form-horizontal top-part">
					<div class="control-group" data-bind="visible: !viewReadOnly() || contactHasValidName()">
						<label class="control-label fontastic iconsize24">👤</label>
						<div class="controls">
							<div data-bind="foreach: viewPropertiesNames">
								<div class="property-line">
									<span data-bind="text: value"></span>
									<input type="text"
										autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
										data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup', attr: {'placeholder': placeholderValue}" />
								</div>
							</div>
							<div data-bind="visible: 0 < viewPropertiesOther().length, foreach: viewPropertiesOther">
								<div class="property-line">
									<!-- ko if: !largeValue() -->
									<span data-bind="text: value"></span>
									<input type="text"
										autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
										data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup', attr: {'placeholder': placeholderValue}" />
									<!-- /ko -->
									<!-- ko if: largeValue -->
									<span data-bind="text: value"></span>
									<textarea
										autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
										data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup', attr: {'placeholder': placeholderValue}"></textarea>
									<!-- /ko -->
								</div>
							</div>
						</div>
					</div>
					<div class="control-group" data-bind="visible: !viewReadOnly() || 0 < viewPropertiesEmails().length">
						<label class="control-label fontastic iconsize24" data-i18n="[title]GLOBAL/EMAIL">@</label>
						<div class="controls">
							<div data-bind="foreach: viewPropertiesEmails">
								<div class="property-line">
									<span data-bind="text: value"></span>
									<input type="text"
										autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
										data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup'" />
								</div>
							</div>
							<a href="#" class="g-ui-link add-link" data-bind="visible: !viewReadOnly(), click: addNewEmail" data-i18n="CONTACTS/LINK_ADD_EMAIL"></a>
						</div>
					</div>
					<div class="control-group" data-bind="visible: 0 < viewPropertiesPhones().length">
						<label class="control-label fontastic iconsize24" data-i18n="[title]CONTACTS/LABEL_PHONE">📞</label>
						<div class="controls">
							<div data-bind="foreach: viewPropertiesPhones">
								<div class="property-line">
									<span data-bind="text: value"></span>
									<input type="text"
										autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
										data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup'" />
								</div>
							</div>
						</div>
					</div>
					<div class="control-group" data-bind="visible: 0 < viewPropertiesWeb().length">
						<label class="control-label fontastic iconsize24" data-i18n="[title]CONTACTS/LABEL_WEB">🌍</label>
						<div class="controls">
							<div data-bind="foreach: viewPropertiesWeb">
								<div class="property-line">
									<span data-bind="text: value"></span>
									<input type="text" placeholder="https://"
										autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
										data-bind="value: value, hasfocus: focused, valueUpdate: 'keyup'" />
								</div>
							</div>
						</div>
					</div>
				</div>
<!--
				<div class="e-read-only-sign fontastic iconsize24" data-i18n="[title]CONTACTS/LABEL_READ_ONLY">🔒</div>
-->
			</div>
		</div>
	</div>
</div>
