<!-- Page Wrapper -->
<div id="wrapper">
    <!-- Sidebar -->
    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion fix_menu" id="accordionSidebar">

        <!-- Sidebar - Brand -->
        <a class="sidebar-brand d-flex align-items-center justify-content-center bg-gradient-light" ui-sref="dashboard">
            <div class="sidebar-brand-icon">
                <img class="d-inline-block align-top" alt="" height="auto" width="100" src="images/logo1.png"/>
            </div>
            <div class="sidebar-brand-text mx-3"></div>
        </a>

        <!-- Divider -->
        <hr class="sidebar-divider my-0">
        <!-- Nav Item - Dashboard -->
        <li class="nav-item" ng-class="{'active': current && current.name === 'dashboard'}">
            <a class="nav-link" ui-sref="dashboard">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>{{'TITLE.DASHBOARD' | translate}}</span></a>
        </li>

        <!-- Nav Item - My Email -->
        <li class="nav-item" ng-class="{'active': current && current.name === 'myEmail'
        || current.name === 'trackingPage'}">
            <a class="nav-link" ui-sref="myEmail({folder_id:'0'})">
                <i class="fas fa-fw fa-paper-plane"></i>
                <span>{{'TITLE.MY_EMAIL' | translate}}</span></a>
        </li>

        <!-- Nav Item - Admin Console -->
        <li class="nav-item cs-pointer" ng-show="userRoleId === 1 || userRoleId === 2">
            <div class="nav-link" ng-click="goToAdminConsole()">
                <i class="fas fa-fw fa-user-cog"></i>
                <span>{{'TITLE.ADMIN_CONSOLE' | translate}}</span></div>
        </li>

        <!-- Divider -->
        <hr class="sidebar-divider d-none d-md-block">

        <!-- Sidebar Toggler (Sidebar) -->
        <div class="text-center d-none d-md-inline">
            <button class="rounded-circle border-0" id="sidebarToggle"></button>
        </div>

        <!-- Footer -->
        <div class="d-flex footer-bottom align-items-end justify-content-start ml-1">
            <span class="small" ng-bind-html="'COMMON.COPY_RIGHT' | translate"></span>
        </div>
        <!-- End of Footer -->
    </ul>
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column fix_content">
        <!-- Main Content -->
        <div id="content">
            <!-- Topbar -->
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow fix_top_menu"
                 id="top_menu">

                <!-- Sidebar Toggle (Topbar) -->
                <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                    <i class="fa fa-bars"></i>
                </button>
                <!-- Topbar Navbar -->
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item d-flex align-items-center">
                        <a class="badge badge-pill badge-success col-form-label"
                           ng-class="{'mr-1':isFreePackage && isTeamAdmin}" ui-sref="upgradeAccount"
                           ng-if="isPaymentOnline">{{title_package}}</a>
                        <span class="badge badge-pill badge-success col-form-label"
                              ng-class="{'mr-1':isFreePackage && isTeamAdmin}" ng-if="!isPaymentOnline">{{title_package}}</span>
                        <!-- <button ui-sref="upgradeAccount" id="upgradePackage" class="btn btn-success text-uppercase"
                                ng-show="isFreePackage && isTeamAdmin && isPaymentOnline">
                            {{'TEAM_PAYMENT.UPGRADE_NOW' | translate}}
                        </button> -->
                    </li>
                    <div class="topbar-divider d-none d-sm-block"></div>
                    <!-- Nav Item - User Information -->
                    <li class="nav-item dropdown no-arrow">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="mr-2 d-none d-lg-inline text-gray-600 small" ng-bind="displayName"></span>
                            <i class="fas fa-2x fa-user-circle"></i>
                        </a>
                        <!-- Dropdown - User Information -->
                        <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                             aria-labelledby="userDropdown">
                            <a class="dropdown-item" ui-sref="myAccount">
                                <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                {{'AUTHORIZED.MY_ACCOUNT' | translate}}
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" data-toggle="modal" href="" ng-click="doLogout()">
                                <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                {{'AUTHORIZED.LOGOUT_BTN' | translate}}
                            </a>
                        </div>
                    </li>

                </ul>

            </nav>
            <!-- End of Topbar -->
            <!-- Begin Page Content -->
            <div class="container-fluid ptop-content">
                <div class="alert alert-warning active-payment alert-dismissible text-center text-decoration"
                     ng-show="isPaymentSession">
                    <a ui-sref="upgradeAccount" ng-show="countDays !== 1"
                       ng-bind-html="'TEAM_PAYMENT.SUSPECTING_MGS_S' | translate:{count: countDays }"></a>
                    <a ui-sref="upgradeAccount" ng-show="countDays === 1"
                       ng-bind-html="'TEAM_PAYMENT.SUSPECTING_MGS' | translate:{count: countDays }"></a>
                </div>
                <div class="alert alert-warning active-payment alert-dismissible text-center text-decoration"
                     ng-show="isTrial">
                    <a ui-sref="upgradeAccount"
                       ng-bind-html="'TEAM_PAYMENT.TRIAL_MGS' | translate:{count: expiryTrialDays }"></a>
                </div>
                <div ui-view></div>
            </div>
        </div>
        <!-- End Main Content -->
    </div>
    <!-- End Content Wrapper -->
</div>
