<header class="main-header" ng-controller="topNavController as topNav">
    <a ui-sref="backend.user.vault" class="logo">
        <span class="logo-mini"><i class="fa fa-shield"></i></span>
        <span class="logo-lg"><i class="fa fa-shield"></i> <b>bit</b>warden</span>
    </a>
    <nav class="navbar navbar-static-top" role="navigation">
        <a class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <li><a ui-sref="frontend.logout">Log Out</a></li>
                <li class="control-sidebar-show">
                    <a href="#" stop-click ng-click="toggleControlSidebar()"><i class="fa fa-bars"></i></a>
                </li>
            </ul>
        </div>
    </nav>
</header>

<aside class="main-sidebar" ng-controller="sideNavController">
    <section class="sidebar">
        <div class="user-panel">
            <div class="pull-left image">
                <letter-avatar data="{{orgProfile.name}}" avclass="img-responsive img-rounded" round="false"></letter-avatar>
            </div>
            <div class="pull-left info">
                <p>{{orgProfile.name}}</p>
                <a ui-sref="backend.user.vault"><i class="fa fa-arrow-left"></i> Return to my vault</a>
            </div>
        </div>
        <ul class="sidebar-menu">
            <li class="header">MY ORGANIZATION</li>
            <li ng-class="{active: $state.is('backend.org.dashboard')}">
                <a ui-sref="backend.org.dashboard({orgId: params.orgId})">
                    <i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span>
                </a>
            </li>
            <li ng-class="{active: $state.is('backend.org.vault')}">
                <a ui-sref="backend.org.vault({orgId: params.orgId})">
                    <i class="fa fa-lock fa-fw"></i> <span>Vault</span>
                </a>
                <ul class="treeview-menu" ng-class="{'menu-open': $state.includes('backend.org.vault')}">
                    <li>
                        <a href="#" stop-click ng-click="addOrganizationCipher()">
                            <i class="fa fa-plus-circle fa-fw"></i> New Item
                        </a>
                    </li>
                </ul>
            </li>
            <li ng-class="{active: $state.is('backend.org.collections')}">
                <a ui-sref="backend.org.collections({orgId: params.orgId})">
                    <i class="fa fa-cubes fa-fw"></i> <span>Collections</span>
                </a>
                <ul class="treeview-menu" ng-class="{'menu-open': $state.includes('backend.org.collections')}">
                    <li>
                        <a href="#" stop-click ng-click="addOrganizationCollection()">
                            <i class="fa fa-plus-circle fa-fw"></i> New Collection
                        </a>
                    </li>
                </ul>
            </li>
            <li ng-class="{active: $state.is('backend.org.people')}">
                <a ui-sref="backend.org.people({orgId: params.orgId})">
                    <i class="fa fa-users fa-fw"></i> <span>People</span>
                </a>
                <ul class="treeview-menu" ng-class="{'menu-open': $state.includes('backend.org.people')}">
                    <li>
                        <a href="#" stop-click ng-click="inviteOrganizationUser()">
                            <i class="fa fa-plus-circle fa-fw"></i> Invite a User
                        </a>
                    </li>
                </ul>
            </li>
            <li ng-class="{active: $state.is('backend.org.groups')}" ng-if="orgProfile.useGroups">
                <a ui-sref="backend.org.groups({orgId: params.orgId})">
                    <i class="fa fa-sitemap fa-fw"></i> <span>Groups</span>
                </a>
                <ul class="treeview-menu" ng-class="{'menu-open': $state.includes('backend.org.groups')}">
                    <li>
                        <a href="#" stop-click ng-click="addOrganizationGroup()">
                            <i class="fa fa-plus-circle fa-fw"></i> New Group
                        </a>
                    </li>
                </ul>
            </li>
            <li ng-class="{active: $state.is('backend.org.events')}" ng-if="orgProfile.useEvents">
                <a ui-sref="backend.org.events({orgId: params.orgId})">
                    <i class="fa fa-file-text-o fa-fw"></i> <span>Event Logs</span>
                </a>
            </li>
            <li ng-class="{active: $state.is('backend.org.billing')}" ng-if="isOrgOwner(orgProfile)">
                <a ui-sref="backend.org.billing({orgId: params.orgId})">
                    <i class="fa fa-credit-card fa-fw"></i> Billing &amp; Licensing
                </a>
            </li>
            <li ng-class="{active: $state.is('backend.org.settings')}" ng-if="isOrgOwner(orgProfile)">
                <a ui-sref="backend.org.settings({orgId: params.orgId})">
                    <i class="fa fa-gears fa-fw"></i> <span>Settings</span>
                </a>
            </li>
        </ul>
    </section>
</aside>

<div class="content-wrapper" ui-view>
</div>
