<!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>Registro-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: 700px;
      }
      .main.container {
        margin-top: 2em;
      }
      .main.menu {
        margin-top: 4em;
        border-radius: 0;
        border: none;
        box-shadow: none;
        transition:
          box-shadow 0.5s ease,
          padding 0.5s ease
        ;
      }
      .main.menu .item img.logo {
        margin-right: 1.5em;
      }
      .overlay {
        float: left;
        margin: 0em 3em 1em 0em;
      }
      .overlay .menu {
        position: relative;
        left: 0;
        transition: left 0.5s ease;
      }
      .main.menu.fixed {
        background-color: #FFFFFF;
        border: 1px solid #DDD;
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
      }
      .overlay.fixed .menu {
        left: 800px;
      }
      .text.container .left.floated.image {
        margin: 2em 2em 2em -4em;
      }
      .text.container .right.floated.image {
        margin: 2em -4em 2em 2em;
      }
      .ui.footer.segment {
        margin: 5em 0em 0em;
        padding: 5em 0em;
      }
    </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="assets/images/logo.png" class="image"> -->
          <div class="content">
            Registro
          </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="/signup" method="post">
          <div class="ui raised segment">
            <h4 class="ui dividing left aligned header">Nombre Completo</h4>
            <div class="two fields">
              <div class="field">
                <label class="ui left aligned header">Nombre(s)</label>
                <div class="ui left icon input">
                  <i class="user icon"></i>
                  <input type="text" name="name" placeholder="Nombre(s)">
                </div>
              </div>
              <div class="field">
                <label class="ui left aligned header">Apellido(s)</label>
                <div class="ui left icon input">
                  <i class="user icon"></i>
                  <input type="text" name="last_name" placeholder="Apellidos(s)">
                </div>
              </div>
            </div>
            <h4 class="ui dividing left aligned header">Identificación</h4>
            <div class="two fields">
              <div class="field">
                <label class="ui left aligned header">Código</label>
                <div class="ui left icon input">
                  <i class="info icon"></i>
                  <input type="text" name="user_id" placeholder="Código">
                </div>
              </div>
              <div class="field">
                <label class="ui left aligned header">Usuario</label>
                <div class="ui left icon input">
                  <i class="add user icon"></i>
                  <input type="text" name="username" placeholder="Usuario">
                </div>
              </div>
            </div>
            <div class="two fields">
              <div class="field">
                <label class="ui left aligned header">Correo Electrónico</label>
                <div class="ui left icon input">
                  <i class="at icon"></i>
                  <input type="text" name="email" placeholder="Correo Electrónico">
                </div>
              </div>
              <div class="field">
                <label class="ui left aligned header">Ocupación</label>
                <div class="ui left icon input">
                  <i class="student icon"></i>
                  <input type="text" name="profession" placeholder="Ocupación">
                </div>
              </div>
            </div>
            <h4 class="ui dividing left aligned header">Contraseña</h4>
            <div class="two fields">
              <div class="field">
                <label class="ui left aligned header">Contraseña</label>
                <div class="ui left icon input">
                  <i class="lock icon"></i>
                  <input type="password" name="password" placeholder="Contraseña">
                </div>
              </div>
              <div class="field">
                <label class="ui left aligned header">Confirmar Contraseña</label>
                <div class="ui left icon input">
                  <i class="unlock alternate icon"></i>
                  <input type="password" name="confirmPassword" placeholder="Confirmar Contraseña">
                </div>
              </div>
            </div>
            <h4 class="ui dividing left aligned header">Justificación</h4>
            <div class="field">
              <!-- <label class="ui left aligned header">Justificación</label> -->
              <textarea name="text" rows="4" style="resize: none;"></textarea>
            </div>
            <div class="ui fluid large teal submit button">Enviar Datos</div>
          </div>

          <div class="ui error message"></div>

        </form>
        <div class="ui message">
          ¿Tienes Cuenta? <a href="/login">Iniciar Sesión</a>
        </div>
      </div>
    </div>
    <% include ../footer %>

  </body>

</html>
