<header id="header">
<div id="logo-group">

    <!-- PLACE YOUR LOGO HERE -->
    <span id="logo"> <img src="styles/img/logo.png" alt="SmartAdmin"> </span>
    <!-- END LOGO PLACEHOLDER -->

    <!-- Note: The activity badge color changes when clicked and resets the number to 0
    Suggestion: You may want to set a flag when this happens to tick off all checked messages / notifications -->
    <span id="activity" class="activity-dropdown" activities-dropdown-toggle> 
        <i class="fa fa-user"></i> 
        <b class="badge bg-color-red">21</b> 
    </span>
    <div smart-include="app/components/activities/activities.html"></div>
</div>


<recent-projects></recent-projects>



<!-- pulled right: nav area -->
<div class="pull-right">

    <!-- collapse menu button -->
    <div id="hide-menu" class="btn-header pull-right">
        <span> <a toggle-menu title="Collapse Menu"><i
                class="fa fa-reorder"></i></a> </span>
    </div>
    <!-- end collapse menu -->

    <!-- #MOBILE -->
    <!-- Top menu profile link : this shows only when top menu is active -->
    <ul id="mobile-profile-img" class="header-dropdown-list hidden-xs padding-5">
        <li class="">
            <a href="#" class="dropdown-toggle no-margin userdropdown" data-toggle="dropdown">
                <img src="styles/img/avatars/sunny.png" alt="John Doe" class="online"/>
            </a>
            <ul class="dropdown-menu pull-right">
                <li>
                    <a href-void class="padding-10 padding-top-0 padding-bottom-0"><i
                            class="fa fa-cog"></i> Setting</a>
                </li>
                <li class="divider"></li>
                <li>
                    <a ui-sref="app.appViews.profileDemo" class="padding-10 padding-top-0 padding-bottom-0"> <i class="fa fa-user"></i>
                        <u>P</u>rofile</a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href-void class="padding-10 padding-top-0 padding-bottom-0"
                       data-action="toggleShortcut"><i class="fa fa-arrow-down"></i> <u>S</u>hortcut</a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href-void class="padding-10 padding-top-0 padding-bottom-0"
                       data-action="launchFullscreen"><i class="fa fa-arrows-alt"></i> Full <u>S</u>creen</a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="#/login" class="padding-10 padding-top-5 padding-bottom-5" data-action="userLogout"><i
                            class="fa fa-sign-out fa-lg"></i> <strong><u>L</u>ogout</strong></a>
                </li>
            </ul>
        </li>
    </ul>

    <!-- logout button -->
    <div id="logout" class="btn-header transparent pull-right">
        <span> <a ui-sref="login" title="Sign Out" data-action="userLogout"
                  data-logout-msg="You can improve your security further after logging out by closing this opened browser"><i
                class="fa fa-sign-out"></i></a> </span>
    </div>
    <!-- end logout button -->

    <!-- search mobile button (this is hidden till mobile view port) -->
    <div id="search-mobile" class="btn-header transparent pull-right" data-search-mobile>
        <span> <a href="#" title="Search"><i class="fa fa-search"></i></a> </span>
    </div>
    <!-- end search mobile button -->

    <!-- input: search field -->
    <form action="#/search" class="header-search pull-right">
        <input id="search-fld" type="text" name="param" placeholder="Find reports and more" data-autocomplete='[
					"ActionScript",
					"AppleScript",
					"Asp",
					"BASIC",
					"C",
					"C++",
					"Clojure",
					"COBOL",
					"ColdFusion",
					"Erlang",
					"Fortran",
					"Groovy",
					"Haskell",
					"Java",
					"JavaScript",
					"Lisp",
					"Perl",
					"PHP",
					"Python",
					"Ruby",
					"Scala",
					"Scheme"]'>
        <button type="submit">
            <i class="fa fa-search"></i>
        </button>
        <a href="$" id="cancel-search-js" title="Cancel Search"><i class="fa fa-times"></i></a>
    </form>
    <!-- end input: search field -->

    <!-- fullscreen button -->
    <div id="fullscreen" class="btn-header transparent pull-right">
        <span> <a full-screen title="Full Screen"><i
                class="fa fa-arrows-alt"></i></a> </span>
    </div>
    <!-- end fullscreen button -->

    <!-- #Voice Command: Start Speech -->
    <div id="speech-btn" class="btn-header transparent pull-right hidden-sm hidden-xs">
        <div>
            <a title="Voice Command" id="voice-command-btn" speech-recognition><i class="fa fa-microphone"></i></a>

            <div class="popover bottom">
                <div class="arrow"></div>
                <div class="popover-content">
                    <h4 class="vc-title">Voice command activated <br>
                        <small>Please speak clearly into the mic</small>
                    </h4>
                    <h4 class="vc-title-error text-center">
                        <i class="fa fa-microphone-slash"></i> Voice command failed
                        <br>
                        <small class="txt-color-red">Must <strong>"Allow"</strong> Microphone</small>
                        <br>
                        <small class="txt-color-red">Must have <strong>Internet Connection</strong></small>
                    </h4>
                    <a href-void class="btn btn-success" id="speech-help-btn">See Commands</a>
                    <a href-void class="btn bg-color-purple txt-color-white"
                       onclick="$('#speech-btn .popover').fadeOut(50);">Close Popup</a>
                </div>
            </div>
        </div>
    </div>
    <!-- end voice command -->



    <!-- multiple lang dropdown : find all flags in the flags page -->
    <language-selector></language-selector>
    <!-- end multiple lang -->

</div>
<!-- end pulled right: nav area -->

</header>