{% load static %}

{% load i18n %}

<!doctype html>
<html lang="en">

<head>
    <title>{% block head_title %}{% endblock %}</title>
    <link rel="icon" type="image/x-icon" href="{% static 'img/favicon.ico' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script type = "text/javascript" src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    {% csrf_token %}
    {% block extra_head %}
    {% endblock %}
</head>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">WhereToGo</a>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            </ul>
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                {% if user.is_authenticated %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {{ user.username }}
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" href="{% url 'account_email' %}">{% trans "Change E-mail" %}</a></li>
                        <li><a class="dropdown-item" href="{% url 'account_logout' %}">{% trans "Sign Out" %}</a></li>
                    </ul>
                </li>
                {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'account_login' %}">{% trans "Sign In" %}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'account_signup' %}">{% trans "Sign Up" %}</a>
                </li>
                {% endif %}
            </ul>
            <form class="d-flex">
                
            </form>
        </div>    
    </div>
</nav>

<body>

{% if messages %}
{% for message in messages %}
<div class="alert {{ message.tags }} alert-dismissible shadow fade show" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        <span aria-hidden="true"></span>
    </button>
    {{ message | safe }}
</div>
{% endfor %}
{% endif %}

{% block content %}{% endblock %}

{% block scripts %}{% endblock %}

</body>
</html>