{% load static %}
{% load i18n %}
{% load static i18n languages_helpers %}

<style>

#language-switcher .bootstrap-select {
    width: 120px;
    margin-top: 10px;
    margin-left: 8px;
}

#language-switcher .bootstrap-select button {
    padding-top: 3px;
    padding-bottom: 3px;
}

</style>
    <div class="site-mobile-menu">
      <div class="site-mobile-menu-header">
        <div class="site-mobile-menu-close mt-3">
          <span class="icon-close2 js-menu-toggle"></span>
        </div>
      </div>
      <div class="site-mobile-menu-body"></div>
    </div> <!-- .site-mobile-menu -->


    <div class="site-navbar-wrap js-site-navbar bg-white">

      <div class="container">
        <div class="site-navbar bg-light">
          <div class="py-1">
          {% include "100_eu.html" %}
            <div class="row align-items-center">

              <div class="col-2">

                <h2 class="mb-0 site-logo"><a href="/"><img src="{% static 'images/logo.svg' %}"></a></h2>

              </div>
              <div class="col-10">
                <nav class="site-navigation text-right" role="navigation">

                    <div class="container">
                    <div class="d-inline-block d-lg-none  ml-md-0 mr-auto py-3"><a href="#" class="site-menu-toggle js-menu-toggle"><span class="icon-menu h3"></span></a></div>
                    <ul class="site-menu js-clone-nav d-none d-lg-block">
                     <li class="active">
                        <a href="/">{% trans "Αρχική" %}</a>
                      </li>
                      <li class="has-children">
                        <a href="rooms">{% trans "Διαμονή" %}</a>
                        <ul class="dropdown arrow-top">
                          <li><a href="double">{% trans "Δίκλινο" %}</a></li>
                          <li><a href="triple">{% trans "Τρίκλινο" %}</a></li>
                          <li><a href="villas">{% trans "Μεζονέτες" %}</a></li>

<!--                          <li class="has-children">
                            <a href="rooms">Rooms</a>
                            <ul class="dropdown">
                              <li><a href="rooms">America</a></li>
                              <li><a href="rooms">Europe</a></li>
                              <li><a href="rooms">Asia</a></li>
                              <li><a href="rooms">Africa</a></li>

                            </ul>
                          </li>
-->
                        </ul>
                      </li>
<!--                      <li><a href="events">Events</a></li>
-->
                      <li><a href="location">{% trans "Tοποθεσία" %}</a></li>
                      <li><a href="about">{% trans "Σχετικά με εμάς" %}</a></li>
                      <li><a href="contact">{% trans "Επικοινωνία" %}</a></li>
                     <li>
                       <img src="{% static 'images/flags/'%}{{ LANGUAGE_CODE }}.png">
                        </li>
                      <li>
                            {% get_current_language as LANGUAGE_CODE %}
                            <form action="{% url 'set_language' %}" method="post">
                                {% csrf_token %}
                                <input name="next" type="hidden" value="/" />
                                <select class="selectpicker" name="language" style="width: auto;" onchange="this.form.submit()">
                                  {% get_available_languages as LANGUAGES %}
                                  {% get_language_info_list for LANGUAGES as languages %}
                                  {% for language in languages %}
                                      <option
                                        value="{{ language.code }}"
                                        {% if language.code == LANGUAGE_CODE %} selected="selected"{% endif %}
                                        data-content='<img src="{% static 'images/flags/'%}{{ language.code }}.png">'>
                                        {{ language.name_local }}
                                      </option>

                                  {% endfor %}
                                </select>
                            </form>
                      </li>
                    </ul>
                  </div>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>