{% macro modal(title, btn_label=None, btn_class="btn-primary") %}
  {% set key = title.replace(' ', '-').lower() %}
  {% set btn_label = btn_label or title %}
  <div class="modal fade"
       id="{{ key }}-dialog"
       tabindex="-1"
       role="dialog"
       aria-labelledby="{{ key }}-label"
       aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title" id="{{ key }}-label">{{ title }}</h2>
          <button type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"></button>
        </div>
        <div class="modal-body">{{ caller() }}</div>
        <div class="modal-footer">
          <button type="button"
                  class="btn {{ btn_class }}"
                  data-bs-dismiss="modal"
                  data-dismiss="modal">{{ btn_label }}</button>
        </div>
      </div>
    </div>
  </div>
{% endmacro %}
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>
      {%- block title -%}
        Grader Service
      {%- endblock title -%}
    </title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% block stylesheet %}
      <link rel="stylesheet" href="{{ static_url("css/style.min.css") }}" type="text/css" />
    {% endblock stylesheet %}
    {% block favicon %}
      <link rel="icon" href="{{ static_url("favicon.ico") }}" type="image/x-icon">
    {% endblock favicon %}
    {% block scripts %}
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    {% endblock scripts %}
    {# djlint js formatting doesn't handle template blocks in js #}
    {# djlint: off #}
    <script type="text/javascript">
      /*
      require.config({
        {% if version_hash %}
        urlArgs: "v={{version_hash}}",
        {% endif %}
        baseUrl: '{{static_url("js", include_version=False)}}',
        paths: {
          components: '../components',
          jquery: '../components/jquery/dist/jquery.min',
          moment: "../components/moment/moment",
        },
      });
      */

      window.jhdata = {
        base_url: "{{base_url}}",
        prefix: "{{prefix}}",
        {% if user %}
        {#- Autoescaping in templates is turned on in JupyterHub, #}
        {#-  need `| safe` to prevent escaping #}
        {#- `https://github.com/pallets/markupsafe/blob/2.1.4/src/markupsafe/_native.py#L6` #}
        user: "{{ user.json_escaped_name | safe }}",
        {% endif %}
        {% if admin_access %}
        admin_access: true,
        {% else %}
        admin_access: false,
        {% endif %}
        xsrf_token: "{{ xsrf_token }}",
      };

</script>
    {# djlint: on #}
    {% block meta %}
      <meta name="description" content="JupyterHub">
      <meta name="keywords" content="Jupyter, JupyterHub">
    {% endblock meta %}
  </head>
  <body>
    <noscript>
      <div id='noscript'>
        JupyterHub requires JavaScript.
        <br>
        Please enable it to proceed.
      </div>
    </noscript>
    {% block nav_bar %}
      <nav class="navbar navbar-expand-sm bg-body-tertiary mb-4">
        <div class="container-fluid">
          {% block logo %}
            <span id="jupyterhub-logo" class="navbar-brand">
              <a href="{{ logo_url or base_url }}">
                <img src='{{ base_url }}logo'
                     alt='JupyterHub logo'
                     class='jpy-logo'
                     title='Home' />
              </a>
            </span>
          {% endblock logo %}
          <div class="collapse navbar-collapse" id="thenavbar">
            <ul class="nav navbar-nav me-2">
              {% block nav_bar_right_items %}
                <li class="nav-item" style='padding: 10px 20px;'>
                  {% block login_widget %}
                    <span id="login_widget">
                      {% if user %}
                        <span class="navbar-text">{{ user.name }}</span>
                        <a id="logout"
                           role="button"
                           class="btn btn-sm btn-outline-dark"
                           style='font-size: 14px;'
                           href="{{ logout_url }}"> <i aria-hidden="true" class="fa fa-sign-out"></i> Logout</a>
                      {% else %}
                        <a id="login"
                           role="button"
                           class="btn btn-sm btn-outline-dark"
                           href="{{ login_url }}">Login</a>
                      {% endif %}
                    </span>
                  {% endblock login_widget %}
                </li>
              {% endblock nav_bar_right_items %}
            </ul>
          </div>
          {% block header %}
          {% endblock header %}
        </div>
      </nav>
    {% endblock nav_bar %}
    {% block announcement %}
      {% if announcement %}
        <div class="container text-center announcement alert alert-warning">{{ announcement | safe }}</div>
      {% endif %}
    {% endblock announcement %}
    {% block main %}
    {% endblock main %}
    {% block footer %}
    {% endblock footer %}
    {% call modal('Error', btn_label='OK') %}
      <div class="ajax-error alert-danger">The error</div>
    {% endcall %}
    {% block script %}
    {% endblock script %}
  </body>
</html>
