<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}

<head>
    <!-- Materialize, eventually pull this into the project -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="{% static 'indabom/css/materialize.min.css' %}"  media="screen,projection"/>    
    
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!-- Custom -->
    <link rel="stylesheet" href="{% static 'bom/style.css' %}">
</head>

<body>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="{% static 'indabom/js/materialize.min.js' %}"></script>
    <script>
        $(document).ready(function() {
            $('select').material_select();
        });
    </script>

    <nav class="green lighten-1">
        <div class="nav-wrapper">
            <a href="/" class="brand-logo">BOM</a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                {% block menu %}{% endblock %}
                {% if user.is_superuser and user.is_authenticated %}<li><a href="/admin/">Admin</a></li>{% endif %}
                {% if user.is_authenticated %}<li><a href="{% url 'logout' %}">Logout</a></li>{% endif %}
                {% if not user.is_authenticated %}<li><a href="{% url 'login' %}">Login</a></li>{% endif %}
            </ul>
        </div>
    </nav>
    
    <div class="container"><h4>{% block title %}{% endblock %}</h4></div>

    <div id="content" class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>