<!DOCTYPE html>
<html>
  <head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <title>Iniciar sesión-Cluster Lovelace</title>
    <link rel="stylesheet" type="text/css" href="/semantic-ui/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="/css/font.css">

    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/semantic-ui/semantic.min.js"></script>

    <style type="text/css">
      body {
        background-color: #DADADA;
      }
      .column {
        max-width: 450px;
      }
    </style>
    <script>
    $(document)
      .ready(function() {
        $('.ui.form')
          .form({
            fields: {
              email: {
                identifier  : 'email',
                rules: [
                  {
                    type   : 'empty',
                    prompt : 'Please enter your e-mail'
                  },
                  {
                    type   : 'email',
                    prompt : 'Please enter a valid e-mail'
                  }
                ]
              },
              password: {
                identifier  : 'password',
                rules: [
                  {
                    type   : 'empty',
                    prompt : 'Please enter your password'
                  },
                  {
                    type   : 'length[6]',
                    prompt : 'Your password must be at least 6 characters'
                  }
                ]
              }
            }
          })
        ;
      })
    ;
    </script>
    <% include ../navbar.ejs %>
    <div class="ui middle aligned center aligned grid">
      <div class="column">
        <h2 class="ui teal image header">
          <!-- <img src="./images/sirius.svg" class="image"> -->
          <div class="content">Iniciar sesión</div>
        </h2>
        <% if(message.length > 0){ %>
          <div class="ui warning message">
            <i class="close icon"></i>
            <div class="header">Aviso</div>
            <ul class="list">
              <% for (msg in message) { %>
                <li><%= message[msg] %></li>
              <% } %>
            </ul>
          </div>
        <% } %>
        <form class="ui large form" action="/session" method="post">
          <div class="ui raised segment">
            <div class="field">
              <div class="ui left icon input">
                <i class="user icon"></i>
                <input type="text" name="username" placeholder="Nombre de Usuario ó Correo Electrónico">
              </div>
            </div>
            <div class="field">
              <div class="ui left icon input">
                <i class="lock icon"></i>
                <input type="password" name="password" placeholder="Contraseña">
              </div>
            </div>
            <div class="ui fluid large teal submit button">Login</div>
          </div>
          <div class="ui error message"></div>
        </form>
        <div class="ui message">
          No tienes cuenta?<a href="./signup"> Crear</a>
        </div>
      </div>
    </div>
    <% include ../footer %>

  </body>

</html>
