<!DOCTYPE html>
<html>
  <head>
    <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><%= user.username %>-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: #FFFFFF;
      }
      .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>
    <% include ../navbar.ejs %>
    <div class="ui main text container">
      <% if(message.length > 0){ %>
        <div class="ui sucess message">
          <i class="close icon"></i>
          <div class="header">Aviso</div>
          <ul class="list">
            <% for (msg in message) { %>
              <li><%= message[msg] %></li>
            <% } %>
          </ul>
        </div>
      <% } %>
      <div class="ui three centered stackable cards">
        <div class="card">
          <div class="image">
            <img src="/images/profile/image.png">
          </div>
        </div>
        <div class="card">
          <div class="content">
            <div class="header"><%= user.username %></div>
            <div class="meta">Linux ID: <%= user.uid %></div>
            <div class="description">Última Conexión: <%= ("0" + user.connection.getDate()).slice(-2) + "/"  + ("0" + (user.connection.getMonth() + 1)).slice(-2) + "/" + user.connection.getFullYear() %>
            <%= ("0" + user.connection.getHours()).slice(-2) + ":"  + ("0" + (user.connection.getMinutes() + 1)).slice(-2) %></div>
            <br />
            <a href="/user/edit/<%= user.username %>" class="circular ui icon yellow button" data-content="Editar Perfil"><i class="write icon"></i></a>
            <!-- <a href="/user/edit/photo/<%= user.username %>" class="circular ui icon yellow button" data-content="Editar Foto"><i class="photo icon"></i></a> -->
          </div>
        </div>
      </div>
    </div>
    <div class="ui main text container">
      <form class="ui form" method="post" action="/attendance/new">
        <div class="field">
          <h4 class="ui dividing header">Nombre Completo</h4>
          <div class="two fields">
            <div class="field">
              <label>Nombres</label>
              <input type="text" name="name" readonly="" placeholder="<%= user.name %>">
            </div>
            <div class="field">
              <label>Apellidos</label>
              <input type="text" name="last" readonly="" placeholder="<%= user.last_name %>">
            </div>
          </div>
        </div>
        <h4 class="ui dividing header">Identificación</h4>
        <div class="field">
          <div class="fields">
            <div class="six wide field">
              <label>Código</label>
              <input type="text" name="user_id" readonly="" placeholder="<%= user.user_id %>">
            </div>
            <div class="ten wide field">
              <label>Correo Electrónico</label>
              <input type="text" name="email" readonly="" placeholder="<%= user.email %>">
            </div>
          </div>
        </div>
        <div class="eight wide field">
          <label>Ocupación</label>
          <input type="text" name="profession" readonly="" placeholder="<%= user.profession %>">
        </div>
        <!-- <div class="ui submit button">Enviar</div> -->
      </form>
    </div>

    <% include ../footer %>
  </body>

</html>
