{% load static %}

      <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_black.svg' %}" width="55"></span>
            <span class="d-block d-xs-none"><img alt="Logo" src="{% static 'images/logo_black.svg' %}" width="55"></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-notebook 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>

                        <a href="/dx/rooms" class="icon-menu-item">
                            <i class="simple-icon-event d-block"></i>
                            <span>Δωμάτια</span>
                        </a>

                         <a href="/dx/room_availability" class="icon-menu-item">
                            <i class="simple-icon-calculator d-block"></i>
                            <p>Διαθεσιμότητα</p>
                        </a>

                        <a href="/dx/statistics/" class="icon-menu-item">
                            <i class="simple-icon-pie-chart d-block"></i>
                            <span>Στατιστικά</span>
                        </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="simple-icon-notebook"></i>
                            <span>Κρατήσεις</span>
                        </a>
                    </li>
                  {% if active_page == "rooms" %}
                    <li class="active">
                  {% else %}
                     <li>
                  {% endif %}
                        <a href="#rooms">
                            <i class="simple-icon-event "></i> Δωμάτια
                        </a>
                    </li>
                  {% if active_page == "statistics" %}
                    <li class="active">
                  {% else %}
                     <li>
                  {% endif %}
                        <a href="#statistics">
                            <i class="simple-icon-pie-chart"></i> Στατιστικά
                        </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/create_booking">
                            <i class="simple-icon-note"></i> <span class="d-inline-block">Νεα Κράτηση</span>
                        </a>
                    </li>
                </ul>
                <ul class="list-unstyled" data-link="rooms">
                    <li>
                        <a href="/dx/rooms">
                            <i class="simple-icon-book-open"></i> <span class="d-inline-block">Προβολή Δωματίων</span>
                        </a>
                    </li>
                    <li>
                        <a href="/dx/room_availability">
                            <i class="simple-icon-calculator"></i> <span class="d-inline-block">Έλεγχος Διαθεσιμότητας</span>
                        </a>
                    </li>
                    <li>
                        <a href="/dx/create_room">
                            <i class="simple-icon-note"></i> <span class="d-inline-block">Νέο Δωμάτιο</span>
                        </a>
                    </li>
                </ul>
                <ul class="list-unstyled" data-link="statistics">
                    <li>
                        <a href="/dx/statistics">
                            <i class="simple-icon-calculator"></i> <span class="d-inline-block">Κρατήσεις</span>
                        </a>
                    </li>
                    <li>
                        <a href="/dx/statistics/income">
                            <i class="simple-icon-wallet"></i> <span class="d-inline-block">Έσοδα</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>