<div class="vertical-menu bg-primary" (click)="handleMenuClick($event)">
    <div id="sidebar-menu" class="hidden-scroll">
        <ul class="metismenu list-unstyled" id="side-menu">
            <li>
                <a href="javascript: void(0);" routerLink="/home/dashboard" routerLinkActive="mm-active">
                    <i class="fa fa-home"></i>
                    <span>{{ 'dashboard' | translate }}</span>
                </a>
            </li>
            <li *ngIf="permissions.UserManagement || authService.isAdminUser()">
                <a href="javascript:void(0);" class="has-arrow waves-effect" (click)="toggleMenu($event)">
                    <i class="fa fa-user-secret"></i>
                    <span>{{ 'UserManagement' | translate }}</span>
                </a>

                <ul class="sub-menu" aria-expanded="false">
                    <!-- <li *ngIf="permissions.thirdPartyRegistration || authService.isAdminUser()">
                        <a routerLink="/home/thirdPartyRegistration" routerLinkActive="mm-active">
                            <span> {{ 'thirdPartyRegistration' | translate }}</span>
                        </a>
                    </li> -->
                    <li *ngIf="permissions.setupUser || authService.isAdminUser()">
                        <a routerLink="/home/setupUser" routerLinkActive="mm-active">
                            <span>{{ 'setupUser' | translate }}</span>
                        </a>
                    </li>
                    <li *ngIf="permissions.resetPassword || authService.isAdminUser()">
                        <a routerLink="/home/resetPassword" routerLinkActive="mm-active">
                            <span> {{ 'resetPassword' | translate }}</span>
                        </a>
                    </li>
                    <li *ngIf="permissions.changePassword || authService.isAdminUser()">
                        <a  routerLink="/home/changePassword" routerLinkActive="mm-active" style="cursor: pointer">
                            <span> {{ 'changePassword' | translate }}</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li *ngIf="permissions.Logging || authService.isAdminUser()">
                <a href="javascript:void(0);" class="has-arrow waves-effect" (click)="toggleMenu($event)">
                    <i class="fa fa-history"></i>
                    <span>{{ 'Logging' | translate }}</span>
                </a>
                <ul class="sub-menu" aria-expanded="false">
                    <li *ngIf="permissions.activityLogs || authService.isAdminUser()">
                        <a routerLink="/home/activityLogs" routerLinkActive="mm-active">
                            <span> {{ 'activityLogs' | translate }}</span>
                        </a>
                    </li>
                    <li *ngIf="permissions.transactionLogs || authService.isAdminUser()">
                    <a routerLink="/home/transactionLogs" routerLinkActive="mm-active">
                        <span>{{ 'transactionLogs' | translate }}</span>
                    </a>
                </li>
                </ul>
                
            </li>
            <!-- <li *ngIf="permissions.SMSBanking || authService.isAdminUser()">
                <a href="javascript:void(0);" class="has-arrow waves-effect" (click)="toggleMenu($event)">
                    <i class="mdi mdi-comment-outline"></i>
                    <span>{{ 'SMSBanking' | translate }}</span>
                </a>
                <ul class="sub-menu" aria-expanded="false">
                    <li *ngIf="permissions.smsLogger || authService.isAdminUser()">
                        <a routerLink="/home/smsLogger" routerLinkActive="mm-active">
                            <span> {{ 'smsLogger' | translate }}</span>
                        </a>
                    </li>
                    <li *ngIf="permissions.smsGateway || authService.isAdminUser()">
                        <a routerLink="/home/smsGateway" routerLinkActive="mm-active">
                            <span> {{ 'smsGateway' | translate }}</span>
                        </a>
                    </li>
                </ul>
            </li> -->
            <!-- <li *ngIf="permissions.ibSupport || authService.isAdminUser()">
                <a href="javascript:void(0);" class="has-arrow waves-effect" (click)="toggleMenu($event)">
                    <i class="mdi mdi-comment-outline"></i>
                    <span>{{ 'ibSupport' | translate }}</span>
                </a>
                <ul class="sub-menu" aria-expanded="false">
                    <li *ngIf="permissions.ibUnblockUser || authService.isAdminUser()">
                        <a routerLink="/home/ibUnblockUser" routerLinkActive="mm-active">
                            <span> {{ 'ibUnblockUser' | translate }}</span>
                        </a>
                    </li>
                    <li *ngIf="permissions.feedbackSetup || authService.isAdminUser()">
                        <a routerLink="/home/feedbackSetup" routerLinkActive="mm-active">
                            <span> {{ 'feedbackSetup' | translate }}</span>
                        </a>
                    </li>
                    <li *ngIf="permissions.purposeSetup || authService.isAdminUser()">
                        <a routerLink="/home/purposeSetup" routerLinkActive="mm-active">
                            <span> {{ 'purposeSetup' | translate }}</span>
                        </a>
                    </li>
                </ul>
            </li> -->
            <li *ngIf="permissions.permissions || authService.isAdminUser()">
                <a routerLink="/home/menu" routerLinkActive="mm-active">
                    <i class="fa fa-database "></i>
                    <span> {{ 'menu' | translate }}</span>
                </a>
            </li>
            <li *ngIf="permissions.permissions || authService.isAdminUser()">
                <a routerLink="/home/permissions" routerLinkActive="mm-active">
                    <i class='fa fa-lock'></i>
                    <span> {{ 'permissions' | translate }}</span>
                </a>
            </li>
        </ul>
    </div>
</div>