<body>
  <!-- Sidenav -->
  <% include ../partials/sidebar %>
  <!-- Main content -->
 
  <div class="main-content">
    <!-- Top navbar -->
    <% include ../partials/navbar %>
    <!-- Page content -->
    <div class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center" style="min-height: 600px; background-size: cover; background-position: center top;">
      <!-- Mask -->
      <span class="mask bg-gradient-default opacity-8"></span>
      <div class="container-fluid mt--4">
        <form id="formSearch" action="/users" method="POST">
        <div class="row mt-3">
          <div class="col-sm">
            <select name="company" class="form-control form-control-sm ml-2" id="companySelect">
              <option value="All">Semua</option>
              <% for(var i=0; i<companies.length; i++) {%>
                <% var selected = locals.company &&(company == companies[i].id)  ? `selected` : '' %>
                  <option <%= selected %> value="<%= companies[i].id %>"><%= companies[i].attributes.Name %></option>
              <% } %>
            </select>
          </div>
          <div class="col-sm ml-2 pr-2">
            <select name="division" class="form-control form-control-sm ml-0" id="divisionSelect" <% locals.company?'':'disabled' %>>
              <option value="All">Semua</option>
              <% if(locals.divisions) { for(var i=0; i<divisions.length; i++) {%>
                <% var selected = locals.division &&(division == divisions[i].id)  ? `selected` : '' %>
                  <option <%= selected %> value="<%= divisions[i].id %>"><%= divisions[i].attributes.Name %></option>
              <% } }%>
            </select>
          </div>
        </div>
        <div id="btnSearch" class="text-right ml-2 mt-4">
          <button type="button" class="btn btn-success btn-sm">Search</button>
        </div>
        <input type="hidden" name="page">
        </form>
        <!-- Table -->
        <div class="row mt-4">
          <div class="col">
            <div class="card shadow">
              <div class="card-header border-0">
                <h3 class="mb-0">Daftar User</h3>
              </div>
              <div class="table-responsive">
                <table class="table align-items-center table-flush">
                  <thead class="thead-light">
                    <tr>
                      <th scope="col">No</th>
                      <th scope="col">Name</th>
                      <th scope="col">Email</th>
                      <th scope="col">Company</th>
                      <th scope="col">Divisi</th>
                      <th scope="col">Active</th>
                      <th scope="col">Role</th>
                      <th scope="col">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <% for(var i=0;i<locals.users.length;i++){ %>
                      <tr>
                        <td>
                          <%= i+1 %>
                        </td>
                        <td>
                          <%= locals.users[i].username %>
                        </td>
                        <td>
                          <%= locals.users[i].email %>
                        </td>
                        <td>
                          <%= (locals.users[i].company)?locals.users[i].company.Name:'' %>
                        </td>
                        <td>
                          <%= (locals.users[i].division)?locals.users[i].division.Name:'' %>
                        </td>
                        <td>
                          <%= locals.users[i].blocked? 'Disabled' : "Active" %>
                        </td>
                        <td>
                          <% var role = locals.users[i].role? locals.users[i].role.name : 'Sub-Admin'; %>
                          <span><%= role %></span>
                          <% if(role == 'Sub-Admin' || role == 'Editor'){ %>
                            <form action="/user/change" method="POST">
                            <input name='user' type="hidden" value="<%= locals.users[i].id %>">
                            <input name='editor' type="hidden" value="<%= role == 'Sub-Admin'?1:0 %>">
                            <button type="submit" class="btn btn-primary btn-sm">Ubah</button>
                            </form> 
                          <% } %>
                        </td>
                        <td class="td-actions" style="display: inline-flex;">
                          <% if(role == 'Sub-Admin' || role == 'Editor'){ %>
                          <form class="changeForm" action="/user/change" method="POST">
                            <input name='user' type="hidden" value="<%= locals.users[i].id %>">
                            <input name='state' type="hidden" value='<%= locals.users[i].blocked? 'inActive' : "Active" %>'>
                            <button type="submit" rel="tooltip" class="mr-2 btn btn-info btn-icon btn-sm " data-original-title="" title="">
                              <i class="ni ni-ui-04 pt-1"></i>
                            </button>
                          </form>
                          <% } %>
                          <a value="<%= locals.users[i].id %>" href="#" rel="tooltip" class="btn btn-warning btn-icon btn-sm btn-edit-user" data-original-title="" title="">
                            <i class="ni ni-ungroup pt-1"></i>
                          </a>
                          <% if(role == 'Sub-Admin' || role == 'Editor'){ %>
                          <form class="deleteForm" action="/user/delete" method="POST">
                            <input name='user' type="hidden" value="<%= locals.users[i].id %>">
                            <button type="submit" rel="tooltip" class="btn btn-danger btn-icon btn-sm " data-original-title="" title="">
                              <i class="ni ni-fat-remove pt-1"></i>
                            </button>
                          </form>
                          <% } %>
                        </td>
                      </tr>
                    <%}%>
                </table>
              </div>
              <div class="card-footer py-4">
                <nav aria-label="...">
                  <ul class="pagination justify-content-end mb-0">
                    <li class="page-item <%= locals.page==1? 'disabled':'' %>">
                      <a value="<%= parseInt(locals.page)-1 %>" class="page-link" href="#" tabindex="-1">
                        <i class="fas fa-angle-left"></i>
                        <span class="sr-only">Previous</span>
                      </a>
                    </li>
                    <%var pageCount = Math.ceil(locals.users.length/9);%>
                    <%for(var i=1;i<=pageCount;i++){%>
                      <li class="page-item <%= locals.page==i? 'active':'' %>">
                        <a value="<%= i %>" class="page-link" href="#"><%= i %></a>
                      </li>
                    <%}%>
                    <li class="page-item <%= locals.page==pageCount? 'disabled':'' %>">
                      <a value="<%= parseInt(locals.page)+1 %>" class="page-link" href="#">
                        <i class="fas fa-angle-right"></i>
                        <span class="sr-only">Next</span>
                      </a>
                    </li>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
  

  <!-- Include scripts -->
  <% include ../partials/scripts %>
  <script src="/js/page/users.js"></script>
</body>
