<!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">
      <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: <%= user.connection %></div>
            <br />
            <form id        =  "uploadForm"
                 enctype   =  "multipart/form-data"
                 action    =  "/user/edit/photo/<%= user.username %>"
                 method    =  "post"
            >
            <input type="file" name="userPhoto" />
            <input type="submit" value="Upload Image" name="submit">
            </form>
          </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="disabled field">
              <label>Nombres</label>
              <input type="text" name="name" placeholder="<%= user.name %>">
            </div>
            <div class="disabled field">
              <label>Apellidos</label>
              <input type="text" name="last" 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 disabled field">
              <label>Código</label>
              <input type="text" name="user_id" placeholder="<%= user.user_id %>">
            </div>
            <div class="ten wide disabled field">
              <label>Correo Electrónico</label>
              <input type="text" name="email" placeholder="<%= user.email %>">
            </div>
          </div>
        </div>
        <div class="eight wide disabled field">
          <label>Ocupación</label>
          <input type="text" name="profession" placeholder="<%= user.profession %>">
        </div>
        <!-- <div class="ui submit button">Enviar</div> -->
      </form>
    </div>

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

</html>
