<template name="layout_sidebar">
    <aside class="sidebar">
        <nav>
            <ul class="sidebar-menu">
                {{#each tabs}}
                    <li
                        class="{{#if $eq _id 'wallet'}}wallet{{/if}} {{#if $eq _id 'browser'}}browser{{/if}} {{isSelected}}"
                        data-tab-id="{{_id}}"
                        draggable="{{#if $eq _id 'wallet'}}false{{/if}}{{#if $eq _id 'browser'}}false{{/if}}">
                        <header>
                            <button class="main {{#if badge}}has-badge{{/if}}">
                                {{#if icon}}
                                    <img src="{{icon}}" draggable="false">
                                {{else}}
                                    <i class="icon-globe"></i>
                                {{/if}}
                            </button>
                        </header>
                        <section class="submenu-container">
                            <section>
                                <header>
                                    <span title="{{nameFull}}">{{name}}</span>
                                    {{#if badge}}
                                        <div class="badge">{{badge}}</div>
                                    {{/if}}

                                    {{#if tabShouldBeRemovable}}
                                        <button class="remove-tab"> &times; </button>
                                    {{/if}}

                                    {{#if $neq _id 'wallet'}}
                                        <div class="accounts">
                                            {{#if dappAccounts.count}}
                                                <button class="display">
                                                    <span>{{dappAccounts.count}} {{i18n 'mist.sidebar.submenu.account' count=dappAccounts.count}}</span>
                                                        <span class="dapp-identicon-container">
                                                        {{#each (dappAccounts 3)}}
                                                            {{> dapp_identicon identity=address class="dapp-tiny"}}
                                                        {{/each}}
                                                    </span>
                                                </button>
                                            {{else}}
                                                <button class="connect">{{i18n 'mist.sidebar.submenu.connectAccounts'}}</button>
                                            {{/if}}
                                        </div>
                                    {{/if}}
                                </header>

                                {{# if subMenu}}
                                <ul class="sub-menu">
                                    {{#each subMenu}}
                                    <li>
                                        <button class="{{#if selected}}selected{{/if}}">
                                            {{name}}
                                            {{#if badge}}
                                                <span class="badge">{{badge}}</span>
                                            {{/if}}
                                        </button>
                                    </li>
                                    {{/each}}
                                </ul>
                                {{/if}}
                            </section>
                        </section>
                    </li>
                {{/each}}
            </ul>
        </nav>
        <div id="react__node-info"></div>
    </aside>
</template>
