{# https://github.com/jupyterhub/jupyterhub/issues/1385 #}
{# https://github.com/jupyterhub/jupyterhub/issues/1385#issuecomment-738447175 #}
{% extends "templates/login.html" %}

{% set announcement = 'test announcement message' %}
{% set csusb_hub_title = 'Welcome to Cal State San Bernardino JupyterHub' %}
{% set csusb_cilogon = 'The following log in uses CSUSB\'s login system\n For details, check out this webpage' %}

{% block login %}
<div class="container text-center csusb">
    <h1>{{ csusb_hub_title  }}</h1>
    <h4>
      <p>{{ csusb_cilogon | safe }}</p>
      <p>For more information about HPC at CSUSB, please visit <a href="https://www.csusb.edu/academic-technologies-innovation/xreal-lab-and-high-performance-computing/high-performance" target="_blank">CSUSB High Performance Computing Initiative</a></p>
    </h4>
{{ super() }}
</div>
{% endblock %}


{% block stylesheet %}
{{ super() }}
<style>
.branding img {
    display: block; 
    width: 350px;
    /* top right bottom left */
    margin: 0 auto 0 auto;
}

#login-main .auth-form-body {
    border-color: rgb(0, 124, 186);
    color: white;
}

#login-main {
    margin-top: 1%;
    height: 100%;
}

footer {
    border-top: 1px solid silver;
    padding: 10px;
    bottom: 0;
    position: fixed;
    width: 100%;
}

footer p{
    margin: 0 auto 0 auto;
    text-align: center;
}

#login-main form {
    vertical-align: top;
}

#login-main .auth-form-header {
    color: white;
    background: rgb(219, 170, 0);
    border: 1px solid;
    border-color: rgb(0, 124, 186);
}

#insecure-login-warning {
    color: black;
}

.btn-jupyter.active, .btn-jupyter:active, .open>.dropdown-toggle.btn-jupyter {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #a88400;
    border-color: #a88400;
    outline-color: #a88400;
}

#login-main .form-control:focus, #login-main input[type=submit]:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(219, 170, 0);
    border-color: rgb(219, 170, 0);
    outline-color: rgb(219, 170, 0);
}

.btn-jupyter {
    color: #fff;
    background-color: rgb(219, 170, 0);
    border-color: rgb(219, 170, 0);
}

</style>
{% endblock %}