{% load static %}
{% load bootstrap4 %}
{% load base_extras %}
{% load notifications_extras %}

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{% project_name %}</title>
    <link rel="icon" sizes="32x32" type="image/vnd.microsoft.icon" href="{% static 'icons/favicon.ico' %}" />
    <link rel="icon" sizes="128x128" type="image/icns" href="{% static 'icons/favicon.icns' %}" />
    <link rel="icon" sizes="144x144" type="image/x-icon" href="{% static 'icons/favicon.png' %}" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{% static 'icons/favicon.png' %}">
    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}
    <link href="{% static 'css/fa-all.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/base.css' %}" rel="stylesheet">
    <link href="{% static 'css/katex.min.css' %}" rel="stylesheet">
    <script defer src="{% static 'js/katex.min.js' %}"></script>
    <script defer src="{% static 'js/katex-auto-render.min.js' %}" onload="renderMathInElement(document.body);"></script>
    {% block head-extra %}
    {% endblock%}
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-light bg-light">
            <!-- Brand -->
            <a class="navbar-brand" href="{% url 'base:index' %}">
                <img src="{% static 'logo.svg' %}" alt="{% project_name %}" style="height: 35px" class="align-top">
            </a>
            <!-- Links -->
            <ul class="navbar-nav">
                {% render_link_list %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'base:populate' %}">
                        <i class="fas fa-plus mx-1"></i>Populate
                    </a>
                </li>
                {% if user.is_authenticated %}{% render_notification_links user %}{% endif %}
            </ul>
            <ul class="navbar-nav ml-auto">
                {% if user.is_authenticated %}
                <li class="nav-item">
                    <span class="navbar-text"><b>{{user}}</b></span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'logout'%}"><i class="fas fa-sign-out-alt mx-1"></i>Logout</a>
                </li>
                {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'login'%}"><i class="fas fa-sign-in-alt mx-1"></i>Login</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </header>
    <main role="main">

        {% block content %}
        {% endblock %}

    </main>
</body>
<footer>
    {% block footer %}
    <div class="container-fluid">
        <ol class="breadcrumb bg-light my-1 py-0 text-muted">
            <li class="breadcrumb-item">EspressoDB version: {% render_version %}</li>
            {% if user.is_authenticated %}
            <li class="breadcrumb-item">Database: {% render_db_info %}</li>
            {% endif %}
        </ol>
    </div>
    {% endblock %}
</footer>

</html>
