{% extends "page.html" %}
{% if announcement_login is string %}
{% set announcement = announcement_login %}
{% endif %}



{% block main %}
{% block login %}
<div class="">
  {% block login_container %}
  {% if custom_html %}
  {{ custom_html | safe }}
  {% elif login_service %}
  <div>
 
    <div class="container-fluid" id="background_cover">
      <div id="sandbox_cont">
        <div id="sandbox_title">SANDBOX</div>

        <div id="sandbox_subtitle">A sub-project of IKID</div>
        <br>
        <button id="btn_signin" class="pf-c-button pf-m-tertiary"
          type="button"
          onclick="window.location.href='{{authenticator_login_url}}'">Sign in <i class="fas fa-user" aria-hidden="true"></i></button>
        <div id="myBtn">* Read &
          Accept the <b id="toc_txt">T&C</b></div>

      </div>
    </div>
   
    <div id="myModal" class="modal">

      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <div class="pf-c-content">
          <p> <md-block> {{ tc }} </md-block>  </p>
        </div>

      </div>

    </div>
    <div class="container">
      <div class="row" style="padding-top: 50px;">
        <div class="col-md-12 center-block">
          <div class="pf-c-content">
          <p>

            <md-block> {{ description }} </md-block> 
            <br>
          </p>
          </div>
        </div>
      </div>
      <div class="pf-c-content" id="top_spc">
        <h2>Project funded and supported by:</h2>
        <br>
      </div>
      <div class="row" style="margin-bottom:50px">

        <div class="col-md-2 col-md-offset-1">
          <a href="https://www.bmbf.de" target="_blank"><img src="../static/images/logo_bmbf.svg"
              class="supp_logo"></a>
        </div>
        <div class="col-md-2">
          <a href="https://mwk.baden-wuerttemberg.de/" target="_blank"><img src="../static/images/logo_mwk.png"
              class="supp_logo"></a>
        </div>
        <div class="col-md-2">
          <a href="https://www.hdm-stuttgart.de" target="_blank"> <img src="../static/images/logo_hdm.png"
              class="supp_logo"></a>
        </div>
        <div class="col-md-2">
          <a href="https://www.hdm-stuttgart.de/digitale-ethik/forschung/forschungsprojekte/IKID/" target="_blank"> <img
              src="../static/images/logo_IKID.png" class="supp_logo"></a>
        </div>
        <div class="col-md-2">
          <a href="https://ai.hdm-stuttgart.de/" target="_blank"> <img src="../static/images/logo_IAAI.svg"
               class="supp_logo"></a>
        </div>
      </div>

    </div>

  </div>
  {% else %}
  <form action="{{authenticator_login_url}}" method="post" role="form">
    <div>
      <h1>bla</h1>
    </div>
    <div class="auth-form-header">
      Sign in
    </div>
    <div class='auth-form-body'>

      <p id='insecure-login-warning' class='hidden'>
        Warning: JupyterHub seems to be served over an unsecured HTTP connection.
        We strongly recommend enabling HTTPS for JupyterHub.
      </p>

      {% if login_error %}
      <p class="login_error">
        {{login_error}}
      </p>
      {% endif %}
      <label for="username_input">Username:</label>
      <input id="username_input" type="text" autocapitalize="off" autocorrect="off" autocomplete="username"
        class="form-control" name="username" val="{{username}}" tabindex="1" autofocus="autofocus" />
      <label for='password_input'>Password:</label>
      <input type="password" class="form-control" autocomplete="current-password" name="password" id="password_input"
        tabindex="2" />

      <div class="feedback-container">
        <input id="login_submit" type="submit" class='btn btn-jupyter' value='Sign in' tabindex="3" />
        <div class="feedback-widget hidden">
          <i class="fa fa-spinner"></i>
        </div>
      </div>

      {% block login_terms %}
      {% if login_term_url %}
      <div id="login_terms" class="login_terms">
        <input type="checkbox" id="login_terms_checkbox" name="login_terms_checkbox" required />
        {% block login_terms_text %} {# allow overriding the text #}
        By logging into the platform you accept the <a href="{{ login_term_url }}">terms and conditions</a>.
        {% endblock login_terms_text %}
      </div>
      {% endif %}
      {% endblock login_terms %}

    </div>
  </form>
  {% endif %}
  {% endblock login_container %}


</div>
{% endblock login %}

{% endblock %}

{% block script %}
{{ super() }}
<script>
  function validate() {
    if (document.getElementById('toc-check').checked) {
      alert("checked");
    } else {
      alert("You didn't check it! Let me check it for you.");
    }
  };
  // setup onSubmit feedback
  $('form').submit((e) => {
    var form = $(e.target);
    form.find('.feedback-container>input').attr('disabled', true);
    form.find('.feedback-container>*').toggleClass('hidden');
    form.find('.feedback-widget>*').toggleClass('fa-pulse');
  });
  // Get the modal
  var modal = document.getElementById("myModal");

  // Get the button that opens the modal
  var btn = document.getElementById("myBtn");

  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];

  // When the user clicks on the button, open the modal
  btn.onclick = function () {
    modal.style.display = "block";
  }

  // When the user clicks on <span> (x), close the modal
  span.onclick = function () {
    modal.style.display = "none";
  }

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }

</script>
{% endblock %}