{% extends "base.html.twig" %} 

{% block extracss %}
  <style>
    .btn-white {
        background-color: #fff !important;
        color: #222 !important;
    }

    .btn-default {
        background-color: #808080;
        color: #fff;
    }

    span.select2.select2-container.select2-container--default.select2-container--below {
        width: 100% !important;
    }
  </style>
{% endblock extracss %}

{% block sidenav %}
    <ul class="unifyMenu" id="unifyMenu">
        <li class="{{ title == 'Profile' ? 'active' : ''}}">
            <a href="{{ path('profile', {'place_slug': place.slug}) }}">
                <span class="has-icon">
                    <i class="icon-tree"></i>
                </span>
                <span class="nav-title">Place Details</span>
            </a>
        </li>
        <li class="{{ title == 'Items' ? 'active' : '' }}">
            <a href="{{ path('items', {'place_slug': place.slug})}}">
                <span class="has-icon">
                    <i class="icon-list2"></i>
                </span>
                <span class="nav-title">Food Menu</span>
            </a>
        </li>
        <li class="{{ title == 'Categories' ? 'active' : ''}}">
            <a href="{{ path('category', {'place_slug': place.slug}) }}">
                <span class="has-icon">
                    <i class="icon-tree"></i>
                </span>
                <span class="nav-title">Food Categories</span>
            </a>
        </li>
    </ul>
{% endblock sidenav %} 

{% block topnav %}
    <div class="row" style="align-items: center;">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
            {% if count > 1 %}
                <form action="{{ path('change_place') }}" style="display: flex;" method="POST">
                    <input type="hidden" name="route" value="{{ app.request.attributes.get('_route') }}">
                    <select name="place" class="form-control place-select" style="font-size: 18px; flex: 1">
                        {% for pl in places %}
                            <option {{ pl.slug == place.slug ? 'selected' : '' }} value="{{ pl.slug }}">{{ pl.name }}</option>
                        {% endfor %}
                    </select>
                    <button class="btn btn-white change-place" disabled>Change</button>
                </form>
            {% endif %}
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
            <ul class="header-actions">
                <li class="dropdown" style="display: flex; align-items: center;">
                    <a href="#" id="open-menu" class="user-settings open-menu" style="display: inline-block">
                        <img class="avatar" src="{{ asset('images/menu-black.svg') }}" alt="Menu Thumb"/>
                    </a>
                    <a href="#" id="userSettings" class="user-settings" data-toggle="dropdown" aria-haspopup="true" style="display: inline-block">
                        <img class="avatar" src="{{ asset('images/user.png') }}" alt="User Thumb" />
                    </a>
                    <div class="dropdown-menu lg dropdown-menu-right" aria-labelledby="userSettings">
                        <ul class="user-settings-list">
                            <li>
                            <a href="#">
                                <div class="icon">
                                <i class="icon-account_circle"></i>
                                </div>
                                <p>Profile</p>
                            </a>
                            </li>
                        </ul>
                        <div class="logout-btn">
                            <a href="{{ path('app_logout') }}" class="btn">Logout</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
{% endblock topnav %} 

{% block content %} 
{% endblock content %}

{% block extrajs %}
    <script>
        if(document.querySelector('.place-select')){
            document.querySelector('.place-select').addEventListener('change', function(e){
                document.querySelector('.change-place').removeAttribute('disabled');
            });
        }
        
    </script>
{% endblock extrajs %}