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

<!-- {% set announcement = 'We are testing customized style / The server works the same way as before' %} -->
{% set csusb_hub_title = 'Welcome to Cal State San Bernardino JupyterHub' %}
{% set csusb_cilogon = 'The login process (the orange button) uses CSUSB\'s DUO system' %}

{% block login %}
<div class="container text-center">
    <h2>{{ csusb_hub_title  }}</h2>
    <h5>
        <p>{{ csusb_cilogon | safe }}</p>
        {# <p>Visit <a href="https://www.csusb.edu/high-performance-computing" target="_blank">CSUSB High Performance Computing Initiative</a> for more information about CSUSB HPCI 
        </p> #}
    </h5>
</div>
<p> &nbsp </p>
<p> &nbsp </p>
<p> &nbsp </p>
{{ super() }}
<p> &nbsp </p>
<div id="login-cilogon-info" class="service-login">
    <h5>      
    <p>Be sure to choose <ins>California State University San Bernardino</ins> on the next page instead of <del>ORCID</del>
    </h5>
</div>
<div class="container text-center">
<details>
    <summary>Click here for more details</summary>
    <img id="idp_selector_info" style="width: 70%" src="{{ static_url("select_idp_cilogon.png") }}" alt="CILogon-CSUSB-Select">
</details>
</div>
{% endblock %}

{% block stylesheet %}
{{ super() }}
<style>
#login-main{
    margin-top: 1%;
    height: 100%;
}
#login-cilogon-info{
    text-align: center;
    display: table;
    vertical-align: middle;
    margin: 1% auto auto auto;
    padding-left: 0%;
    width: 380px;
}
#idp_selector_info {
    max-width:100%;
    height:auto;
    max-height:100%;
}
p.extra-space {
    line-height: 0.7;
}
</style>
{% endblock %}