<div id="{{id}}" class="navbar navbar-default  pf-head" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header pull-left">

            <a class="navbar-brand pf-head-menu" href="#">
                <div class={{brandLogo}}></div>&nbsp;&nbsp;Menu
            </a>
            <p class="navbar-text"><i class="fa fa-user fa-fw"></i>{{userName}}</p>

            <p class="navbar-text pf-head-active-user">
                <a href="javascript:void(0);" title="active Pilots">
                    <i class="fa fa-plane fa-fw"></i>active&nbsp;&nbsp;<span class="badge txt-color"></span>
                </a>
            </p>

        </div>

        <div class="navbar-header pull-right">
            <p class="navbar-text pf-head-current-location">
                <a href="javascript:void(0);" title="current location">
                    <i class="fa fa-map-marker fa-fw"></i><span></span>
                </a>
            </p>
            <p class="navbar-text txt-color txt-color-red pf-head-program-status" title="connection status">
                <i class="fa fa-fw fa-bolt"></i>
                <span>offline</span>
            </p>
            <a class="navbar-brand pf-head-map" href="#">
                &nbsp;&nbsp;Map&nbsp;<i class="fa fa-code-fork fa-lg fa-fw"></i>
            </a>
        </div>
    </div>
</div>