{% load static %}

<header class="header-part">
  <div class="container">
    <div class="header-content">
      <div class="header-media-group">
        {% if not request.user.is_authenticated %}
        <button class="header-user">
          <img src="{% static 'images/user.png' %}" alt="user" />
        </button>
        {% else %}
        <button class="header-user">
          <img src="{{ request.user.phone }}" alt="user" />
        </button>
        {% endif %}
        <a href="{% url 'home' %}">
          <img src="{% static 'images/SNR_logo.png' %}" alt="logo" style="height: 60px; width: auto;" />
        </a>
        <button class="header-src"><i class="fas fa-search"></i></button>
      </div>
      <a href="{% url 'home' %}" class="header-logo">
        <img src="{% static 'images/SNR_logo.png' %}" style="height: 60px; width: auto;" alt="logo" />
      </a>
        {% if not request.user.is_authenticated %}
      <a href="{% url 'login' %}" class="header-widget" title="My Account">
          <img src="{% static 'images/user.png' %}" alt="user" class="me-2"/><span>Login</span>
      </a>
      {% else %}
          <a href="{% url 'profile' %}" class="header-widget" title="My Account">
              {% if request.user.customer.cus_img %}
                  <img src="{{ request.user.customer.cus_img.url }}" alt="user" style="width: 40px; height: 40px;" /><span>{{ request.user.customer.cus_full_name }}</span>
              {% else %}
                  <img src="{% static 'images/user.png' %}" alt="user" style="width: 40px; height: 40px;" /><span>{{ request.user.customer.cus_full_name }}</span>
              {% endif %}
          </a>
      {% endif %}

      <form class="header-form">
        <input type="text" placeholder="Search anything..." /><button>
          <i class="fas fa-search"></i>
        </button>
      </form>
      <div class="header-widget-group">
        <a href="{% url 'compare' %}" class="header-widget" title="Compare List">
          <i class="fas fa-random"></i><sup>0</sup>
        </a>
        <a href="{% url 'wishlist' %}" class="header-widget" title="Wishlist">
          <i class="fas fa-heart"></i><sup id="wishlist-count"  x-data="wishlistStore">0</sup>
        </a>
        <button class="header-widget header-cart" title="Cartlist">
          <i class="fas fa-shopping-basket"></i><sup id="car-icon-count">0</sup>

        </button>
      </div>
    </div>
  </div>
</header>