<div class="btn-toolbar g-ui-user-select-none">
	<div class="audioPlace"
			data-bind="visible: '' !== currentAudio(), attr: { title: currentAudio }, click: stopPlay">
		<div class="playIcon"><div></div></div>
		<i class="stopIcon fontastic">⏸</i>
	</div>
	<div class="accountPlace hide-mobile" data-bind="text: emailTitle()"></div>
	<div class="btn-group dropdown" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: accountMenuDropdownTrigger">
		<a id="top-system-dropdown-id" href="#" tabindex="-1" class="btn single btn-block dropdown-toggle">
			<i class="fontastic" data-bind="css: {'icon-spinner': accountsLoading()}">👤</i>
<!--
			<b data-bind="text: accountsUnreadCount, visible: 100 > accountsUnreadCount() && accountsUnreadCount()"></b>
			<b data-bind="visible: 99 < accountsUnreadCount()">99+</b>
			&nbsp;
-->
			<span class="caret"></span>
		</a>
		<ul class="dropdown-menu right-edge" tabindex="-1" role="menu" aria-labelledby="top-system-dropdown-id">

			<!-- ko foreach: accounts -->
				<li role="presentation">
					<a class="account-item" href="#" data-bind="click: $root.accountClick">
<!--						<b class="pull-right counter" data-bind="visible: count()">
							<span data-bind="text: count, visible: 100 > count()"></span>
							<span data-bind="visible: 99 < count()">99+</span>
						</b>-->
						<i class="fontastic" data-bind="text: $root.accountEmail() === email ? '✔' : '👤'"></i>
						<span class="email-title" data-bind="text: email, attr: {title: email}"></span>
					</a>
				</li>
			<!-- /ko -->

			<li class="dividerbar" role="presentation" data-bind="visible: allowAccounts">
				<a href="#" tabindex="-1" data-bind="click: addAccountClick" data-icon="✚" data-i18n="TOP_TOOLBAR/BUTTON_ADD_ACCOUNT"></a>
			</li>
			<li role="presentation" data-bind="visible: allowContacts">
				<a href="#" tabindex="-1" data-bind="click: contactsClick" data-icon="📇" data-i18n="GLOBAL/CONTACTS"></a>
			</li>
			<li role="presentation">
				<a href="#" tabindex="-1" data-bind="click: settingsClick" data-icon="⚙" data-i18n="TOP_TOOLBAR/BUTTON_SETTINGS"></a>
			</li>
			<li role="presentation">
				<a href="#" tabindex="-1" data-bind="click: settingsHelp">
					<i class="icon-help"></i>
					<span data-i18n="TOP_TOOLBAR/BUTTON_HELP"></span>
				</a>
			</li>
			<li class="dividerbar" role="presentation">
				<a href="#" tabindex="-1" data-bind="click: toggleLayout" data-icon="💻" class="show-mobile" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></a>
				<a href="#" tabindex="-1" data-bind="click: toggleLayout" data-icon="📱" class="hide-mobile" data-i18n="MOBILE/BUTTON_MOBILE_VERSION"></a>
			</li>
			<li role="presentation">
				<a href="#" tabindex="-1" data-bind="click: logoutClick" data-icon="⏻" data-i18n="GLOBAL/LOGOUT"></a>
			</li>
		</ul>
	</div>
</div>
