{% extends 'bootstrap/base.html' %}

{% block head_css %}
    {{ super() }}
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

{% endblock %}

{% block styles %}
{{super()}}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="icon" href="{{ url_for('static', filename='images/bebida.svg') }}" sizes="any" type="image/svg+xml">
    <link href="https://fonts.googleapis.com/css2?family=Lalezar&family=Lato:wght@700&family=Quattrocento+Sans:wght@700&display=swap" rel="stylesheet">
{% endblock %}

{% block head_js %}
    {{ super() }}
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
{% endblock %}

{% block title %}
    {% if title %}{{ title }} - Barkeeper {% else %}Welcome to Barkeeper{% endif %}
{% endblock %}

{% block navbar %}
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <div class="logo">
                    <a href="{{ url_for('index') }}"><img src="{{ url_for('static', filename='images/logo.png')}}"
                                                          alt="logo"></a>
                </div>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav" style="padding-top: 5px;">
                    <li><a href="{{ url_for('index') }}">Home</a></li>
                    <li><a href="{{ url_for('specially4u') }}">Specially for you</a></li>
                    <li><a href="{{ url_for('cocktails') }}">Cocktails</a></li>
                    <li><a href="{{ url_for('help') }}">Help</a></li>
                    {% if current_user.is_anonymous %}
                    <li><a href="{{ url_for('login') }}">Login</a></li>
                    {% else %}
                    <li>
                        <a href="{{ url_for('messages') }}">
                            Messages
                            {% set new_messages = current_user.new_messages() %}
                            {% if new_messages %}
                            <span class="badge">{{ new_messages }}</span>
                            {% endif %}
                        </a>
                    </li>
                    <li>
                        <div class="dropdown">
                          <a class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img src="{{ url_for('static', filename='images/user.png')}}"
                                                          alt="logo" style="height: 40px; width: 40px">
                          </a>
                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                              <ul>
                                  <li>I'm {{ current_user.username}} !</li>
                                  <li><a class="dropdown-item" href="{{ url_for('logout') }}">Logout</a></li>
                                  <li>
                                        <p>
                                            <a href="{{ url_for('message_us') }}">
                                                Message us !
                                            </a>
                                        </p>
                                  </li>
                              </ul>
                          </div>
                        </div>
                    </li>
                    {% endif %}
                </ul>
			</div>
        </div>
    </nav>
{% endblock %}

{% block content %}
    <div class="container" style="margin-bottom: 64px">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
            {% for message in messages %}
            <div class="alert alert-info" role="alert">{{ message }}</div>
            {% endfor %}
        {% endif %}
        {% endwith %}

        {# application content needs to be provided in the app_content block #}
        {% block app_content %}
        {% endblock %}
    </div>
     <div class="footer" style="position: fixed; z-index: 1000;">
         <br>
         <p class="text-center small"> BarKeeper Inc | 2020</p>
      </div>
{% endblock %}