<div class="panel_top">
	<h2 class="contacts_heading" data-bind="visible: isNew(), i18n: {'key': '%MODULENAME%/HEADING_NEW_GROUP'}"></h2>
	<h2 class="contacts_heading" data-bind="visible: !isNew(), i18n: {'key': '%MODULENAME%/HEADING_EDIT_GROUP'}"></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">
				<div class="row">
					<span class="label">
						<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_GROUP_NAME'}"></span>:
					</span>
					<input class="value input" type="text" id="selenium_contacts_edit_group_name"
						   data-bind="hasfocus: nameFocused, value: name, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row"> 
					<span class="value offset"> 
						<label class="custom_checkbox" data-bind="css: {'checked': isOrganization}"> 
							<span class="icon"></span> 
							<input type="checkbox" id="selenium_contacts_edit_group_is_organization" data-bind="checked: isOrganization">
						</label>
						<label for="selenium_contacts_edit_group_is_organization" data-bind="i18n: {'key': '%MODULENAME%/LABEL_GROUP_IS_COMPANY'}"></label>
					</span>
				</div>				
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: {'key': 'COREWEBCLIENT/LABEL_EMAIL'}"></span>:
					</span>
					<input class="value input" type="text" id="selenium_contacts_edit_group_email"
						   data-bind="value: email, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_COMPANY'}"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: company, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_COUNTRY'}"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: country, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_STATE'}"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: state, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_CITY'}"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: city, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_STREET'}"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: street, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_ZIP'}"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: zip, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_PHONE'}"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: phone, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_FAX'}"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: fax, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row" data-bind="visible: isOrganization">
					<span class="label">
						<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_WEB'}"></span>:
					</span>
					<input class="value input" type="text" data-bind="value: web, valueUpdate: 'afterkeydown', onEnter: function () { $root.saveCommand($data); }" />
				</div>
				<div class="row" data-bind="visible: isNew() && '' !== newContactsInGroupHint()">
					<span data-bind="text: newContactsInGroupHint"></span>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="panel_bottom">
	<div class="buttons">
		<span class="button" 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>
