{% extends "base.html" %}

{% block content %}

<body background="{{ url_for('static',filename='img/sjd.png') }}">
  <div class="row">
    <div class="col">
      <div class="card" id="indexCardMain">
        <div class="card-body">
          <h2>Welcome!</h2>
          <hr>
          This is the SJD Babylab database. It provides an interface with the REDCap database
          to consult participant and appointment information conveniently. This is a work in progress, feel free to
          report issues and provide feed-back (<a href=" mailto:gonzalo.garcia@sjd.es">gonzalo.garcia@sjd.es</a>).
        </div>
      </div>
      <img src="{{ url_for('static', filename='img/ndc-logo.svg') }}" id="img-ndc-logo" width="--" height="--"
        alt="NDC logo">
    </div>
    <div class="col">
      {% if not redcap_version %}
      <div class="alert alert-light" role="alert" id="indexCardLogin">
        <h4 class="alert-heading">Log in</h4>
        <p>Please, provide your API token to access the database:</p>
        <form class="form" method="post" action='{{ url_for("index") }}'>
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="token-addon">API Token</span>
            </div>
            <input type="password" class="form-control" id="apiToken" name="apiToken" aria-describedby="token-addon"
              placeholder="">
          </div>
          <br>
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="email-addon">E-mail</span>
            </div>
            <input type="email" class="form-control" id="email" name="email" placeholder=""
              aria-describedby="email-addon">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <hr>
        <p class="mb-0">You can find yor API token at REDCap.</p>
      </div>
      {% endif %}
    </div>
  </div>
</body>
{% endblock content %}