<div class="card">
  <div class="card-header">
    <h3 class="card-title">Daftar User</h3>
    <div class="card-tools">
      <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#createUserModal"><i class="fas fa-plus mr-1"></i> Tambah User</button>
    </div>
  </div>
  <div class="card-body table-responsive p-0">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Nama</th>
          <th>Email</th>
          <th>Role</th>
          <th>Status</th>
          <th>Dibuat</th>
          <th style="width:180px">Action</th>
        </tr>
      </thead>
      <tbody>
        <% users.forEach(function(u) { %>
        <tr>
          <td><%= u.name %></td>
          <td><%= u.email %></td>
          <td><span class="badge badge-secondary text-capitalize"><%= u.role.replace('_',' ') %></span></td>
          <td><span class="badge badge-<%= u.status === 'active' ? 'success' : 'secondary' %>"><%= u.status %></span></td>
          <td><%= formatDate(u.created_at) %></td>
          <td class="table-actions">
            <button class="btn btn-sm btn-outline-secondary" data-toggle="modal" data-target="#editUserModal"
              data-id="<%= u.id %>" data-name="<%= u.name %>" data-role="<%= u.role %>" data-status="<%= u.status %>" title="Edit">
              <i class="fas fa-edit"></i>
            </button>
            <button class="btn btn-sm btn-outline-warning" data-toggle="modal" data-target="#resetPasswordModal" data-id="<%= u.id %>" title="Reset Password">
              <i class="fas fa-key"></i>
            </button>
            <% if (u.id !== currentUser.id) { %>
            <form action="/users/<%= u.id %>/delete" method="POST" class="d-inline js-delete-user">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
              <button type="submit" class="btn btn-sm btn-outline-danger" title="Hapus"><i class="fas fa-trash"></i></button>
            </form>
            <% } %>
          </td>
        </tr>
        <% }); %>
      </tbody>
    </table>
  </div>
</div>

<!-- Create User Modal -->
<div class="modal fade" id="createUserModal" tabindex="-1">
  <div class="modal-dialog">
    <form action="/users" method="POST" class="modal-content">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <div class="modal-header">
        <h5 class="modal-title">Tambah User</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>Nama</label>
          <input type="text" name="name" class="form-control" required>
        </div>
        <div class="form-group">
          <label>Email</label>
          <input type="email" name="email" class="form-control" required>
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="password" name="password" class="form-control" minlength="8" required>
        </div>
        <div class="form-group">
          <label>Role</label>
          <select name="role" class="form-control" required>
            <option value="operator">Operator</option>
            <option value="admin">Admin</option>
            <% if (currentUser.role === 'super_admin') { %>
            <option value="super_admin">Super Admin</option>
            <% } %>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
        <button type="submit" class="btn btn-primary">Simpan</button>
      </div>
    </form>
  </div>
</div>

<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1">
  <div class="modal-dialog">
    <form action="/users/0" method="POST" class="modal-content" id="editUserForm">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <div class="modal-header">
        <h5 class="modal-title">Edit User</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>Nama</label>
          <input type="text" name="name" id="editUserName" class="form-control" required>
        </div>
        <div class="form-group">
          <label>Role</label>
          <select name="role" id="editUserRole" class="form-control" required>
            <option value="operator">Operator</option>
            <option value="admin">Admin</option>
            <% if (currentUser.role === 'super_admin') { %>
            <option value="super_admin">Super Admin</option>
            <% } %>
          </select>
        </div>
        <div class="form-group">
          <label>Status</label>
          <select name="status" id="editUserStatus" class="form-control" required>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
        <button type="submit" class="btn btn-primary">Simpan</button>
      </div>
    </form>
  </div>
</div>

<!-- Reset Password Modal -->
<div class="modal fade" id="resetPasswordModal" tabindex="-1">
  <div class="modal-dialog">
    <form action="/users/0/password" method="POST" class="modal-content" id="resetPasswordForm">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <div class="modal-header">
        <h5 class="modal-title">Reset Password User</h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>Password Baru</label>
          <input type="password" name="password" class="form-control" minlength="8" required>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
        <button type="submit" class="btn btn-primary">Reset</button>
      </div>
    </form>
  </div>
</div>

<script src="/js/users.js?v=<%= assetVersion %>"></script>
