{% load grunge %}
{% load i18n %}
<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="{% url 'home' %}" title="{% trans 'Home' %}">
    {% trans "Grunge Rock" %}
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div id="navbar-content" class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item {% active_view 'artist-list' %}">
        <a class="nav-link" href="{% url 'artist-list' %}" title="{% trans 'Artists' %}">
          {% trans "Artists" %}
        </a>
      </li>
      <li class="nav-item {% active_view 'album-list' %}">
        <a class="nav-link" href="{% url 'album-list' %}" title="{% trans 'Albums' %}">
          {% trans "Albums" %}
        </a>
      </li>
      <li class="nav-item {% active_view 'track-list' %}">
        <a class="nav-link" href="{% url 'artist-list' %}" title="{% trans 'Tracks' %}">
          {% trans "Tracks" %}
        </a>
      </li>
    </ul>
    {% trans "Search for artists, albums, or tracks" as search_text %}
    <form class="form-inline" action="{% url 'search' %}" method="GET" title="{{ search_text }}">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">
            <span class="fa fa-search"></span>
          </span>
        </div>        
        <input class="form-control" type="search" name="q" value="{{ request.GET.q|default:'' }}" placeholder="{{ search_text }}" title="{{ search_text }}" style="min-width: 500px;">
        <div class="input-group-append">
          <button class="btn btn-primary" type="submit" title="{{ search_text }}">
            {% trans "Search" %}
          </button>
        </div>
      </div>
    </form>
  </div>
</nav>
