{% 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">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
            class="sr-only">Close</span></button>
        <h4 class="modal-title" id="{{key}}-label">{{title}}</h4>
      </div>
      <div class="modal-body">
        {{ caller() }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn {{btn_class}}" data-dismiss="modal" data-dismiss="modal">{{btn_label}}</button>
      </div>
    </div>
  </div>
</div>
{% endmacro %}


<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">

  <title>{% block title %}Sandbox{% endblock %}</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/css/style.min.css" type="text/css" />
  <link rel="stylesheet" href="../static/css/patternfly.css" type="text/css">
  <link rel="stylesheet" href="../static/components/font-awesome/css/font-awesome.min.css" type="text/css">
  {% endblock %}
  {% block favicon %}
  <link rel="icon" href="../static/favicon.ico" type="image/x-icon">
  {% endblock %}
  {% block scripts %}
  <script src="../static/components/md-block/md-block.js" type="module" charset="utf-8"></script>
  <script src="../static/components/requirejs/require.js" type="text/javascript" charset="utf-8"></script>
  <script src="../static/components/requirejs/require.js" type="text/javascript" charset="utf-8"></script>
  <script src="../static/components/jquery/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../static/components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

  {% endblock %}
  <script>
    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',
          bootstrap: '../components/bootstrap/dist/js/bootstrap.min',
            moment: "../components/moment/moment",
          },
    shim: {
      bootstrap: {
        deps: ["jquery"],
          exports: "bootstrap"
      },
    }
      });
  </script>

  <script type="text/javascript">
    window.jhdata = {
      base_url: "{{base_url}}",
      prefix: "{{prefix}}",
        {% if user %}
    user: "{{user.json_escaped_name}}",
      {% endif %}
    {% if admin_access %}
    admin_access: true,
      {% else %}
    admin_access: false,
      {% endif %}
    {% if not no_spawner_check and user and user.spawner.options_form %}
    options_form: true,
      {% else %}
    options_form: false,
      {% endif %}
      }
  </script>

  {% block meta %}
  {% endblock %}

</head>

<body>

  <noscript>
    <div id='noscript'>
      JupyterHub requires JavaScript.<br>
      Please enable it to proceed.
    </div>
  </noscript>

  {% block nav_bar %}
  <div class="pf-c-tabs" id="default-tabs">
    <button class="pf-c-tabs__scroll-button" type="button" disabled aria-hidden="true" aria-label="Scroll left">
      <i class="fas fa-angle-left" aria-hidden="true"></i>
    </button>
    <ul class="pf-c-tabs__list">
      <li class="pf-c-tabs__item">
        <a class="pf-c-page__header-brand-link" href="{{logo_url or base_url}}"><img class="pf-c-brand"
            style="max-height: 28px;margin:0px 5px 0px 5px" src='../static/images/sandbox-b-t.svg' alt="Sandbox"></a>

      </li>
      <li class="pf-c-tabs__item ">

        <button type="button" class="pf-c-tabs__link" onclick="window.location.href='{{logo_url or base_url}}'">
          <span class="pf-c-tabs__item-text">Sandbox</span>
        </button>
        {% if user %}

        {% block nav_bar_left_items %}
      <li class="pf-c-tabs__item">
        <button type="button" class="pf-c-tabs__link" onclick="window.location.href='{{base_url}}home'">
          <span class="pf-c-tabs__item-text">Home</span>
        </button>
      </li>
      <li class="pf-c-tabs__item">
        <button type="button" class="pf-c-tabs__link" onclick="window.location.href='{{base_url}}token'">
          <span class="pf-c-tabs__item-text">Token</span>
        </button>
      </li>

      {% if 'admin-ui' in parsed_scopes %}
      <li class="pf-c-tabs__item">
        <button type="button" class="pf-c-tabs__link" onclick="window.location.href='{{base_url}}admin'">
          <span class="pf-c-tabs__item-text">Admin</span>
        </button>
      </li>
      {% endif %}
      {% if services %}
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
          aria-expanded="false">Services<span class="caret"></span></a>
        <ul class="dropdown-menu">
          {% for service in services %}
          {% block service scoped %}
          <li><a class="dropdown-item" href="{{service.prefix}}">{{service.name}}</a></li>
          {% endblock %}
          {% endfor %}
        </ul>
      </li>
      {% endif %}
      {% endblock %}

      {% endif %}
    </ul>
    <div class="pf-c-page__header-tools">
      {% block login_widget %}
      <span id="login_widget">
        {% if user %}
        <div class="pf-c-page__header-tools-item">{{user.name}}</div>
        <div class="pf-c-page__header-tools-item"> <a id="logout" role="button"
            class="navbar-btn btn-sm btn btn-default" href="{{logout_url}}" style="border-color: #fff;font-size: 15px;">
            <i aria-hidden="true" class="fa fa-sign-out"></i></a></div>

        {% endif %}
      </span>
      {% endblock %}
    </div>
  </div>


  {% endblock %}


  {% block announcement %}
  {% if announcement %}
  <div class="container text-center announcement alert alert-warning">
    {{ announcement | safe }}
  </div>
  {% endif %}
  {% endblock %}

  

  {% block main %}

  {% endblock %}

  {% block footer %}

  {% endblock %}

  {% call modal('Error', btn_label='OK') %}
  <div class="ajax-error">
    The error
  </div>
  {% endcall %}

  {% block script %}
  {% endblock %}

</body>

</html>