{% load static %}
{% if not view.is_popup %}
      <nav class="navbar fixed-top">
        <div class="d-flex align-items-center navbar-left">
            <a href="#" class="menu-button d-none d-md-block">
                <svg class="main" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 17">
                    <rect x="0.48" y="0.5" width="7" height="1" />
                    <rect x="0.48" y="7.5" width="7" height="1" />
                    <rect x="0.48" y="15.5" width="7" height="1" />
                </svg>
                <svg class="sub" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17">
                    <rect x="1.56" y="0.5" width="16" height="1" />
                    <rect x="1.56" y="7.5" width="16" height="1" />
                    <rect x="1.56" y="15.5" width="16" height="1" />
                </svg>
            </a>

            <a href="#" class="menu-button-mobile d-xs-block d-sm-block d-md-none">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 17">
                    <rect x="0.5" y="0.5" width="25" height="1" />
                    <rect x="0.5" y="7.5" width="25" height="1" />
                    <rect x="0.5" y="15.5" width="25" height="1" />
                </svg>
            </a>
        </div>

            <span class="d-none d-xs-block"><img alt="Logo" src="{% static 'images/logo.png' %}" width="150px"></span>
            <span class="d-block d-xs-none"><img alt="Logo" src="{% static 'images/logo.png' %}" width="150px"></span>

        <div class="navbar-right">
            <div class="header-icons d-inline-block align-middle">
                <div class="d-none d-md-inline-block align-text-bottom mr-3">
                    <div class="custom-switch custom-switch-primary-inverse custom-switch-small pl-1"
                         data-toggle="tooltip" data-placement="left" title="Dark Mode">
                        <input class="custom-switch-input" id="switchDark" type="checkbox" checked>
                        <label class="custom-switch-btn" for="switchDark"></label>
                    </div>
                </div>

                <div class="position-relative d-none d-sm-inline-block">
                    <button class="header-icon btn btn-empty" type="button" id="iconMenuButton" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        <i class="simple-icon-grid"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right mt-3 h-auto position-absolute" id="iconMenuDropdown">
                         <a href="/dx" class="icon-menu-item">
                            <i class="simple-icon-basket d-block"></i>
                            <span>Παραγγελίες</span>
                        </a>

                        <a href="/dx/create_booking" class="icon-menu-item">
                            <i class="simple-icon-note d-block"></i>
                            <p>Νεα Παραγγελία</p>
                        </a>

                    </div>
                </div>
                <button class="header-icon btn btn-empty d-none d-sm-inline-block" type="button" id="fullScreenButton">
                    <i class="simple-icon-size-fullscreen"></i>
                    <i class="simple-icon-size-actual"></i>
                </button>
            </div>
            <div class="user d-inline-block">
                <a class="dropdown-item" href="{% url 'logout' %}">Έξοδος</a>
            </div>
        </div>
    </nav>
    <div class="menu">
        <div class="main-menu">
            <div class="scroll">
                <ul class="list-unstyled">
                  {% if active_page == "dashboard" %}
                    <li class="active">
                  {% else %}
                     <li>
                  {% endif %}
                        <a href="#dashboard">
                            <i class="iconsminds-shopping-bag"></i>
                            <span>Παραγγελίες</span>
                        </a>
                    </li>
                {% if active_page == "products" %}
                    <li class="active">
                  {% else %}
                     <li>
                  {% endif %}
                        <a href="#products">
                            <i class="iconsminds-birthday-cake"></i>
                            <span>Προϊόντα</span>
                        </a>
                    </li>
                {% if active_page == "stores" %}
                    <li class="active">
                  {% else %}
                     <li>
                  {% endif %}
                        <a href="#stores">
                            <i class="iconsminds-shop-2"></i>
                            <span>Καταστήματα</span>
                        </a>
                    </li>
                {% if active_page == "customers" %}
                    <li class="active">
                  {% else %}
                     <li>
                  {% endif %}
                        <a href="#customers">
                            <i class="iconsminds-male-female"></i>
                            <span>Πελάτες</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="sub-menu">
            <div class="scroll">
                <ul class="list-unstyled" data-link="dashboard">
                    <li>
                        <a href="/dx">
                            <i class="simple-icon-book-open"></i> <span class="d-inline-block">Προβολή Παραγγελιών</span>
                        </a>
                    </li>
                    <li>
                        <a href="/dx/order/create/">
                            <i class="simple-icon-note"></i> <span class="d-inline-block">Νεα Παραγγελία</span>
                        </a>
                    </li>
                </ul>
                <ul class="list-unstyled" data-link="products">
                    <li>
                        <a href="/dx/order_products/">
                            <i class="simple-icon-basket-loaded"></i> <span class="d-inline-block">Προϊόντα Παραγγελιών</span>
                        </a>
                    </li>
                    <li>
                        <a href="/dx/products/">
                            <i class="simple-icon-calculator"></i> <span class="d-inline-block">Κατηγορίες Προϊόντων</span>
                        </a>
                    </li>
                     <li>
                        <a href="/dx/product/create/">
                            <i class="simple-icon-plus"></i> <span class="d-inline-block">Νέα Κατηγορία</span>
                        </a>
                    </li>
                </ul>
                <ul class="list-unstyled" data-link="stores">
                    <li>
                        <a href="/dx/stores/">
                            <i class="simple-icon-location-pin"></i> <span class="d-inline-block">Καταστήματα</span>
                        </a>
                    </li>
                    {% if  user.get_username != 'spiti1' and user.get_username != 'spiti2' and user.get_username != 'spiti3' %}
                    <li>
                        <a href="/dx/store/create/">
                            <i class="simple-icon-plus"></i> <span class="d-inline-block">Νέο Κατάστημα</span>
                        </a>
                    </li>
                    {% endif %}
                </ul>

                <ul class="list-unstyled" data-link="customers">
                    <li>
                        <a href="/dx/customers/">
                            <i class="simple-icon-notebook"></i> <span class="d-inline-block">Πελάτες</span>
                        </a>
                    </li>
                    <li>
                        <a href="/dx/customer/create/">
                            <i class="simple-icon-plus"></i> <span class="d-inline-block">Νέος Πελάτης</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
{% endif %}