<!doctype html>
<html>
<head>
    {% block head %}
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css') }}"
              media="screen,projection"/>
        <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"
              media="screen,projection"/>
        <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/pygments.css') }}"
              media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <title>{% block title %}Warehouse14{% endblock %}</title>
    {% endblock %}
</head>
<body>
{#<div class="container">#}

<nav class="nav-extended">
    <ul id="user-dropdown" class="dropdown-content">
        <li><a href="{{ url_for('account') }}">Account</a></li>
        <li><a href="{{ url_for('logout') }}">Logout</a></li>
    </ul>

    <div class="nav-wrapper">
        <a href="#" class="brand-logo center">Warehouse14</a>
        <ul id="nav-mobile" class="right">
            <li>
                <a class="dropdown-trigger" href="#" data-target="user-dropdown">
                <span id="username">{{ current_user.account.name }}</span>
                <i class="material-icons right">arrow_drop_down</i></a>
            </li>
        </ul>
        <ul id="nav-mobile" class="left">
            <li class="{{ 'active' if active_page == 'home' }}"><a href="/">Home</a></li>
            <li class="{{ 'active' if active_page == 'projects' }}"><a
                    href="{{ url_for('list_projects') }}">Projects</a></li>
        </ul>
    </div>
    {% block nav_content %}{% endblock %}
</nav>

{# Alerts #}
{% with messages = get_flashed_messages() %}
    {% if messages %}
        <div class="container">
            {% for message in messages %}
                <div class="flashing lime lighten-5">
                    <i class="material-icons small">error_outline</i> <span
                        class="flashing-message">{{ message }}</span>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endwith %}


<div id="content">
    {% block content %}{% endblock %}
</div>
<div id="footer">
    {% block footer %}
    {% endblock %}
</div>

{#</div>#}

{#<script src="https://unpkg.com/htmx.org@1.4.0"></script>#}
<script type="text/javascript" src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var elems = document.querySelectorAll('.dropdown-trigger');
        M.Dropdown.init(elems, {});

        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect.init(elems, {});
    });
</script>
</body>
</html>