<div class="b-settings-accounts g-ui-user-select-none">
	<div data-bind="visible: allowAdditionalAccount">
		<div class="form-horizontal">
			<div class="legend">
				<span class="i18n" data-i18n="SETTINGS_ACCOUNTS/LEGEND_ACCOUNTS"></span>
				&nbsp;&nbsp;&nbsp;
				<i class="icon-spinner animated" style="margin-top: 5px" data-bind="visible: accounts.loading"></i>
			</div>
		</div>
		<a class="btn" data-bind="click: addNewAccount">
			<i class="icon-user-add"></i>
			&nbsp;&nbsp;
			<span class="i18n" data-i18n="SETTINGS_ACCOUNTS/BUTTON_ADD_ACCOUNT"></span>
		</a>
		<br />
		<br />
		<br />
		<div class="accounts-list-wrp">
			<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="sortable: {data: accounts, options: scrollableOptions('.accounts-list-wrp'), afterMove: accountsAndIdentitiesAfterMove}">
					<tr class="account-item">
						<td class="e-action" data-bind="css: {'e-action': canBeEdit}">
							<span class="account-img icon-user"></span>
							<i class="icon-braille drag-handle"></i>
							&nbsp;&nbsp;
							<span class="account-name" data-bind="text: email"></span>
						</td>
						<td>
							<span data-bind="visible: !canBeDeleted()"></span>
							<a class="btn btn-small btn-small-small btn-danger pull-right button-delete button-delete-transitions" data-bind="visible: canBeDeleted, css: {'delete-access': deleteAccess}, click: function(oAccount) { $root.deleteAccount(oAccount); }">
								<span class="i18n" data-i18n="SETTINGS_ACCOUNTS/DELETING_ASK"></span>
							</a>
						</td>
						<td>
							<span class="delete-account" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oAccount) { $root.accountForDeletion(oAccount); }">
								<i class="icon-trash"></i>
							</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div data-bind="visible: allowIdentities">
		<br />
		<div class="form-horizontal">
			<div class="legend">
				<span class="i18n" data-i18n="SETTINGS_ACCOUNTS/LEGEND_IDENTITIES"></span>
			</div>
		</div>
		<a class="btn" data-bind="click: addNewIdentity">
			<i class="icon-user-add"></i>
			&nbsp;&nbsp;
			<span class="i18n" data-i18n="SETTINGS_ACCOUNTS/BUTTON_ADD_IDENTITY"></span>
		</a>
		<br />
		<br />
		<br />
		<div class="identities-list-wrp">
			<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="sortable: {data: identities, options: scrollableOptions('.identities-list-wrp'), afterMove: accountsAndIdentitiesAfterMove}">
					<tr class="identity-item">
						<td class="e-action">
							<span class="identity-img icon-user"></span>
							<i class="icon-braille drag-handle"></i>
							&nbsp;&nbsp;
							<span class="identity-name" data-bind="text: formattedName()"></span>
							&nbsp;&nbsp;
							<span class="identity-default" data-bind="visible: 0 === $index()">
								(<span class="i18n" data-i18n="SETTINGS_ACCOUNTS/DEFAULT_IDENTITY_LABEL"></span>)
							</span>
						</td>
						<td>
							<span data-bind="visible: !canBeDeleted()"></span>
							<a class="btn btn-small btn-small-small btn-danger pull-right button-delete button-delete-transitions" data-bind="visible: canBeDeleted, css: {'delete-access': deleteAccess}, click: function(oIdentity) { $root.deleteIdentity(oIdentity); }">
								<span class="i18n" data-i18n="SETTINGS_ACCOUNTS/DELETING_ASK"></span>
							</a>
						</td>
						<td>
							<span class="delete-identity" data-bind="visible: !deleteAccess() && canBeDeleted(), click: function (oIdentity) { $root.identityForDeletion(oIdentity); }">
								<i class="icon-trash"></i>
							</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>