{% load i18n i18n_switch %}
<!-- ══ NAV ══ -->
<nav id="main-nav">
  <div class="nav-topbar">
    <a href="{% url 'core:home' %}" class="nav-logo">
      {% load static %}
      <img src="{% static 'img/logo.png' %}" alt="Jool International" style="height:38px;width:auto;">
    </a>

    <ul class="nav-links" id="nav-links">
      <li><a href="{% url 'core:kiriq' %}">KIRiQ Ai</a></li>
      <li><a href="{% url 'core:monitor' %}">Jool Monitor</a></li>
      <li><a href="{% url 'core:joolid' %}">Jool ID</a></li>
      <li><a href="{% url 'core:monagro' %}">Mon Agro</a></li>
      <li><a href="{% url 'core:about' %}">{% trans "À propos" %}</a></li>
      {% if careers_enabled %}
      <li>
        <a href="{% url 'careers:job_list' %}">
          {% trans "Carrières" %}{% if open_jobs_count %} <span
            style="background:var(--teal);color:#fff;border-radius:100px;font-size:11px;padding:1px 7px;margin-left:4px;">{{
            open_jobs_count }}</span>{% endif %}
        </a>
      </li>
      {% endif %}
    </ul>

    <!-- Switcher de langue -->
    {% get_current_language as CURRENT_LANG %}
    {% switch_lang_url 'fr' as fr_url %}
    {% switch_lang_url 'en' as en_url %}
    <div class="lang-switcher">
      <a href="{{ fr_url }}" class="lang-btn {% if CURRENT_LANG == 'fr' %}lang-active{% endif %}">FR</a>
      <a href="{{ en_url }}" class="lang-btn {% if CURRENT_LANG == 'en' %}lang-active{% endif %}">EN</a>
    </div>

    <button class="nav-hamburger" id="nav-hamburger" aria-label="{% trans 'Menu' %}" aria-expanded="false">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>

  <div class="nav-drawer" id="nav-drawer">
    <ul>
      <li><a href="{% url 'core:kiriq' %}">KIRiQ Ai</a></li>
      <li><a href="{% url 'core:monitor' %}">Jool Monitor</a></li>
      <li><a href="{% url 'core:joolid' %}">Jool ID</a></li>
      <li><a href="{% url 'core:monagro' %}">Mon Agro</a></li>
      <li><a href="{% url 'core:about' %}">{% trans "À propos" %}</a></li>
      {% if careers_enabled %}
      <li>
        <a href="{% url 'careers:job_list' %}">
          {% trans "Carrières" %}{% if open_jobs_count %} <span
            style="background:var(--teal);color:#fff;border-radius:100px;font-size:11px;padding:1px 7px;margin-left:4px;">{{
            open_jobs_count }}</span>{% endif %}
        </a>
      </li>
      {% endif %}
      <!-- Switcher mobile -->
      <li style="margin-top:12px;">
        <div class="lang-switcher">
          <a href="{{ fr_url }}" class="lang-btn {% if CURRENT_LANG == 'fr' %}lang-active{% endif %}">FR</a>
          <a href="{{ en_url }}" class="lang-btn {% if CURRENT_LANG == 'en' %}lang-active{% endif %}">EN</a>
        </div>
      </li>
    </ul>
  </div>
</nav>