<div class="panel_top">
	<h2 class="contacts_heading" data-bind="visible: !edited() && !isNew(), i18n: {'key': '%MODULENAME%/HEADING_VIEW_CONTACT'}"></h2>
	<h2 class="contacts_heading" data-bind="visible: edited() && !isNew(), i18n: {'key': '%MODULENAME%/HEADING_EDIT_CONTACT'}"></h2>
	<h2 class="contacts_heading" data-bind="visible: isNew(), i18n: {'key': '%MODULENAME%/HEADING_NEW_CONTACT'}"></h2>
</div>
<div class="decor"></div>
<div class="panel_center" data-bind="customScrollbar: {x: false}">
	<div class="contact_content scroll-inner">
		<div class="contact_data_groups edit">
			<div class="fields clearfix" data-bind="visible: !extented()">
				<div class="row">
					<span class="label">
						<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_DISPLAY_NAME'}"></span>:
					</span>
					<input class="value input" type="text" data-test-id="contacts-edit-name" data-bind="value: displayName, hasfocus: displayNameFocused, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" id="selenium_contacts_edit_name" />
				</div>
				<div class="row" data-bind="visible: !itsMe()">
					<span class="label">
						<span class="text" data-bind="i18n: {'key': 'COREWEBCLIENT/LABEL_EMAIL'}"></span>:
					</span>
					<input class="value input" type="text" data-test-id="contacts-edit-email" data-bind="value: email, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" id="selenium_contacts_edit_email" />
				</div>
				<div class="row" data-bind="visible: itsMe()">
					<span class="label">
						<span class="text" data-bind="i18n: {'key': 'COREWEBCLIENT/LABEL_EMAIL'}"></span>:
					</span>
					<span class="value" data-bind="text: email"></span>
				</div>
				<div class="row">
					<span class="label">
						<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_PHONE'}"></span>:
					</span>
					<input class="value input" type="text" data-test-id="contacts-edit-phone" data-bind="value: phone, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row">
					<span class="label">
						<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ADDRESS'}"></span>:
					</span>
					<input class="value input" type="text" data-test-id="contacts-edit-address" data-bind="value: address, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row">
					<span class="label">
						<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SKYPE'}"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: skype, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row">
					<span class="label">
						<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FACEBOOK'}"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: facebook, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>

				<div class="clear"></div>
				<div class="fields_switcher">
					<span class="link" data-bind="i18n: {'key': '%MODULENAME%/ACTION_SHOW_ADDITIONAL_FIELDS'}, click: function () { extented(true); }"></span>
				</div>
			</div>

			<div class="fields" data-bind="visible: extented()">
				<div class="fieldset">
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_DISPLAY_NAME'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: displayName, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': 'COREWEBCLIENT/LABEL_EMAIL'}"></span>:
						</span>
						<span class="value" data-bind="visible: 0 === emails().length">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NOT_SPECIFIED_YET'}"></span>
						</span>
						<span class="value" data-bind="visible: 0 < emails().length">
							<select class="input" data-bind="options: emails, optionsText: 'text', optionsValue: 'value', value: mainPrimaryEmail"></select>
						</span>
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_PHONE'}"></span>:
						</span>
						<span class="value" data-bind="visible: 0 === phones().length">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NOT_SPECIFIED_YET'}"></span>
						</span>
						<span class="value" data-bind="visible: 0 < phones().length">
							<select data-bind="options: phones, optionsText: 'text', optionsValue: 'value', value: mainPrimaryPhone"></select>
						</span>
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ADDRESS'}"></span>:
						</span>
						<span class="value" data-bind="visible: 0 === addresses().length">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NOT_SPECIFIED_YET'}"></span>
						</span>
						<span class="value" data-bind="visible: 0 < addresses().length">
							<select data-bind="options: addresses, optionsText: 'text', optionsValue: 'value', value: mainPrimaryAddress"></select>
						</span>
					</div>
					<div class="row">
					<span class="label">
						<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SKYPE'}"></span>:
					</span>
						<input class="value input" type="text" data-bind="value: skype, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
					<span class="label">
						<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FACEBOOK'}"></span>:
					</span>
						<input class="value input" type="text" data-bind="value: facebook, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
				</div>

				<div class="clear"></div>

				<div class="fields_switcher">
					<span class="link" data-bind="i18n: {'key': '%MODULENAME%/ACTION_HIDE_ADDITIONAL_FIELDS'}, click: function () { extented(false); }"></span>
				</div>

				<div class="fieldset" data-bind="css: {'collapsed': personalCollapsed}">

					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FIRST_NAME'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: firstName, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_LAST_NAME'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: lastName, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NICK_NAME'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: nickName, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>

					<h2 class="subheading" data-bind="i18n: {'key': '%MODULENAME%/HEADING_HOME'}, click: function () { personalCollapsed(!personalCollapsed()); }"></h2>
					
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_PERSONAL_EMAIL'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: personalEmail, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row textarea">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_STREET_ADDRESS'}"></span>:
						</span>
						<textarea class="value input" data-bind="value: personalStreetAddress, valueUpdate: 'afterkeydown'"></textarea>
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_CITY'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: personalCity, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_STATE_PROVINCE'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: personalState, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ZIP_CODE'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: personalZipCode, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_COUNTRY_REGION'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: personalCountry, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_WEB_PAGE'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: personalWeb, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FAX'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: personalFax, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_PHONE'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: personalPhone, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_MOBILE'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: personalMobile, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
				</div>

				<div class="fieldset" data-bind="css: {'collapsed': businessCollapsed}">

					<h2 class="subheading" data-bind="i18n: {'key': '%MODULENAME%/HEADING_BUSINESS'}, click: function () { businessCollapsed(!businessCollapsed()); }"></h2>

					<div class="row" data-bind="visible: !itsMe()">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_BUSINESS_EMAIL'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: businessEmail, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row" data-bind="visible: itsMe()">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_BUSINESS_EMAIL'}"></span>:
						</span>
						<span class="value" data-bind="text: businessEmail"></span>
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_COMPANY'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: businessCompany, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_DEPARTMENT'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: businessDepartment, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_JOB_TITLE'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: businessJob, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_OFFICE'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: businessOffice, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row textarea">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_STREET_ADDRESS'}"></span>:
						</span>
						<textarea class="value input" data-bind="value: businessStreetAddress, valueUpdate: 'afterkeydown'"></textarea>
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_CITY'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: businessCity, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_STATE_PROVINCE'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: businessState, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ZIP_CODE'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: businessZipCode, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_COUNTRY_REGION'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: businessCountry, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_WEB_PAGE'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: businessWeb, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FAX'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: businessFax, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_PHONE'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: businessPhone, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
				</div>

				<div class="fieldset" data-bind="css: {'collapsed': otherCollapsed}">

					<h2 class="subheading" data-bind="i18n: {'key': '%MODULENAME%/HEADING_OTHER'}, click: function () { otherCollapsed(!otherCollapsed()); }"></h2>

					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_BIRTHDAY'}"></span>:
						</span>
						<span class="value">
							<select class="input" style="width: auto" data-bind="options: birthMonthSelect, optionsText: 'text', optionsValue: 'value', value: otherBirthMonth"></select>
							<select class="input" style="width: auto" data-bind="options: birthDaySelect, optionsText: 'text', optionsValue: 'value', value: otherBirthDay"></select>
							<select class="input" style="width: auto" data-bind="options: birthYearSelect, optionsText: 'text', optionsValue: 'value', value: otherBirthYear"></select>
						</span>
					</div>
					<div class="row">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_OTHER_EMAIL'}"></span>:
						</span>
						<input class="value input" type="text" data-bind="value: otherEmail, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
					</div>
					<div class="row textarea">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NOTES'}"></span>:
						</span>
						<textarea class="value input" data-bind="value: otherNotes, valueUpdate: 'afterkeydown'"></textarea>
					</div>
				</div>

				<div class="fieldset" data-bind="css: {'collapsed': pgpSettingsCollapsed}, if: isOpenPgpEnabled">

					<h2 class="subheading" data-bind="i18n: {'key': '%MODULENAME%/HEADING_PGP_SETTINGS'}, click: function () { pgpSettingsCollapsed(!pgpSettingsCollapsed()); }"></h2>
					<div class="row" data-bind="visible: publicPgpKeyView">
						<span class="label">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_PUBLIC_PGP_KEY'}"></span>:
						</span>
						<span class="value">
							<span data-bind="text: publicPgpKeyView"></span>
							<!-- ko if: $root.oPgpKeyControlsView -->
								<!-- ko template: { name: $root.oPgpKeyControlsView.ViewTemplate, data: $root.oPgpKeyControlsView} --><!-- /ko -->
							<!-- /ko -->
						</span>
					</div>
					<div class="row buttons buttons_inline" data-bind="visible: !publicPgpKeyView()">
						<span class="button contour_button" data-bind="click: $root.addPublicPgpKey.bind($root)">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/ACTION_ADD_PUBLIC_PGP_KEY'}"></span>
						</span>
					</div>

					<!-- ko if: showEncryptSignFlags -->
						<div class="row">
							<span data-bind="i18n: {'key': '%MODULENAME%/INFO_ENCRYPT_SIGN_MESSAGES'}"></span>
						</div>
						<div class="row">
							<span class="label">
								<label class="custom_checkbox" data-bind="css: {'checked': pgpEncryptMessages}">
									<span class="icon"></span>
									<input type="checkbox" id="pgpEncryptMessages" data-bind="checked: pgpEncryptMessages" />
								</label>
								<label for="pgpEncryptMessages" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ENCRYPT_MESSAGES'}"></label>
							</span>
						</div>
						<div class="row">
							<span class="label">
								<label class="custom_checkbox" data-bind="css: {'checked': pgpSignMessages}">
									<span class="icon"></span>
									<input type="checkbox" id="pgpSignMessages" data-bind="checked: pgpSignMessages" />
								</label>
								<label for="pgpSignMessages" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SIGN_MESSAGES'}"></label>
							</span>
						</div>
					<!-- /ko -->
				</div>

				<div class="fieldset" data-bind="visible: !team() && $root.groupFullCollection().length, css: {'collapsed': groupsCollapsed}">

					<h2 class="subheading" data-bind="i18n: {'key': '%MODULENAME%/HEADING_GROUPS'}, click: function () { groupsCollapsed(!groupsCollapsed()); }"></h2>

					<div class="hint" data-bind="i18n: {'key': '%MODULENAME%/INFO_CONTACT_GROUPS_MARKED'}"></div>
					<div class="row">
						<div class="value" data-bind="foreach: $root.groupFullCollection()"><span
							data-bind="visible: $index() !== 0">,</span>
						<label class="custom_checkbox" data-bind="css: {'checked': checked}">
							<span class="icon"></span>
							<input type="checkbox" data-bind="checked: checked, attr: {'id': 'group'+$index()}" />
						</label>
						<label data-bind="attr: {'for': 'group'+$index()}">
							<span data-bind="text: Name()"></span>
						</label>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="panel_bottom">
	<div class="buttons">
		<span class="button" data-test-id="contacts-edit-save" data-bind="command: $root.saveCommand, visible: !$root.isSaving()">
			<span class="text" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_SAVE'}"></span>
		</span>
		<span class="button" data-bind="visible: $root.isSaving">
			<span class="text" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_SAVE_IN_PROGRESS'}"></span>
		</span>
		<span class="button secondary_button" data-bind="click: function () { $root.executeCancel(); }">
			<span class="text" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_CANCEL'}"></span>
		</span>
	</div>
</div>
