<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">{{ site }} OpenVPN Status Monitor</a>
  </div>
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">VPN<span class="caret"></span></a>
        <ul class="dropdown-menu">
          {% for _, vpn in vpns %}
            {% if vpn.get('name') %}
              <li><a href="#{{ vpn | get_vpn_anchor }}">{{ vpn.get('name') }}</a></li>
            {% endif %}
          {% endfor %}
        </ul>
      </li>
      {% if maps %}<li><a href="#map_canvas">Map View</a></li>{% endif %}
    </ul>
      {% if logo %}
        {% set logo_path = 'images/' + logo %}
        <a href="#" class="pull-right">
          <img alt="Logo" style="max-height:46px; padding-top:3px;"
          src={% if logo.startswith('http') %}"{{ logo }}"{% else %}"{{ url_for('static', filename=logo_path) }}"{% endif %}>
        </a>
      {% endif %}
    </div>
  </div>
</nav>
