{% load wagtailcore_tags wagtailsettings_tags wagtailimages_tags coderedcms_tags i18n %}
{% wagtail_site as site %}
<nav class="navbar {% get_navbar_css %}">
  <div class="container{% if settings.coderedcms.LayoutSettings.navbar_content_fluid %}-fluid{% endif %}">
    <a class="navbar-brand" href="/">
      {% if settings.coderedcms.LayoutSettings.logo %}
      {% image settings.coderedcms.LayoutSettings.logo original format-webp as logo %}
      <img src="{{logo.url}}" alt="{{site.site_name}}">
      {% else %}
      {{site.site_name}}
      {% endif %}
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
      aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar">
      {% if settings.coderedcms.LayoutSettings.site_navbar %}
      {% get_navbars as navbars %}
      {% for navbar in navbars %}
      <ul class="navbar-nav {{navbar.custom_css_class}}" {% if navbar.custom_id %}id="{{navbar.custom_id}}" {% endif %}>
        {% for item in navbar.menu_items %}
        {% include_block item with liclass="nav-item" aclass="nav-link" ga_event_category="Navbar" %}
        {% endfor %}
      </ul>
      {% endfor %}
      {% endif %}
      {% if settings.coderedcms.LayoutSettings.navbar_search %}
      <form class="d-flex ms-auto" role="search" action="{% url 'crx_search' %}" method="GET">
        {% load django_bootstrap5 %}
        {% get_searchform request as form %}
        {% for field in form %}
        {% bootstrap_field field show_label=False wrapper_class=None success_css_class=None server_side_validation=False %}
        {% endfor %}
        <button class="btn btn-outline-primary ms-2" type="submit">{% trans "Search" %}</button>
      </form>
      {% endif %}
    </div>
  </div>
</nav>

{# Navbar offset #}
{% block navbar_offset %}
{% if settings.coderedcms.LayoutSettings.navbar_fixed %}
{% if settings.coderedcms.LayoutSettings.logo %}
<div class="{{settings.coderedcms.LayoutSettings.navbar_format}}-fixed-img-offset {{settings.coderedcms.LayoutSettings.navbar_collapse_mode}}"></div>
{% else %}
<div class="{{settings.coderedcms.LayoutSettings.navbar_format}}-fixed-offset {{settings.coderedcms.LayoutSettings.navbar_collapse_mode}}"></div>
{% endif %}
{% endif %}
{% endblock %}
