<div data-bind="visible: allowAdditionalAccount">
	<div class="legend">
		<span data-i18n="SETTINGS_ACCOUNTS/LEGEND_ACCOUNTS"></span>
		&nbsp;&nbsp;&nbsp;
		<i class="icon-spinner" style="margin-top: 5px" data-bind="visible: loading"></i>
	</div>
	<div data-bind="component: {
		name: 'Checkbox',
		params: {
			label: 'SETTINGS_ACCOUNTS/SHOW_UNREAD',
			value: showUnread
		}
	}"></div>
	<a class="btn" data-bind="click: addNewAccount">
		<i class="icon-user-add"></i>
		<span data-i18n="SETTINGS_ACCOUNTS/BUTTON_ADD_ACCOUNT"></span>
	</a>
	<table class="table table-hover list-table accounts-list" data-bind="i18nUpdate: accounts">
		<tbody>
			<td></td>
			<td colspan="3" data-bind="text: mainEmail"></td>
		</tbody>
		<tbody data-bind="foreach: accounts">
			<!-- ko if:isAdditional -->
			<tr draggable="true" data-bind="sortableItem: { list: $root.accounts, afterMove: $root.accountsAndIdentitiesAfterMove }">
				<td>
					<i class="fontastic drag-handle">⬍</i>
				</td>
				<td class="e-action">
					<span class="account-name" data-bind="text: displayName"></span>
				</td>
<!--
				<td><span class="icon-import" data-bind="click: importAll"></span></td>
-->
				<td>
					<a class="btn btn-small btn-danger button-confirm-delete" data-bind="css: {'delete-access': askDelete}, click: function(oAccount) { $root.deleteAccount(oAccount); }"
						data-i18n="GLOBAL/ARE_YOU_SURE"></a>
				</td>
				<td>
					<span class="delete fontastic" data-bind="visible: !askDelete(), click: function (oAccount) { $root.accountForDeletion(oAccount); }">🗑</span>
				</td>
			</tr>
			<!-- /ko -->
		</tbody>
	</table>
</div>
<div data-bind="visible: allowIdentities">
	<div class="legend" data-i18n="SETTINGS_ACCOUNTS/LEGEND_IDENTITIES"></div>
	<a class="btn" data-bind="click: addNewIdentity">
		<i class="icon-user-add"></i>
		<span data-i18n="SETTINGS_ACCOUNTS/BUTTON_ADD_IDENTITY"></span>
	</a>
	<table class="table table-hover list-table identities-list" data-bind="i18nUpdate: identities">
		<tbody data-bind="foreach: identities">
			<tr draggable="true" data-bind="attr: {'data-identity-id': id}, sortableItem: { list: $root.identities, afterMove: $root.accountsAndIdentitiesAfterMove }">
				<td>
					<i class="fontastic drag-handle">⬍</i>
				</td>
				<td class="e-action">
					<span class="identity-name" data-bind="text: formattedName()"></span>
					&nbsp;&nbsp;
					<span class="identity-default" data-bind="visible: 0 === $index()" data-i18n="GLOBAL/DEFAULT"></span>
				</td>
				<td>
					<a class="btn btn-small btn-danger button-confirm-delete" data-bind="visible: id, css: {'delete-access': askDelete}, click: function(oIdentity) { $root.deleteIdentity(oIdentity); }"
						data-i18n="GLOBAL/ARE_YOU_SURE"></a>
				</td>
				<td>
					<span class="delete fontastic" data-bind="visible: !askDelete() && id(), click: function (oIdentity) { $root.identityForDeletion(oIdentity); }">🗑</span>
				</td>
			</tr>
		</tbody>
	</table>
</div>
