{% load static %}
{% load unicorn %}
<!DOCTYPE html>
<html lang="en">
    <head>
        {# Indicate which Character Encoding set the browser should use #}
        <meta charset="utf-8">
        {# Title of the page (located in the tab header) #}
        <title>
            {% block tabtitle %}{% endblock %}
        </title>
        {# Set the icons to use in the tab header #}
        <link rel="apple-touch-icon"
              sizes="76x76"
              href="{% static 'images/simmate-icon.svg' %}">
        <link rel="icon"
              type="image/png"
              href="{% static 'images/simmate-icon.svg' %}">
        {# Set meta data for responsive viewport scaling/size (i.e. phone vs monitor) #}
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="A toolkit and framework for materials science"
              name="description" />
        <meta content="The Simmate Team" name="author" />
        {# Load CSS #}
        <link href="https://archives.simmate.org/assets/css/icons.min.css"
              rel="stylesheet"
              type="text/css" />
        <link href="https://archives.simmate.org/assets/css/app-modern.min.css"
              rel="stylesheet"
              type="text/css"
              id="app-style" />
        {# Load Plotly Javascript #}
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        {# Django-unicorn scripts (+custom styling) for dynamic webpages / AJAX calls #}
        {% unicorn_scripts %}
        <link rel="stylesheet"
              type="text/css"
              href='{% static "/css/unicorn_errors.css" %}'>
        {# Load ChemDoodle Javascript, CSS, default styling setting, and a custom drawing util #}
        <link rel="stylesheet"
              href="https://archives.simmate.org/assets/chemdoodle/ChemDoodleWeb.css"
              type="text/css">
        <script type="text/javascript"
                src="https://archives.simmate.org/assets/chemdoodle/ChemDoodleWeb.js"></script>
        <link rel="stylesheet"
              href="https://archives.simmate.org/assets/chemdoodle/uis/jquery-ui-1.11.4.css"
              type="text/css">
        <script type="text/javascript"
                src="https://archives.simmate.org/assets/chemdoodle/uis/ChemDoodleWeb-uis.js"></script>
        {# Custom Simmate Javascript #}
        <script type="text/javascript" src="{% static "js/chemdoodle_utils.js" %}"></script>
        <script type="text/javascript" src="{% static "js/select2_utils.js" %}"></script>
        {# Some pages may require extra lines in the header such as loading extra libraries #}
        {% block extraheader %}{% endblock %}
    </head>
    <body class="loading"
          data-layout-color="light"
          data-layout="detached"
          data-rightbar-onstart="true">
        {# token always required for Django-Unicorn #}
        {% csrf_token %}
        {# Pre-loader #}
        <div id="preloader">
            <div id="status">
                <div class="bouncing-loader">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        {# The navigation bar is the same for every webpage #}
        {% include "core_components/navbar.html" %}
        {# This is the main portion of the webpage. The sidebar and footbar are always present, and the remainder of the page varies. #}
        <div class="container-fluid">
            <div class="wrapper">
                {% include "core_components/sidebar_left.html" %}
                <div class="content-page">
                    <div class="container-fluid">
                        {% block body %}{% endblock %}
                    </div>
                    {% include "core_components/footerbar.html" %}
                </div>
            </div>
        </div>
        {# Many packages for JS libraries should be loaded last #}
        {% include "core_components/footer.html" %}
        {# Sometimes we load extra javascript at the bottom of the page #}
        {% block extrafooter %}
        {% endblock %}
    </body>
</html>
