<!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>Admin-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>

    <% include ../navbar.ejs %>
    <div class="ui main text center aligned container">
      <% 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>
      <% } %>
      <h1 class="ui header">Panel de Administración</h1>
    </div>
    <div class="ui main text right aligned container">
      <%# <div class="ui icon buttons">
        <a class="ui compact icon button" data-content="Asistencia" href="/admin/attendance/"><i class="list icon"></i></a>
        <a class="ui compact icon button" data-content="Asistencia" href="/admin/attendance/new"><i class="plus icon"></i></a>
      </div>%>
      <div class="ui icon buttons">
        <a class="ui compact icon button" data-content="Todos los Usuarios" href="/admin/users/"><i class="list icon"></i></a>
        <a class="ui compact icon button" data-content="Usuarios Activos" href="/admin/users/active/"><i class="checkmark icon"></i></a>
        <a class="ui compact icon button" data-content="Usuarios Inactivos" href="/admin/users/inactive/"><i class="remove icon"></i></a>
        <a class="ui compact icon button" data-content="Usuarios Pendientes" href="/admin/users/pending/"><i class="warning icon"></i></a>
        <a class="ui compact icon button" data-content="Agregar Usuario" href="/signup"><i class="add user icon"></i></a>
        <%# <a class="ui compact icon button" data-content="Importar desde SO" href="/admin/users/linux"><i class="linux icon"></i></a>%>
      </div>
    </div>
    <div class="ui main center aligned text container">
      <div class="ui icon buttons">
        <a class="ui icon button"><i class="caret left icon"></i></a>
        <% for (let i = 1; i <= Math.ceil((users.length) / 4); i++) { %>
          <a class="ui button" href="/admin/users/<%= i %>"><%= i %></a>
        <% } %>
        <a class="ui icon button"><i class="caret right icon"></i></a>
      </div>
    </div>
    <div class="ui main text container">
      <div class="ui centered cards">
        <% for (var userbd in users) { %>
          <% if (users[userbd].state === 0) { %>
          <div class="ui yellow card">
          <% } else if (users[userbd].state === 1) { %>
          <div class="ui green card">
          <% } else if (users[userbd].state === 2) { %>
          <div class="ui card">
          <% } else if (users[userbd].state === 3) { %>
          <div class="ui red card">
          <% } %>
          <div class="content">
            <img class="right floated mini ui image" src="/images/profile/image.png">
            <a class="header" href="/user/<%= users[userbd].username %>"><%= users[userbd].name %> <%= users[userbd].last_name %></a>
            <a class="meta" href="/user/<%= users[userbd].username %>"><%= users[userbd].username %></a>
            <div class="meta">COD: <%= users[userbd].user_id %></div>
            <div class="meta">UID: <%= users[userbd].uid %></div>
            <div class="meta">email: <i><%= users[userbd].email %></i></div>
            <div class="meta"><i><b><%= users[userbd].text %></b></i></div>
            <div class="description">
              Creado: <%= ("0" + users[userbd].createdAt.getDate()).slice(-2) + "/"  + ("0" + (users[userbd].createdAt.getMonth() + 1)).slice(-2) + "/" + users[userbd].createdAt.getFullYear() %>
              <%= ("0" + users[userbd].createdAt.getHours()).slice(-2) + ":"  + ("0" + (users[userbd].createdAt.getMinutes() + 1)).slice(-2) %>
            </div>
            <div class="description">
              Última conexión: <%= ("0" + users[userbd].connection.getDate()).slice(-2) + "/"  + ("0" + (users[userbd].connection.getMonth() + 1)).slice(-2) + "/" + users[userbd].connection.getFullYear() %>
              <%= ("0" + users[userbd].connection.getHours()).slice(-2) + ":"  + ("0" + (users[userbd].connection.getMinutes() + 1)).slice(-2) %>
            </div>
          </div>
          <% if (users[userbd].email !== user.email) { %>
            <div class="extra content">
              <div class="ui three icon buttons">
                <% if (users[userbd].state === 0) { %>
                <a class="ui link green button" href="/admin/users/new/<%= users[userbd].username %>">Aprobar</a>
                <% } else if (users[userbd].state === 1 || users[userbd].state === 2) { %>
                <a class="ui red button" href="/admin/users/inactive/<%= users[userbd].username %>">Inactivar</a>
                <% } else if (users[userbd].state === 3) {%>
                <a class="ui green button" href="/admin/users/active/<%= users[userbd].username %>">Activar</a>
                <% } %>
                <a class="ui icon button" href="/user/edit/<%= users[userbd].username %>"><i class="write icon"></i></a>
                <% if (users[userbd].state === 1) { %>
                  <a class="ui icon button" href="/admin/remove/<%= users[userbd].username %>">Admin <i class="remove red icon"></i></a>
                <% } else if (users[userbd].state === 2) { %>
                  <a class="ui icon button" href="/admin/add/<%= users[userbd].username %>">Admin <i class="checkmark green icon"></i></a>
                <% } %>
              </div>
            </div>
          <% } %>
        </div>
        <% } %>
      </div>
    </div>
    <div class="ui main center aligned text container">
      <div class="ui icon buttons">
        <a class="ui icon button"><i class="caret left icon"></i></a>
        <% for (let i = 1; i <= Math.ceil((users.length) / 4); i++) { %>
          <a class="ui button" href="/admin/users/<%= i %>"><%= i %></a>
        <% } %>
        <a class="ui icon button"><i class="caret right icon"></i></a>
      </div>
    </div>
    <% include ../footer %>
  </body>
</html>
