{% load static %}
{% simmate_setting "website.chemdraw_js" as chemdraw_js %}
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
    <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 %}Simmate{% 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" />
        {# Bootstrap CSS #}
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
              rel="stylesheet"
              integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
              crossorigin="anonymous">
        {# Bootstrap Icons #}
        <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
        {# Simmate CSS #}
        <link rel="stylesheet"
              type="text/css"
              href='{% static "/css/simmate.2026_03_21.css" %}'>
        {# CodeHilite CSS #}
        <link rel="stylesheet"
              type="text/css"
              href="{% static '/css/codehilite.css' %}">
        {# jQuery Javascript #}
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        {# Bootstrap Javascript #}
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous">
        </script>
        {# Htmx Javascript #}
        {% htmx_cdn_script %}
        {# Select2 Javascript and CSS #}
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
              rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
        {# Plotly Javascript #}
        <script src="https://cdn.plot.ly/plotly-3.4.0.min.js"></script>
        {# Load the RDKit JS file #}
        <script src="https://unpkg.com/@rdkit/rdkit@2024.3.5-1.0.0/dist/RDKit_minimal.js"></script>
        {# ThreeJS Javascript #}
        <script type="importmap">
            {
                "imports": {
                    "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
                    "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
                }
            }
        </script>
        {% if chemdraw_js %}
            <script src="{% static "chemdrawweb/chemdrawweb.js" %}"></script>
            <script>var ChemDrawLicenseURL = '{% static "/licenses/ChemDraw-JS-License.xml" %}';</script>
            <script type="text/javascript"
                    src="{% static 'js/chemdraw_utils.2026_01_22.js' %}"></script>
        {% else %}
            {# TODO: switch to ketcher as the default #}
            {# Load ChemDoodle JS and CSS #}
            <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>
            <script type="text/javascript"
                    src="{% static 'js/chemdoodle_utils.2024_09_03.js' %}"></script>
        {% endif %}
        {# Rest of Custom Simmate Javascript #}
        <script type="text/javascript"
                src="{% static 'js/rdkit_utils.2024_11_07.js' %}"></script>
        <script type="text/javascript"
                src="{% static 'js/form_utils.2025_06_02.js' %}"></script>
        <script type="text/javascript"
                src="{% static 'js/progress_bars.2024_05_27.js' %}"></script>
        <script type="text/javascript"
                src="{% static 'js/select2_utils.2024_11_07.js' %}"></script>
        <script type="text/javascript"
                src="{% static 'js/bootstrap_utils.2025_09_23.js' %}"></script>
        <script type="text/javascript"
                src="{% static 'js/htmx_utils.2025_09_25.js' %}"></script>
        <script type="module" src="{% static 'js/threejs_utils.2026_01_11.js' %}"></script>
        {# Some pages may require extra lines in the header such as loading extra libraries #}
        {% block extraheader %}{% endblock %}
    </head>
    <body>
        {# token always required for htmx #}
        {# hx-headers='{"x-csrftoken": "{{ csrf_token }}"}' #}
        {% csrf_token %}
        {# have the hidden spinner for when htmx is loading #}
        {% htmx_loading_spinner %}
        {# The navigation bar is the same for every webpage #}
        {% include "core/navbar.html" %}
        {% block breadcrumbs %}
            {% include "core/basic_elements/breadcrumbs.html" %}
        {% endblock %}
        {% if not fullpage_dashboard %}
            {# This is the main portion of the webpage #}
            {# TODO: include "core/sidebar_left.html" #}
            <div id="main_body_container"
                 class="container{% if full_width_body %}-flex{% endif %} min-vh-100 py-3">
                {% block body %}{% endblock %}
            </div>
        {% else %}
            {# Some streamlit dashboards are best displayed as a full page. This setup is rare and more rigid #}
            <div class="container-flex min-vh-100">
                <iframe src="{{ dashboard_url }}?embed=true&user_id={{ request.user.id }}"
                        style="height:150vh;
                               width:100%;
                               border:none"></iframe>
            </div>
        {% endif %}
        {% include "core/footerbar.html" %}
        {# Many packages for JS libraries should be loaded last #}
        {% include "core/footer.html" %}
        {# Sometimes we load extra javascript at the bottom of the page #}
        {% block extrafooter %}{% endblock %}
        {# Chat Bubble Component #}
        {% htmx_component "chat-bubble" %}
    </body>
</html>
