{% load static %}
<!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 (this is needed in the header, not the footer!)-->
        <script src="https://cdn.plot.ly/plotly-latest.min.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">
        {% block preloader %}
            <!-- Pre-loader -->
            <div id="preloader">
                <div id="status">
                    <div class="bouncing-loader">
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </div>
            <!-- End Preloader-->
        {% endblock %}
        <!-- The navigation bar is the same for every webpage, and it is stored in this template -->
        {% 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.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 I need to load extra javascript at the bottom of the page -->
        {% block extrafooter %}{% endblock %}
    </body>
</html>
