<div class="navbar">
	<div class="navbar-inner">
		<div class="left">
			<a href="javascript:void(0)" class="link icon-only back" data-bind="click: function () { $root.executeCancel(); }">
				<i class="icon icon-back"></i>
				<!--_i18n: {'key': 'COREWEBCLIENT/ACTION_CANCEL'}-->
			</a>
		</div>

		<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
		<div class="center sliding" data-bind="visible: !edited() && !isNew(), i18n: {'key': '%MODULENAME%/HEADING_VIEW_CONTACT'}"></div>
		<div class="center sliding" data-bind="visible: edited() && !isNew(), i18n: {'key': '%MODULENAME%/HEADING_EDIT_CONTACT'}"></div>
		<div class="center sliding" data-bind="visible: isNew(), i18n: {'key': '%MODULENAME%/HEADING_NEW_CONTACT'}"></div>

		<div class="right">
			<a href="javascript:void(0)" class="link" data-bind="command: $root.saveCommand">
				<i class="icon"></i>
				<span class="text" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_SAVE'}"></span>
			</a>
		</div>
	</div>
</div>

<div class="page-content">
	<div class="list-block" data-bind="visible: !extented()">
		<ul>
			<li>
				<div class="item-content">
					<div class="item-inner">
						<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_DISPLAY_NAME'}"></div>
						<div class="item-input">
							<input type="text" data-bind="value: displayName, hasfocus: displayNameFocused, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="item-content">
					<div class="item-inner">
						<div class="item-title label" data-bind="i18n: {'key': 'COREWEBCLIENT/LABEL_EMAIL'}"></div>
						<div class="item-input" data-bind="visible: !itsMe()">
							<input type="text" data-bind="value: email, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
						</div>
						<div class="item-input" data-bind="text: email, visible: itsMe()"></div>
					</div>
				</div>
			</li>
			<li>
				<div class="item-content">
					<div class="item-inner">
						<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_PHONE'}"></div>
						<div class="item-input">
							<input type="text" data-bind="value: phone, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="item-content">
					<div class="item-inner">
						<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ADDRESS'}"></div>
						<div class="item-input">
							<input type="text" data-bind="value: address, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="item-content">
					<div class="item-inner">
						<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SKYPE'}"></div>
						<div class="item-input">
							<input type="text" data-bind="value: skype, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="item-content">
					<div class="item-inner">
						<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FACEBOOK'}"></div>
						<div class="item-input">
							<input type="text" data-bind="value: facebook, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
						</div>
					</div>
				</div>
			</li>
		</ul>
		
		<span class="button" data-bind="i18n: {'key': '%MODULENAME%/ACTION_SHOW_ADDITIONAL_FIELDS'}, click: function () { extented(true); }"></span>
	</div>
	
	<div class="list-block" data-bind="visible: extented()">
		<ul>
			<li>
				<div class="item-content">
					<div class="item-inner">
						<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_DISPLAY_NAME'}"></div>
						<div class="item-input">
							<input type="text" data-bind="value: displayName, hasfocus: displayNameFocused, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="item-content">
					<div class="item-inner">
						<div class="item-title label" data-bind="i18n: {'key': 'COREWEBCLIENT/LABEL_EMAIL'}"></div>
						<div class="item-input" data-bind="visible: 0 === emails().length">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NOT_SPECIFIED_YET'}"></span>
						</div>
						<div class="item-input" data-bind="visible: 0 < emails().length">
							<select data-bind="options: emails, optionsText: 'text', optionsValue: 'value', value: mainPrimaryEmail"></select>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="item-content">
					<div class="item-inner">
						<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_PHONE'}"></div>
						<div class="item-input" data-bind="visible: 0 === phones().length">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NOT_SPECIFIED_YET'}"></span>
						</div>
						<div class="item-input" data-bind="visible: 0 < phones().length">
							<select data-bind="options: phones, optionsText: 'text', optionsValue: 'value', value: mainPrimaryPhone"></select>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="item-content">
					<div class="item-inner">
						<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ADDRESS'}"></div>
						<div class="item-input" data-bind="visible: 0 === addresses().length">
							<span class="text" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NOT_SPECIFIED_YET'}"></span>
						</div>
						<div class="item-input" data-bind="visible: 0 < addresses().length">
							<select data-bind="options: addresses, optionsText: 'text', optionsValue: 'value', value: mainPrimaryAddress"></select>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="item-content">
					<div class="item-inner">
						<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SKYPE'}"></div>
						<div class="item-input">
							<input type="text" data-bind="value: skype, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="item-content">
					<div class="item-inner">
						<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FACEBOOK'}"></div>
						<div class="item-input">
							<input type="text" data-bind="value: facebook, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
						</div>
					</div>
				</div>
			</li>
		</ul>
		
		<span class="button" data-bind="i18n: {'key': '%MODULENAME%/ACTION_HIDE_ADDITIONAL_FIELDS'}, click: function () { extented(false); }"></span>
	</div>
	<div class="content-block" data-bind="visible: extented()">
		<div class="list-block">
			<ul>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FIRST_NAME'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: firstName, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_LAST_NAME'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: lastName, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NICK_NAME'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: nickName, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	
	
		<div class="content-block-title" data-bind="i18n: {'key': '%MODULENAME%/HEADING_HOME'}, click: function () { personalCollapsed(!personalCollapsed()); }"></div>
	
	
		<div class="list-block accordion-item" data-bind="css: {'accordion-item-expanded': !personalCollapsed()}">
			<ul class="accordion-item-content">
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_PERSONAL_EMAIL'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: personalEmail, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_STREET_ADDRESS'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: personalStreetAddress, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_CITY'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: personalCity, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_STATE_PROVINCE'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: personalState, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ZIP_CODE'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: personalZipCode, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_COUNTRY_REGION'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: personalCountry, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_WEB_PAGE'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: personalWeb, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FAX'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: personalFax, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_PHONE'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: personalPhone, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_MOBILE'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: personalMobile, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
					
		<div class="content-block-title" data-bind="i18n: {'key': '%MODULENAME%/HEADING_BUSINESS'}, click: function () { businessCollapsed(!businessCollapsed()); }"></div>
		<div class="list-block accordion-item" data-bind="css: {'accordion-item-expanded': !businessCollapsed()}">
			<ul class="accordion-item-content">
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_BUSINESS_EMAIL'}"></div>
							<div class="item-input" data-bind="visible: !itsMe()">
								<input type="text" data-bind="value: businessEmail, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
							<div class="item-input" data-bind="text: businessEmail, visible: itsMe()"></div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_COMPANY'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: businessCompany, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_DEPARTMENT'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: businessDepartment, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_JOB_TITLE'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: businessJob, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_OFFICE'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: businessOffice, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_STREET_ADDRESS'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: businessStreetAddress, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_CITY'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: businessCity, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_STATE_PROVINCE'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: businessState, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ZIP_CODE'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: businessZipCode, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_COUNTRY_REGION'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: businessCountry, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_WEB_PAGE'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: businessWeb, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FAX'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: businessFax, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_PHONE'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: businessPhone, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	
		<div class="content-block-title" data-bind="i18n: {'key': '%MODULENAME%/HEADING_OTHER'}, click: function () { otherCollapsed(!otherCollapsed()); }"></div>
		<div class="list-block accordion-item" data-bind="css: {'accordion-item-expanded': !otherCollapsed()}">
			<ul class="accordion-item-content">
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_BIRTHDAY'}"></div>
							<div class="item-input">
								<select data-bind="options: birthMonthSelect, optionsText: 'text', optionsValue: 'value', value: otherBirthMonth"></select>
								<select data-bind="options: birthDaySelect, optionsText: 'text', optionsValue: 'value', value: otherBirthDay"></select>
								<select data-bind="options: birthYearSelect, optionsText: 'text', optionsValue: 'value', value: otherBirthYear"></select>
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_OTHER_EMAIL'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: otherEmail, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NOTES'}"></div>
							<div class="item-input">
								<input type="text" data-bind="value: otherNotes, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }">
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>

		<div class="content-block-title" data-bind="click: function () { groupsCollapsed(!groupsCollapsed()); }, i18n: {'key': '%MODULENAME%/HEADING_GROUPS'}"></div>
		<div class="list-block accordion-item" data-bind="visible: !team() && $root.groupFullCollection().length, css: {'accordion-item-expanded': groupsCollapsed}">
			<ul class="accordion-item-content">
				<li class="item-divider" data-bind="i18n: {'key': '%MODULENAME%/INFO_CONTACT_GROUPS_MARKED'}"></li>
				<!-- ko foreach: $root.groupFullCollection() -->
				<li>
					<div class="item-content">
						<label class="label-checkbox">
							<input type="checkbox" data-bind="attr: {'id': 'group'+$index()}, checked: checked, event: { change: function (item, event) {item.checked(!!event.target.checked); } }">
							<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
						</label>
						<div class="item-inner">
							<label class="item-title" data-bind="attr: {'for': 'group'+$index()}">
								<span data-bind="text: Name()"></span>
							</label>
						</div>
					</div>
				</li>
				<!-- /ko -->
			</ul>
		</div>
	</div>
</div>

• [F] ContactsScreenView.html
  Delete
• [F] ContactsView.html
  Delete
• [F] ContactView.html
  Delete
• [F] EditContactView.html
  Delete
• [F] EditGroupView.html
  Delete
• [F] GroupsView.html
  Delete
• [F] GroupView.html
  Delete
• [F] ToolbarContactsView.html
  Delete
• [F] ToolbarContactView.html
  Delete