{% load ev_tags %}{% with p=request.resolver_match.url_name %}
<div class="topbar">
  <div class="wrap topbar__in">
    <div class="topbar__contact">
      <a href="tel:{{ site.phone|cut:' ' }}">{% icon "phone" 15 %}<span>{{ site.phone }}</span></a>
      <a href="mailto:{{ site.email }}">{% icon "mail" 15 %}<span>{{ site.email }}</span></a>
      <span class="hide-md">{% icon "pin" 15 %}<span>{{ site.address }}</span></span>
    </div>
    <div class="topbar__social">
      <span class="hide-sm">Follow Us:</span>
      {% if site.facebook_url %}<a href="{{ site.facebook_url }}" target="_blank" rel="noopener" aria-label="Facebook" class="soc soc--fb">{% icon "facebook" 14 %}</a>{% endif %}
      {% if site.instagram_url %}<a href="{{ site.instagram_url }}" target="_blank" rel="noopener" aria-label="Instagram" class="soc soc--ig">{% icon "instagram" 14 %}</a>{% endif %}
      {% if site.youtube_url %}<a href="{{ site.youtube_url }}" target="_blank" rel="noopener" aria-label="YouTube" class="soc soc--yt">{% icon "youtube" 14 %}</a>{% endif %}
      {% if site.linkedin_url %}<a href="{{ site.linkedin_url }}" target="_blank" rel="noopener" aria-label="LinkedIn" class="soc soc--in">{% icon "linkedin" 14 %}</a>{% endif %}
      {% if not site.facebook_url and not site.instagram_url and not site.youtube_url and not site.linkedin_url %}
        <span class="soc soc--fb">{% icon "facebook" 14 %}</span><span class="soc soc--ig">{% icon "instagram" 14 %}</span><span class="soc soc--yt">{% icon "youtube" 14 %}</span><span class="soc soc--in">{% icon "linkedin" 14 %}</span>
      {% endif %}
    </div>
  </div>
</div>
<header class="header" data-header>
  <div class="wrap header__in">
    {% include "website/partials/logo.html" %}
    <nav class="nav" id="site-nav" aria-label="Main">
      <a href="{% url 'website:home' %}" class="{% if p == 'home' %}is-active{% endif %}">Home</a>
      <div class="nav__drop">
        <a href="{% url 'website:models' %}" class="{% if p == 'models' or p == 'model_detail' %}is-active{% endif %}">Models {% icon "chev-d" 14 %}</a>
        <div class="nav__menu">{% for m in nav_models %}<a href="{{ m.get_absolute_url }}"><b>{{ m.name }}</b><small>{{ m.tagline }}</small></a>{% endfor %}<a href="{% url 'website:models' %}" class="nav__all">Compare all models {% icon "arrow" 14 %}</a></div>
      </div>
      <a href="{% url 'website:features' %}" class="{% if p == 'features' %}is-active{% endif %}">Features</a>
      <a href="{% url 'website:about' %}" class="{% if p == 'about' %}is-active{% endif %}">About Us</a>
      <a href="{% url 'website:dealership' %}" class="{% if p == 'dealership' %}is-active{% endif %}">Dealership</a>
      <a href="{% url 'website:gallery' %}" class="{% if p == 'gallery' %}is-active{% endif %}">Gallery</a>
      <a href="{% url 'website:contact' %}" class="{% if p == 'contact' %}is-active{% endif %}">Contact</a>
      <a href="{% url 'website:login' %}" class="nav__login">{% icon "user" 16 %} Login</a>
    </nav>
    <div class="header__actions">
      <button type="button" class="icon-btn" data-search-toggle aria-label="Search">{% icon "search" 22 %}</button>
      <a class="icon-btn hide-mobile-login" href="{% url 'website:login' %}" aria-label="Login">{% icon "user" 22 %}</a>
      <a class="btn btn--orange btn--pill hide-sm" href="{% url 'website:contact' %}#enquiry">{% icon "scooter" 20 %} Enquire Now {% icon "arrow" 16 %}</a>
      <button type="button" class="icon-btn nav-toggle" data-nav-toggle aria-controls="site-nav" aria-expanded="false" aria-label="Menu">{% icon "menu" 24 %}</button>
    </div>
  </div>
  <form class="searchbar" action="{% url 'website:search' %}" method="get" data-searchbar hidden>
    <div class="wrap searchbar__in">
      {% icon "search" 20 %}
      <input type="search" name="q" placeholder="Search models, features…" aria-label="Search">
      <button class="btn btn--blue btn--sm" type="submit">Search</button>
    </div>
  </form>
</header>
{% endwith %}