{# THIS FILE  WILL NOT BE USED IF THE BASE TEMPLATE IS OVERRIDDEN #}

<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Mike Kasparian">

    <title>{% block head-title %} - BOM{% endblock %}</title>

    <!-- 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 'bom/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/css/style.css' %}">
    {% block head %}
    {% endblock head %}
    <link rel="shortcut icon" type="image/png" href="{% static 'bom/img/favicon.ico' %}"/>
</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 'bom/js/jquery-3.4.1.min.js' %}"></script>

<div class="navbar-fixed">
    <nav class="green lighten-1">
        <div class="nav-wrapper">

            {% if user.is_authenticated %}
                <a href="{% url 'bom:home' %}" title="IndaBOM | Home" class="brand-logo left hide-on-med-and-down">
                    <img style="margin-top: 2px; margin-right: 6px;" width="52" alt="IndaBOM Logo" src="{% static 'bom/img/indabom.png' %}"/><span style="position: absolute;">BOM</span>
                </a>
                <a href="{% url 'bom:home' %}" title="IndaBOM | Home" class="brand-logo left hide-on-large-only" style="left: 2.5rem;">
                    <img style="margin-top: 2px; margin-right: 6px;" width="52" alt="IndaBOM Logo" src="{% static 'bom/img/indabom.png' %}"/><span style="position: absolute;">BOM</span>
                </a>
            {% else %}
                <a href="{% url 'login' %}" title="IndaBOM | Home" class="brand-logo left hide-on-med-and-down">
                    <img style="margin-top: 2px; margin-right: 6px;" width="52" alt="IndaBOM Logo" src="{% static 'bom/img/indabom.png' %}"/><span style="position: absolute;">BOM</span>
                </a>
                <a href="{% url 'login' %}" title="IndaBOM | Home" class="brand-logo left hide-on-large-only" style="left: 2.5rem;">
                    <img style="margin-top: 2px; margin-right: 6px;" width="52" alt="IndaBOM Logo" src="{% static 'bom/img/indabom.png' %}"/><span style="position: absolute;">BOM</span>
                </a>
            {% endif %}

            <a href="#" data-target="mobile-menu" class="sidenav-trigger"><i class="material-icons">menu</i></a>

            <ul class="right hide-on-med-and-down">
                {% block menu %}{% endblock %}
                {% include 'bom/base-menu.html' %}
            </ul>

        </div>
    </nav>
</div>

<!-- Make sure this is not in navbar-fixed or it will be disabled -->
<ul class="sidenav" id="mobile-menu">
    {% block menu-mobile %}{% endblock %}
    {% include 'bom/base-menu.html' %}
</ul>

<main>
    {% block main %}
    {% endblock main %}
    {% if title %}
        <div class="container">
            <h1 class="col s12 light header center">{{ title|safe }}</h1>
        </div>
    {% endif %}
    {% if messages %}
    <div id="content" class="container">
            <ul class="messages">
                {% for message in messages %}
                    <li{% if message.tags %} class="card alert alert-{{ message.tags }} alert-dismissible"{% endif %} role="alert">
                        {{ message.message|safe }}
                    </li>
                {% endfor %}
            </ul>
    </div>
    {% endif %}
    {% block content %}{% endblock %}
    {% block action-btn %}{% endblock %}
</main>

<footer class="page-footer green lighten-1">
    <div class="container">
        <div class="row">
            <div class="col l6 s12">
                <h5 class="white-text">Help django-bom Grow</h5>
                <p class="grey-text text-lighten-4">We hope you are as excited about django-bom as we are! Please reach out if you'd like to learn more at <a href="mailto:info@indabom.com">info@indabom.com</a>,
                    and check out the hosted version, <a href="https://www.indabom.com">IndaBOM</a>!</p>
            </div>
            <div class="col l4 offset-l2 s12">
                <h5 class="white-text">Links</h5>
                <ul>
                    <li><a class="grey-text text-lighten-3" title="IndaBOM | Feedback" href="https://forms.gle/4CUQuBcfBJ4eGXDW8" target="_blank">Feedback</a></li>
                </ul>
            </div>
        </div>
        <div class="row center">
            <!-- Place this tag where you want the button to render. -->
            <a class="github-button" href="https://github.com/mpkasp/django-bom" data-size="large" data-show-count="true" aria-label="Star mpkasp/django-bom on GitHub">Star</a>
        </div>
    </div>
    <div class="footer-copyright">
        <div class="container">
            django-bom is a django open source project.
            <!-- <a class="grey-text text-lighten-4 right" href="#!">More Links</a> -->
        </div>
    </div>
</footer>

<script type="text/javascript" src="{% static 'bom/js/materialize.min.js' %}"></script>

<!-- Github star link -->
<script async defer src="https://buttons.github.io/buttons.js"></script>

{% block script %}{% endblock script %}
</body>
</html>