<nav ng-controller="MenuController" class="navbar navbar-fixed-top navbar-material-blue-900">
  <div class="container-fluid">
    <div class="https-untrusted navbar-center" ng-show="!safeProtocol">
      <div class="https-message">
        {{ 'MESSAGE_CONNECTION_UNTRUSTED' | translate }}
      </div>
    </div>

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">{{ 'MESSAGE_TOGGLE_NAVIGATION' | translate }}</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="javascript:void(0)">
        Verto Communicator
      </a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="navbar-item-icon net-info" ng-show="(bandUp || bandDown) && storage.data.autoBand">
          <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
            <i ng-class="iconClass"></i>
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu drop-net-info" role="menu" ng-click="$event.stopPropagation()">
            <li><a class="title">{{ 'BANDWIDTH_INFO' | translate }}</a></li>
            <li><a>{{ 'BANDWIDTH_INFO_OUTGOING' | translate }} {{bandUp}} Kbps</a></li>
            <li><a>{{ 'BANDWIDTH_INFO_INCOMING' | translate }} {{bandDown}} Kbps</a></li>
            <li><a>{{ 'BANDWIDTH_INFO_VIDEO_RES' | translate }} {{vidRes}}</a></li>
          </ul>
        </li>
        <li>
          <a href="">
            <i class="mdi-toggle-radio-button-on" user-status condition="storage.data.userStatus"></i>
          </a>
        </li>
        <li>
          <a href="" class="incall-number" ng-show="storage.data.called_number">
              {{ storage.data.called_number && storage.data.userStatus != 'connected' ?  'LAST_CALL' : '' | translate }} {{ verto.data.call ? verto.data.call.params.remote_caller_id_name + " - " + verto.data.call.params.remote_caller_id_number : storage.data.called_number  }}
          </a>
        </li>
        <li class="navbar-item-icon" ng-show="verto.data.connected">
          <a href="" ng-click="toggleSettings()">
            <i class="mdi-action-settings"></i>
          </a>
        </li>
        <li class="navbar-item-icon" ng-show="verto.data.call && storage.data.videoCall">
          <a href="" ng-click="toggleChat()">
            <i class="mdi-communication-chat"></i>
            <div ng-show="chat_counter" class="chat-notification-badge">
                <div class="chat-notification">{{ chat_counter }}</div>
            </div>
          </a>
        </li>
        <li class="navbar-item-icon">
          <a ng-show="!verto.data.connected" href="#/login">
            <i class="mdi-social-person"></i>
          </a>
          <a ng-show="verto.data.connected" href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
            <i class="mdi-social-person"></i>
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#/?sessid=random" target="_blank">{{ 'OPEN_NEW_WINDOW' | translate}}</a></li>
            <li><a href="" ng-click="openModal('partials/modal_logininfo.html', 'ModalLoginInformationController')">{{ 'CHANGE_LOGIN_INFO' | translate}}</a></li>
            <!--<li><a href="#">View Device Settings</a></li>-->
            <li><a href="" ng-click="logout()">{{ 'LOGOUT' | translate}}</a></li>
          </ul>
        </li>
        <li class="navbar-item-icon">
          <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
            <i class="mdi-action-loyalty"></i>
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="" ng-click="showAbout()">{{ 'ABOUT' | translate}}</a></li>
            <li><a href="" ng-click="showContributors()">{{ 'CONTRIBUTORS' | translate}}</a></li>
            <li><a href="https://freeswitch.org/confluence/x/MQCT" target="_blank">{{ 'HELP' | translate}}</a></li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>
