<!-- This is the white navigation bar seen on the top. A bit enhanced BS navbar. See .page-controls in _base.scss. -->
<nav class="page-controls navbar navbar-dashboard">
  {{con}} {{con1}}
    <div class="container-fluid">
        <!-- .navbar-header contains links seen on xs & sm screens -->
        <div class="navbar-header mr-md-3">
            <ul class="nav navbar-nav navbar-right d-md-none">
                <li class="nav-item d-none d-xl-block">
                    <!-- toggles chat -->
                    <a class="nav-link" href="#" data-toggle="chat-sidebar">
                        <span class="square square-lg"><i class="la la-globe"></i></span>
                    </a>
                </li>
            </ul>
        </div>

        <!-- this part is hidden for xs screens -->
        <div class="navbar-header mobile-hidden">
            <div class="alert alert-info alert-rounded animated bounceIn delay-2s mx-3 d-none d-xl-block">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <i class="fa fa-info-circle mr-1"></i> Check out Light Blue Settings on the right!
            </div>
            <!-- search form! link it to your search server -->
            <form class="navbar-form d-none d-lg-block" role="search">
                <div class="form-group">
                    <div class="input-group input-group-no-border mr-3">
                        <input class="form-control" id="main-search" type="text" placeholder="Search Dashboard">
                        <span class="input-group-append">
                            <span class="input-group-text">
                                <i class="la la-search fw-bold"></i>
                            </span>
                        </span>
                    </div>
                </div>
            </form>
            <ul class="nav navbar-nav float-right">
                <li class="dropdown nav-item">
                    <a
                        href="#"
                        role="button"
                        class="dropdown-toggle dropdown-toggle-notifications nav-link small"
                        id="notifications-dropdown-toggle"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                        data-position="bottom-middle-aligned"
                        data-disable-interaction="false"
                    >
                        <span class="thumb-sm avatar float-left">
                            <img class="rounded-circle" src="../demo/img/people/a5.jpg" alt="..." >
                        </span>
                        &nbsp;
                        admin@flatlogic.com
                        <span class="circle bg-primary text-white fs-sm fw-bold">
                            15
                        </span>
                    </a>
                    <div
                            class="dropdown-menu dropdown-menu-right animated fadeInUp py-0"
                            aria-labelledby="notifications-dropdown-toggle"
                            id="notifications-dropdown-menu"
                    >
                        <section class="card notifications">
                            <header class="card-header">
                                <div class="text-center mb-sm">
                                    <strong>You have 13 notifications</strong>
                                </div>
                                <div class="btn-group btn-group-sm btn-group-toggle" id="notifications-toggle" data-toggle="buttons">
                                    <label class="btn btn-default active">
                                        <!-- ajax-load plugin in action. setting data-ajax-load & data-ajax-target is the
                                             only requirement for async reloading -->
                                        <input type="radio" checked
                                               data-ajax-trigger="change"
                                               data-ajax-load="../demo/ajax/notifications.html"
                                               data-ajax-target="#notifications-list"> Notifications
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio"
                                               data-ajax-trigger="change"
                                               data-ajax-load="../demo/ajax/messages.html"
                                               data-ajax-target="#notifications-list"> Messages
                                    </label>
                                    <label class="btn btn-default">
                                        <input type="radio"
                                               data-ajax-trigger="change"
                                               data-ajax-load="../demo/ajax/progress.html"
                                               data-ajax-target="#notifications-list"> Progress
                                    </label>
                                </div>
                            </header>
                            <!-- notification list with .thin-scroll which styles scrollbar for webkit -->
                            <div id="notifications-list" class="list-group thin-scroll">
                                <div class="list-group-item">
                                <span class="thumb-sm float-left mr clearfix">
                                    <img class="rounded-circle" src="../demo/img/people/a3.jpg" alt="...">
                                </span>
                                    <p class="no-margin overflow-hidden">
                                        1 new user just signed up! Check out
                                        <a href="#">Monica Smith</a>'s account.
                                        <time class="help-block no-margin">
                                            2 mins ago
                                        </time>
                                    </p>
                                </div>
                                <a class="list-group-item" href="#">
                                <span class="thumb-sm float-left mr">
                                    <i class="fa fa-angle-double-up fa-2x"></i>
                                </span>
                                    <p class="text-ellipsis no-margin">
                                        2.1.0-pre-alpha just released. </p>
                                    <time class="help-block no-margin">
                                        5h ago
                                    </time>
                                </a>
                                <a class="list-group-item" href="#">
                                <span class="thumb-sm float-left mr">
                                    <i class="fa fa-bolt fa-lg"></i>
                                </span>
                                    <p class="text-ellipsis no-margin">
                                        Server load limited. </p>
                                    <time class="help-block no-margin">
                                        7h ago
                                    </time>
                                </a>
                                <div class="list-group-item">
                                <span class="thumb-sm float-left mr clearfix">
                                    <img class="rounded-circle" src="../demo/img/people/a5.jpg" alt="...">
                                </span>
                                    <p class="no-margin overflow-hidden">
                                        User <a href="#">Jeff</a> registered
                                        &nbsp;&nbsp;
                                        <button class="btn btn-xs btn-success">Allow</button>
                                        <button class="btn btn-xs btn-danger">Deny</button>
                                        <time class="help-block no-margin">
                                            12:18 AM
                                        </time>
                                    </p>
                                </div>
                                <div class="list-group-item">
                                    <span class="thumb-sm float-left mr">
                                        <i class="fa fa-shield fa-lg"></i>
                                    </span>
                                    <p class="no-margin overflow-hidden">
                                        Instructions for changing your Envato Account password. Please
                                        check your account <a href="#">security page</a>.
                                        <time class="help-block no-margin">
                                            12:18 AM
                                        </time>
                                    </p>
                                </div>
                                <a class="list-group-item" href="#">
                                <span class="thumb-sm float-left mr">
                                    <span class="square bg-primary square-lg">
                                        <i class="fa fa-facebook text-white"></i>
                                    </span>
                                </span>
                                    <p class="text-ellipsis no-margin">
                                        New <strong>76</strong> facebook likes received.</p>
                                    <time class="help-block no-margin">
                                        15 Apr 2014
                                    </time>
                                </a>
                                <a class="list-group-item" href="#">
                                <span class="thumb-sm float-left mr">
                                    <span class="circle circle-lg bg-gray-dark">
                                        <i class="fa fa-circle-o text-white"></i>
                                    </span>
                                </span>
                                    <p class="text-ellipsis no-margin">
                                        Dark matter detected.</p>
                                    <time class="help-block no-margin">
                                        15 Apr 2014
                                    </time>
                                </a>
                            </div>
                            <footer class="card-footer text-sm">
                                <!-- ajax-load button. loads demo/ajax/notifications.php to #notifications-list
                                     when clicked -->
                                <button class="btn-label btn-link float-right"
                                        id="load-notifications-btn"
                                        data-ajax-load="../demo/ajax/notifications.php"
                                        data-ajax-target="#notifications-list"
                                        data-loading-text="<i class='la la-refresh fa-spin mr-xs'></i> Loading...">
                                    <i class="la la-refresh"></i>
                                </button>
                                <span class="card-footer-text">Synced at: 21 Apr 2014 18:36</span>
                            </footer>
                        </section>
                    </div>
                </li>
                <li class="dropdown nav-item d-none d-xl-block">
                    <a href="#"
                       class="nav-link"
                       id="notifications-dropdown-toggle"
                       data-toggle="dropdown"
                       aria-haspopup="true"
                       aria-expanded="false"
                       data-position="bottom-middle-aligned"
                       data-disable-interaction="false"
                    >
                        <i class="la la-comment px-2"></i>
                    </a>
                    <ul tabindex="-1" class="dropdown-menu dropdown-menu-messages dropdown-menu-right comments">
                        <li role="presentation">
                            <a role="menuitem" target="_self" href="#" class="dropdown-item">
                                <span class="avatar thumb-sm mr-3">
                                    <img src="../img/chat/avatars/1.png" alt="..." class="rounded-circle">
                                </span>
                                <div>
                                    <h6>Jane
                                        <span class="fw-semi-bold">Hew</span>
                                    </h6>
                                    <span class="fs-sm  fw-thin">Hey, John! How is it going? ...</span>
                                </div>
                            </a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" target="_self" href="#" class="dropdown-item">
                                <span class="avatar thumb-sm mr-3">
                                    <img src="../img/chat/avatars/2.png" alt="..." class="rounded-circle">
                                </span>
                                <div>
                                    <h6>Alies
                                        <span class="fw-semi-bold">Rumiancaŭ</span>
                                    </h6>
                                    <span class="fs-sm  fw-thin">I will definitely buy this template</span>
                                </div>
                            </a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" target="_self" href="#" class="dropdown-item">
                                <span class="avatar thumb-sm mr-3">
                                    <img src="../img/chat/avatars/3.png" alt="..." class="rounded-circle">
                                </span>
                                <div>
                                    <h6>Alexey
                                        <span class="fw-semi-bold">Kamandzirau</span>
                                    </h6>
                                    <span class="fs-sm  fw-thin">I will definitely buy this template</span>
                                </div>
                            </a>
                        </li>
                        <li role="presentation" class="text-center">
                            <button role="menuitem" type="button" class="dropdown-item">
                                <span class="mx-auto">See all messages
                                    <i class="fa fa-arrow-right ml-1"></i>
                                </span>
                            </button>
                        </li>
                    </ul>
                </li>
                <li class="nav-item divider d-none d-xl-block"></li>
                <li class="dropdown nav-item" >
                    <a href="#" class="dropdown-toggle no-caret nav-link cog" data-toggle="dropdown">
                        <i class="la la-cog px-2"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li><a class="dropdown-item" href="../other/profile.html"><i class="glyphicon glyphicon-user"></i> &nbsp; My Account</a></li>
                        <li class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="../extra/calendar.html">Calendar</a></li>
                        <li><a class="dropdown-item" href="../other/inbox.html">Inbox &nbsp;&nbsp;<span class="badge badge-pill bg-danger animated bounceIn">9</span></a></li>
                        <li class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="../extra/login.html"><i class="la la-sign-out"></i> &nbsp; Log Out</a></li>
                    </ul>
                </li>
                <li class="dropdown nav-item d-none d-xl-block">
                    <a href="#"
                       class="nav-link"
                       id="notifications-dropdown-toggle"
                       data-toggle="dropdown"
                       aria-haspopup="true"
                       aria-expanded="false"
                       data-position="bottom-middle-aligned"
                       data-disable-interaction="false"
                    >
                        <i class="la la-globe px-2"></i>
                    </a>
                    <ul tabindex="-1" class="dropdown-menu dropdown-menu-messages dropdown-menu-right comments">
                        <li role="presentation">
                            <a role="menuitem" target="_self" href="#" class="dropdown-item">
                                <span class="badge badge-danger mr-2">
                                    <i class="fa fa-bell-o"></i>
                                </span>
                                <span class="fs-sm">Check out this awesome ticket</span>
                            </a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" target="_self" href="#" class="dropdown-item">
                                <span class="badge bg-primary mr-2">
                                    <i class="fa fa-question-circle"></i>
                                </span>
                                <span class="fs-sm">Finish 2019 annual report</span>
                            </a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" target="_self" href="#" class="dropdown-item">
                                <span class="badge badge-success mr-2">
                                    <i class="fa fa-info-circle"></i>
                                </span>
                                <span class="fs-sm">Update Vue.js to the newest version</span>
                            </a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" target="_self" href="#" class="dropdown-item">
                                <span class="badge badge-info mr-2">
                                    <i class="fa fa-plus"></i>
                                </span>
                                <span class="fs-sm">Establish OKR system</span>
                            </a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" target="_self" href="#" class="dropdown-item">
                                <span class="badge badge-danger mr-2">
                                    <i class="fa fa-tag"></i>
                                </span>
                                <span class="fs-sm">Fill in time tracking</span>
                            </a>
                        </li>
                        <li role="presentation" class="text-center">
                            <button role="menuitem" type="button" class="dropdown-item">
                                <span class="mx-auto">See all tickets
                                    <i class="fa fa-arrow-right ml-1"></i>
                                </span>
                            </button>
                        </li>
                    </ul>
                </li>
                <li class="nav-item d-none d-xl-block">
                    <a target="_self" href="../extra/login.html" class="nav-link">
                        <i class="la la-power-off px-2"></i>
                    </a>
                </li>
                <li class="nav-item d-md-none">
                    <a target="_self" class="nav-link" data-toggle="collapse" href="#sidebar" role="button" aria-expanded="false" aria-controls="collapseExample">
                        <i class="la la-navicon"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>
