<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="./">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>RemoteRoboLab</title>
    <link rel="icon" type="image/ico" href="{{ url_for('static', filename='img/favicon.ico') }}" sizes="any" />
    <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/flag-icon.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/icons.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='vendors/pace-progress/css/pace.min.css') }}"  rel="stylesheet">
  </head>
  <body class="app flex-row align-items-center">
    <div class="container">
      <div class="row justify-content-center" style="margin-top:10px;">
          {% with messages = get_flashed_messages() %}
            {% if messages %}
              {% for message in messages %}
                <span class="alert alert-warning">{{ message }}</span>
              {% endfor %}
            {% endif %}
          {% endwith %}
      </div>
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="card-group">
            <div class="card p-4">
              <div class="card-body">
                <h1 style="text-align: center;">Acceder</h1>
                <p class="text-muted">Accede a tu cuenta</p>
                <form action="{{ url_for('do_login') }}" method="POST" enctype="multipart/form-data">
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fa fa-user"></i>
                      </span>
                    </div>
                    <input class="form-control" type="text" name="username" placeholder="Usuario">
                  </div>
                  <div class="input-group mb-4">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fa fa-lock"></i>
                      </span>
                    </div>
                    <input class="form-control" type="password" name="password" placeholder="Contraseña">
                  </div>
                  <div class="row justify-content-center">
                    <div class="col-6 justify-content-center">
                      <button class="btn btn-primary px-4" type="submit">Acceder</button>
                    </div>
                    <!--
                    <div class="col-6 text-right">
                      <button class="btn btn-link px-0" type="button">Forgot password?</button>
                    </div>
                    -->
                  </div>
                </form>
              </div>
            </div>
            <div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%">
              <div class="card-body text-center">
                <div>
                  <h3>¿Quieres utilizar nuestra plataforma?</h3>
                  <br><br>
                  <button class="btn btn-primary active mt-3" type="button" data-toggle="modal" data-target="#accessModal">Solicitar acceso</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="accessModal" tabindex="-1" role="dialog" aria-labelledby="accessModal" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="container">
                <div class="row justify-content-center">
                  <div class="col-md-12">
                    <div class="card mx-4" style="border:0;">
                      <div class="card-body p-4">
                        <h1>Solicitar acceso</h1>
                        <p class="text-muted">Solicita acceso a la plataforma y nos pondremos en contacto contigo.</p>
                        <div class="input-group mb-4">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="fa fa-user"></i>
                            </span>
                          </div>
                          <input class="form-control" type="text" name="name" placeholder="Nombre">
                        </div>
                        <div class="input-group mb-4">
                          <div class="input-group-prepend">
                            <span class="input-group-text">@</span>
                          </div>
                          <input class="form-control" type="email" placeholder="Email">
                        </div>
                        <div class="input-group mb-4">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="fa fa-university"></i>
                            </span>
                          </div>
                          <input class="form-control" type="text" placeholder="Centro">
                        </div>
                        <div class="input-group mb-4">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="fa fa-book"></i>
                            </span>
                          </div>
                          <input class="form-control" type="text" placeholder="Nivel educativo">
                        </div>
                        <div class="input-group mb-4">
                          <div class="input-group-prepend">
                            <span class="input-group-text">
                              <i class="fa fa-briefcase"></i>
                            </span>
                          </div>
                          <input class="form-control" type="text" placeholder="Vinculación">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-primary">Solicitar</button>
          </div>
        </div>
      </div>
    </div>

    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/pace.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/perfect-scrollbar.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/core.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
  </body>
</html>
