<div class="navbar-default sidebar" role="navigation" ng-mouseenter="openSidebar()" ng-mouseleave="closeSidebar()">

    <div class="sidebar-container">
        <!-- sidebar-person-info -->
        <div class="sidebar-person-info" ng-show="$root.current_user.is_staff">
            <!--<button class="btn btn-primary close-sidebar-person-info">Profili Kapat</button>-->
            <div class="identity">
                <button type="button" class="close" ng-class="{hidden: $root.collapsed || !selectedUser}"
                        ng-click="deselectUser()"
                        aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <div class="identity-header clearfix">
                    <img ng-src="{{selectedUser ? '/img/sample-profile-pic.jpg' : '/img/empty-profile-pic.jpg'}}">
                    <div class="pull-left" ng-class="{hidden: $root.collapsed}">
                        <p class="identity-name">{{selectedUser.name || 'Kişi seçilmedi.'}}</p>
                        <p class="identity-surname">{{selectedUser.surname}}</p>
                        <p>{{selectedUser ? 'TCNo: ' + selectedUser.tcno : ''}}</p>
                    </div>
                </div>
                <!-- end of identity-header -->
                <!--<div class="identity-info" ng-class="{hidden: $root.collapsed}">-->

                    <!--<div class="clearfix">-->
                        <!--<span class="fa fa-envelope"></span>-->
                        <!--<div>erkanogum@gmail.com</div>-->
                    <!--</div>-->
                    <!--<div class="clearfix">-->
                        <!--<span class="fa fa-home"></span>-->
                        <!--<div>İşçi Blokları Mah. 1524. sokak B Blok 6. Kat A Kanat 27 numara</div>-->
                    <!--</div>-->
                <!--</div>-->

            </div>
            <!-- end of identity -->
            <div class="">
                <ul class="nav in" id="side-user-menu" ng-class="{hidden: !selectedMenuItems}" data-step="2"
                    data-intro="seçilen personele veya öğrenciye göre ilgili menüler yer almaktadır. yapılacak işlemi buradan seçebilirsiniz.">


                    <li ng-repeat="(key, item) in selectedMenuItems" ng-class="{active: collapseVar == $index+1}">{{dropDown}}
                        <a href="" ng-click="check($index+1)">
                            <i class="fa fa-fw"
                               ng-class="{
                               'Admin': 'fa fa-fw fa-terminal',
                               'Genel': 'fa fa-fw fa-graduation-cap',
                               'Alt Kategori': 'fa fa-fw fa-tags',
                               'Kadro Islemleri': 'fa fa-fw fa-users',
                               'Seçime Uygun Görevler':'fa fa-fw fa-user'
                               }[item[0].kategori]"></i>
                            <span class="menu-text" ng-class="{hidden: $root.collapsed}">{{ key }}</span>
                            <span class="fa arrow" ng-class="{hidden: $root.collapsed}"></span>
                        </a>
                        <ul class="nav nav-second-level" ng-class="{hidden: $root.collapsed}">
                            <li ng-repeat="(k, v) in item">
                                <!--<a ng-if="v.model" ng-href="#{{v.url}}" ng- -->
                                <!--ng-click="breadcrumb([key, v.text], $event)">{{v.text}}</a>-->
                                <a ng-href="#/{{v.wf}}/{{v.model}}?{{v.param}}={{selectedUser.key}}"
                                   ng-click="breadcrumb([key, v.text], $event)">{{v.text}}</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                </ul>
            </div>
            <!-- end of person-actions -->
        </div>
        <!-- end of sidebar-person-info -->

        <div class="sidebar-nav navbar-collapse">
            <ul class="nav in" id="side-menu" ng-class="{hidden: $root.loggedInUser != true}" data-step="1"
                data-intro="Genel menüler yer almaktadır. yapılacak işlemi buradan seçebilirsiniz.">
                <!--<sidebar-search></sidebar-search>-->
                <li ui-sref-active="active">
                    <a href="#/dashboard" ng-click="breadcrumb(['Panel'])"><i class="fa fa-dashboard fa-fw"></i>
                        <span class="menu-text" ng-class="{hidden: $root.collapsed}">Panel</span>
                    </a>
                </li>

                <li ng-repeat="(key, item) in menuItems" ng-class="{active: collapseVar == $index+1}">{{dropDown}}
                    <a href="" ng-click="check($index+1)">
                        <i class="fa fa-fw"
                           ng-class="{
                               'Admin': 'fa fa-fw fa-terminal',
                               'Genel': 'fa fa-fw fa-graduation-cap',
                               'Alt Kategori': 'fa fa-fw fa-tags',
                               'Kadro Islemleri': 'fa fa-fw fa-users',
                               'Seçime Uygun Görevler':'fa fa-fw fa-user'
                               }[item[0].kategori]"></i>
                        <span class="menu-text" ng-class="{hidden: $root.collapsed}">{{ key }}</span>
                        <span class="fa arrow" ng-class="{hidden: $root.collapsed}"></span>
                    </a>
                    <ul class="nav nav-second-level" ng-class="{hidden: $root.collapsed}">
                        <li ng-repeat="(k, v) in item">
                            <!--<a ng-if="v.model" ng-href="#{{v.url}}" ng- -->
                            <!--ng-click="breadcrumb([key, v.text], $event)">{{v.text}}</a>-->
                            <a ng-href="#/{{v.wf}}/{{v.model}}?{{v.param}}={{selectedUser.key}}"
                               ng-click="breadcrumb([key, v.text], $event)">{{v.text}}</a>
                        </li>
                    </ul>
                    <!-- /.nav-second-level -->
                </li>
            </ul>
        </div>
        <!-- /.sidebar-collapse -->

    </div>
    <footer ng-class="{hidden: $root.collapsed}">
        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOptions({
        'nextLabel': 'Sonraki', 'prevLabel': 'Öncek', 'skipLabel': 'Atla', 'doneLabel': 'Bitir' }).start();">Yardım
            Rehberi</a><br>
    	<span>v <app-version></app-version> &copy; ZetaOps</span>
    </footer>
</div>
