{% 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 lang="en">

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

    <title>{% block title %}Swan{% endblock %}</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="{{ static_url('swan/logos/favicon.ico') }}">

    {% block stylesheet %}
    <link rel="stylesheet" href="{{ static_url('css/style.min.css') }}" type="text/css"/>
    <link rel="stylesheet" href="{{ static_url('swan/css/style.css') }}" type="text/css"/>
    {% endblock %}
    {% block scripts %}
      <script src="{{static_url('components/requirejs/require.js') }}" type="text/javascript" charset="utf-8"></script>
      <script src="{{static_url('components/jquery/dist/jquery.min.js') }}" type="text/javascript" charset="utf-8"></script>
      <script src="{{static_url('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 %}
        xsrf_token: "{{ xsrf_token }}",
      }
    </script>

    {% block meta %}
    {% endblock %}

</head>

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



<header>
    <div id="header-container" class="container">
        <div class="row">
            <div class="col-md-3 col-xs-6">
                <div id="ipython_notebook" class="nav navbar-brand"><a href="{{logo_url or base_url}}" title='SWAN'><img src='{{base_url}}logo' alt='SWAN' title='Home'/></a></div>
            </div>

            <div class="col-md-3 col-md-push-6 col-xs-6 control">
              <div id="buttons-right-wrapper">
                  <div id="buttons-right">
                      {% block nav_bar_right_items %}
                      {% block login_widget %}
                      {% if user %}
                      <p class="navbar-text">{{user.name}}</p>
                      <button class="btn btn-default btn-xs" onclick="javascript: window.location = '{{logout_url}}'">
                          <i class="fa fa-sign-out" aria-hidden="true"></i>
                      </button>
                      {% else %}
                      <a id="login" role="button" class="btn-sm btn navbar-btn btn-default" href="{{login_url}}"><i class="fa fa-sign-in" aria-hidden="true"></i></a>
                      {% endif %}
                      {% endblock %}
                      {% endblock %}
                  </div>
              </div>
          </div>


          <div class="middle col-md-6 col-md-pull-3 col-xs-12">
              {% if user %}
              <div id="menu">
                  <ul class="nav nav-tabs">
                      <li><a href="{{base_url}}home"><i class="fa fa-home" aria-hidden="true"></i><span class="text">Home</span></a></li>
                      <li><a href="{{base_url}}token"><i class="fa fa-cog" aria-hidden="true"></i><span class="text">Token</span></a></li>
                      {% if 'admin-ui' in parsed_scopes %}<li><a href="{{base_url}}admin"><i class="fa fa-handshake-o" aria-hidden="true"></i><span class="text">Admin</span></a></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 %}
                          <li><a class="dropdown-item" href="{{service.prefix}}">{{service.name}}</a></li>
                          {% endfor %}
                        </ul>
                      </li>
                      {% endif %}-->
                  </ul>
              </div>
              {% endif %}
          </div>
        </div>
    </div>
    <div class="header-bar"></div>

    {% block header %}
    {% endblock %}
</header>

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


{% block main %}
{% endblock %}

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

<footer>
    <div class="container">
        <div class="row">
            <div class="col-xs-8 text">
                <span class="text-muted">SWAN &copy; Copyright CERN 2016-{{ current_year }}. All rights reserved.</span>
                <ul class="text-muted">
                    <li><a target="_blank" href="https://cern.ch/swan/">Home</a></li>
                    <li><a target="_blank" href="https://swan-community.web.cern.ch/">Community</a></li>
                    <li><a target="_blank" href="https://cern.service-now.com/service-portal/?id=functional_element&name=swan">Support</a></li>
                    <li><a target="_blank" href="https://github.com/swan-cern">Github</a></li>
                </ul>
            </div>
            <div class="col-xs-4 logo">
                <img src="{{ static_url('swan/logos/logo_cern.png') }}" alt="CERN"/>
            </div>
        </div>
    </div>
</footer>

{% block script %}

{% endblock %}

</body>

</html>
