{% load cart_template_tags %}
<nav
  class="navbar fixed-top navbar-expand-lg navbar-light white scrolling-navbar"
>
  <div class="container">
    <!-- Brand -->
    <a
      class="navbar-brand waves-effect"
      href="{% url 'core:home' %}"
    >
      <strong class="black-text">BEL-AMOUR</strong>
    </a>

    <!-- Collapse -->
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Links -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Left -->
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link waves-effect" href="{% url 'core:home' %}"
            >Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link waves-effect"
            href="{% url 'core:checkout' %}"
            target=""
            >Checkout</a
          >
        </li>
        <li class="nav-item">
          <a class="nav-link waves-effect" href="{% url 'core:shop' %}"" target="">Shop</a>
        </li>
        <li class="nav-item"></li>
        <li class="nav-item">
          <a class="nav-link waves-effect" href="" target="">Blog</a>
        </li>
        <li class="nav-item"></li>
        <li class="nav-item">
          <a class="nav-link waves-effect" href="" target="">Contact</a>
        </li>
      </ul>

      <!-- Right -->

      {% comment %}
      <li class="nav-item">
        <a
          href="https://www.facebook.com/mdbootstrap"
          class="nav-link waves-effect"
          target="_blank"
        >
          <i class="fab fa-facebook-f"></i>
        </a>
      </li>
      <li class="nav-item">
        <a
          href="https://twitter.com/MDBootstrap"
          class="nav-link waves-effect"
          target="_blank"
        >
          <i class="fab fa-twitter"></i>
        </a>
      </li>
      {% endcomment %}
    </div>
    <ul class="navbar-nav nav-flex-icons">
      <li class="nav-item">
        <form class="form-inline">
          <div class="md-form my-0">
            <input
              class="form-control mr-sm-2"
              type="text"
              placeholder="Search"
              aria-label="Search"
            />
          </div>
        </form>
      </li>
      {% if request.user.is_authenticated %}
      <li class="nav-item">
        <a class="nav-link waves-effect" href= "{% url 'core:order-summary' %}">
          <span class="badge red z-depth-1 mr-1"> {{request.user|cart_item_count}} </span>
          <i class="fa fa-shopping-basket"></i>
        </a>
      </li>
      <li class="nav-item">
        <a href="{% url 'account_logout' %}" class="nav-link waves-effect">
          <i class="fa fa-user"></i>
        </a>
        {% else %}
        <li class="nav-item">
        <a class="nav-link waves-effect" href= "{% url 'core:order-summary' %}">
          <span class="badge red z-depth-1 mr-1"> {{request.user|cart_item_count}} </span>
          <i class="fa fa-shopping-basket"></i>
        </a>
      </li>
        <a href="{% url 'account_login' %}" class="nav-link waves-effect">
          <i class="fa fa-user"></i>
        </a>
        {% endif %}
      </li>
    </ul>
  </div>
</nav>
<hr />