<div class="b-settings-accounts g-ui-user-select-none">
	<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>
		<a class="btn" data-bind="click: addNewAccount">
			<i class="icon-user-add"></i>
			<span data-i18n="SETTINGS_ACCOUNTS/BUTTON_ADD_ACCOUNT"></span>
		</a>
		<br />
		<br />
		<br />
		<div>
			<div class="accounts-list-top-padding"></div>
			<table class="table table-hover list-table accounts-list" data-bind="i18nUpdate: accounts">
				<colgroup>
					<col />
					<col style="width: 150px" />
					<col style="width: 1%" />
				</colgroup>
				<tbody data-bind="foreach: accounts">
					<tr class="account-item" draggable="true" data-bind="sortableItem: { list: $root.accounts, afterMove: $root.accountsAndIdentitiesAfterMove }">
						<td class="e-action" data-bind="css: {'e-action': canBeEdit}">
							<span class="account-img fontastic">👤</span>
							<i class="fontastic drag-handle">⬍</i>
							<span class="account-name" data-bind="text: email"></span>
						</td>
						<td>
							<a class="btn btn-small btn-small-small btn-danger pull-right button-confirm-delete button-delete-transitions" data-bind="visible: canBeDeleted, css: {'delete-access': deleteAccess}, click: function(oAccount) { $root.deleteAccount(oAccount); }"
								data-i18n="GLOBAL/ARE_YOU_SURE"></a>
						</td>
						<td>
							<span class="delete-account fontastic" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oAccount) { $root.accountForDeletion(oAccount); }">🗑</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div data-bind="visible: allowIdentities">
		<br />
		<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>
		<br />
		<br />
		<br />
		<div>
			<div class="identities-list-top-padding"></div>
			<table class="table table-hover list-table identities-list" data-bind="i18nUpdate: identities">
				<colgroup>
					<col />
					<col style="width: 150px" />
					<col style="width: 1%" />
				</colgroup>
				<tbody data-bind="foreach: identities">
					<tr class="identity-item" draggable="true" data-bind="sortableItem: { list: $root.identities, afterMove: $root.accountsAndIdentitiesAfterMove }">
						<td class="e-action">
							<span class="identity-img fontastic">👤</span>
							<i class="fontastic drag-handle">⬍</i>
							<span class="identity-name" data-bind="text: formattedName()"></span>
							&nbsp;&nbsp;
							<span class="identity-default" data-bind="visible: 0 === $index()">
								(<span data-i18n="SETTINGS_ACCOUNTS/DEFAULT_IDENTITY_LABEL"></span>)
							</span>
						</td>
						<td>
							<a class="btn btn-small btn-small-small btn-danger pull-right button-confirm-delete button-delete-transitions" data-bind="visible: canBeDeleted, css: {'delete-access': deleteAccess}, click: function(oIdentity) { $root.deleteIdentity(oIdentity); }"
								data-i18n="GLOBAL/ARE_YOU_SURE"></a>
						</td>
						<td>
							<span class="delete-identity fontastic" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oIdentity) { $root.identityForDeletion(oIdentity); }">🗑</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
