{% load i18n static %}
<nav class="top primary-container">
  <button class="circle transparent large" onclick="ui('#menu')">
    <i>menu</i>
  </button>
  <a href="{% url 'index' %}" class="row align-center">
    <img src="{% static 'icons/icon.svg' %}" class="circle small">
  </a>
  <div class="max"></div>
  <button class="circle transparent" onclick="ui('mode', ui('mode') == 'dark' ? 'light' : 'dark')">
    <i>dark_mode</i>
  </button>
  <button class="circle transparent" data-ui="#language-menu">
      <i>language</i>
  </button>

  {% if user.is_authenticated %}
    <a href="{% url 'view_cart' %}" class="button circle transparent">
        <i>shopping_cart</i>
        {% if user.cart_items.exists %}
        <badge class="red">{{ user.cart_items.count }}</badge>
        {% endif %}
    </a>
    <a href="{% url 'user_profile' %}">
      {% if user.avatar %}
      <img src="{{ user.avatar.url }}" class="circle">
      {% else %}
      <img src="https://www.w3schools.com/howto/img_avatar.png" class="circle">
      {% endif %}
    </a>
    <button class="circle transparent" data-ui="#user-menu">
      <i>more_vert</i>
    </button>
  {% else %}
    <a href="{% url 'login' %}"><button class="chip transparent border white-text">{% trans "Login" %}</button></a>
    <a href="{% url 'signup' %}"><button class="chip primary">{% trans "Sign up" %}</button></a>
  {% endif %}
</nav>
