<div class="panel_top">
	<div class="buttons">
		<span class="button clear_button" id="selenium_contacts_delete_group_button" data-bind="i18n: {'key': '%MODULENAME%/ACTION_DELETE_GROUP'}, 
				click: function() { $root.deleteGroup(uuid()); }"></span>
		<span class="button clear_button" data-bind="i18n: {'key': '%MODULENAME%/ACTION_EDIT_GROUP'}, click: function (oItem) { $root.editGroup(oItem); }"></span>
		<span class="button" data-bind="visible: $root.bAllowComposeMessageToAddresses, i18n: {'key': '%MODULENAME%/ACTION_EMAIL_TO_GROUP'}, 
				click: function() { $root.mailGroup($data); }, css: {'disabled': $root.isEmptyList}"></span>
	</div>
	<h2 class="contacts_heading" data-bind="i18n: {'key': '%MODULENAME%/HEADING_VIEW_GROUP'}, visible: !isNew()"></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">
			<div class="fields clearfix">
				<div class="row" data-bind="visible: '' !== name()">
					<span class="label">
						<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_GROUP_NAME'}"></span>:
					</span>
					<span class="value" data-bind="text: name"></span>
				</div>
				
				<div data-bind="visible: '' !== isOrganization()">
					<div class="row" data-bind="visible: '' !== email()">
						<span class="label">
							<span data-bind="i18n: {'key': 'COREWEBCLIENT/LABEL_EMAIL'}"></span>:
						</span>
						<span class="mailto_link" data-bind="text: email(), visible: !$root.bAllowComposeMessageToAddresses"></span>
						<span class="mailto_link" data-bind="makeLinkComposeMailTo: getFullEmail(), 
								customTooltip: $root.bAllowComposeMessageToAddresses ? '%MODULENAME%/ACTION_EMAIL_TO_CONTACT' : '',
								text: email(), visible: $root.bAllowComposeMessageToAddresses">
						</span>
					</div>
					<div class="row" data-bind="visible: '' !== company()">
						<span class="label">
							<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_COMPANY'}"></span>:
						</span>
						<span class="value" data-bind="text: company"></span>
					</div>
					<div class="row" data-bind="visible: '' !== country()">
						<span class="label">
							<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_COUNTRY'}"></span>:
						</span>
						<span class="value" data-bind="text: country"></span>
					</div>
					<div class="row" data-bind="visible: '' !== state()">
						<span class="label">
							<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_STATE'}"></span>:
						</span>
						<span class="value" data-bind="text: state"></span>
					</div>
					<div class="row" data-bind="visible: '' !== city()">
						<span class="label">
							<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_CITY'}"></span>:
						</span>
						<span class="value" data-bind="text: city"></span>
					</div>
					<div class="row" data-bind="visible: '' !== street()">
						<span class="label">
							<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_STREET'}"></span>:
						</span>
						<span class="value" data-bind="text: street"></span>
					</div>
					<div class="row" data-bind="visible: '' !== zip()">
						<span class="label">
							<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_ZIP'}"></span>:
						</span>
						<span class="value" data-bind="text: zip"></span>
					</div>
					<div class="row" data-bind="visible: '' !== phone()">
						<span class="label">
							<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_PHONE'}"></span>:
						</span>
						<span class="value" data-bind="text: phone"></span>
					</div>
					<div class="row" data-bind="visible: '' !== fax()">
						<span class="label">
							<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_FAX'}"></span>:
						</span>
						<span class="value" data-bind="text: fax"></span>
					</div>
					<div class="row" data-bind="visible: '' !== web()">
						<span class="label">
							<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_WEB'}"></span>:
						</span>
						<span class="value" data-bind="text: web"></span>
					</div>
				</div>

			</div>
			<div class="fields">
				<div class="items_section" data-bind="foreach: events">
					<div>
						<span class="value" data-bind="text: subject"></span>
						<br/>
						<span class="link" data-bind="text: '(' + start + ' - ' + end + ')', click: function(oEvent) { $root.viewEvent(oEvent.calendarId, oEvent.id, oEvent.start); }"></span>
						<br/><br/>
					</div>
				</div>
			</div>
		</div>
		<div class="fields_switcher" data-bind="visible: $root.bAllowSearchMessagesInInbox && $root.selectedGroupEmails().length > 0">
			<span class="link" data-bind="i18n: {'key': '%MODULENAME%/ACTION_SEE_EMAILS_WITH_GROUP'}, click: function() { $root.viewAllMails(); }"></span>
		</div>
	</div>
</div>
