<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="{{ url_for('home.main') }}"><strong>ARA</strong> - Ansible Run Analysis</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hosts <span class="caret"></span></a>
          <ul class="dropdown-menu">
            {% for host in hosts %}
            <li><a href="{{ url_for('host.show_host', host=host.name) }}">{{ host.name }}</a></li>
            {% endfor %}
            <li><a href="{{ url_for('host.host_summary') }}">All hosts...</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Playbooks <span class="caret"></span></a>
          <ul class="dropdown-menu">
            {% for playbook in playbooks %}
            <li><a href="{{ url_for('playbook.show_playbook', playbook=playbook.id) }}">{{ playbook.path|pathtruncate }} @ {{ playbook.time_start |datefmt }}</a></li>
            {% endfor %}
            <li><a href="{{ url_for('playbook.playbook_summary') }}">All playbooks...</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="https://ara.readthedocs.io/en/latest/" target="_blank">Documentation</a></li>
      </ul>
    </div>
  </div>
</nav>
