<div class="panel_top">
	<div class="buttons" data-bind="visible: bAllowAddAccounts && (bAllowMultiAccounts || accounts().length === 0)">
		<span class="button add_account_button" data-bind="i18n: {'key': '%MODULENAME%/ACTION_ADD_NEW_ACCOUNT'}, click: addAccount" id="selenium_settings_create_account_button"></span>
	</div>
	<h2 class="settings_heading" data-bind="i18n: {'key': bAllowMultiAccounts ? '%MODULENAME%/HEADING_ACCOUNTS_SETTINGS' : '%MODULENAME%/HEADING_ACCOUNT_SETTINGS'}"></h2>
</div>

<div class="panel_center">
	<div class="fields" data-bind="visible: bAllowAddAccounts && accounts().length === 0">
		<div class="fieldset">
			<div class="hint" style="margin: 0;" data-bind="i18n: {'key': '%MODULENAME%/INFO_NO_ACCOUNTS'}"></div>
		</div>
	</div>
	<div data-bind="visible: accounts().length > 0">
		<div class="items_list simple_list">
			<div data-bind="foreach: accounts">
				<div class="item account" data-bind="css: {'selected': id() === $parent.editedAccountId() && !$parent.editedFetcherId() && !$parent.editedIdentityId()},  click: function () {$parent.editAccount(hash());}">
					<span class="link fetcher" data-bind="i18n: {'key': '%MODULENAME%/ACTION_ADD_IDENTITY'},
						  visible: $parent.bAllowIdentities && bAllowUseIdentities,
						  click: function (oModel, oEv) {$parent.addIdentity(id(), oEv);}"
					></span>
					<span class="link fetcher" data-bind="i18n: {'key': '%MODULENAME%/ACTION_ADD_FETCHER'}, visible: (bDefault && $parent.bAllowFetchers), click: function (oModel, oEv) {$parent.addFetcher(id(), oEv);}"></span>
					<span class="link fetcher" data-bind="i18n: {'key': '%MODULENAME%/ACTION_ADD_ALIAS'}, visible: (bDefault && $parent.bAllowAliases), click: function (oModel, oEv) {$parent.addAlias(id(), oEv);}"></span>
					<span class="title" data-bind="text: email()"></span>
					<span class="unified_marker" data-bind="visible: includeInUnifiedMailbox() && showUnifiedMailboxLabel(), text: unifiedMailboxLabelText() || email(), style: {'background': unifiedMailboxLabelColor}"></span>
				</div>

				<!-- ko foreach: identities -->
				<div class="item fetcher" data-bind="css: {'selected': id() === $parents[1].editedIdentityId()}, click: function () {$parents[1].editIdentity($data.hash());}">
					<span class="icon fetcher"></span>
					<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_IDENTITY'}"></span>
					<span class="title" data-bind="text: fullEmail"></span>
					<span class="icon default-identity" data-bind="visible: isDefault() && $parent.identities().length > 1">√</span>
				</div>
				<!-- /ko -->

				<!-- ko foreach: fetchers -->
					<div class="item fetcher" data-bind="css: {'selected': id() === $parents[1].editedFetcherId()}, click: function () {$parents[1].editFetcher($data.hash());}">
						<span class="icon fetcher"></span>
						<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FETCH_FROM'}"></span>
						<span class="title" data-bind="text: incomingServer() + ' / ' + incomingLogin()"></span>
						<span class="info" data-bind="i18n: {'key': '%MODULENAME%/INFO_FETCHING'}, visible: isLocked()"></span>
					</div>
				<!-- /ko -->
				<!-- ko foreach: aliases -->
				<div class="item fetcher" data-bind="css: {'selected': id() === $parents[1].editedAliasId()}, click: function () {$parents[1].editAlias($data.hash());}">
						<span class="icon fetcher"></span>
						<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ALIAS'}"></span>
						<span class="title" data-bind="text: fullEmail"></span>
					</div>
				<!-- /ko -->
			</div>
		</div>
		<div class="tabs" data-bind="visible: editedAccountId() !== 0">
			<div class="shortcuts">
				<div data-bind="foreach: tabs">
					<span class="item" data-bind="attr: {'class': 'item ' + name + ((name === $parent.currentTab().name) ? ' selected' : '')}, visible: visible">
						<a href="javascript: void(0);" data-bind="text: title, click: function () { $parent.changeRoute(name); }, 
								attr: {'id': 'selenium_settings_account_' + name + '_button'}"></a>
					</span>
				</div>
			</div>
			<div class="tabs_container">
				<div class="tab" data-bind="attr: {'class': 'tab ' + currentTab().name}, visible: currentTab().visible">
					<div data-bind="template: {name: currentTab().view.ViewTemplate, data: currentTab().view}"></div>
				</div>
			</div>
		</div>
	</div>
</div>
