<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Add member for project: <%= project.title %></h1>
</div>

<form class="mb-4">
    <div class="input-group">
        <input type="text" name="search" class="form-control" placeholder="Search users...">
        <div class="input-group-append">
            <button class="btn btn-primary" type="submit">
                <i class="fas fa-search fa-sm"></i>
            </button>
        </div>
    </div>
</form>

<% if (search.length > 0) { %>
    <h4 class="mb-2">Search for: <%= search %></h4>
<% } %>

<% if (users.length > 0) { %>
<div class="row">
    <div class="col-md-12">
        <div class="user-dashboard-info-box table-responsive mb-0 bg-white p-4 shadow-sm">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">User</th>
                        <th scope="col">&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <% for (let i = 0; i < users.length; i++) { %>
                    <tr>
                        <td>
                            <img class="img-profile rounded-circle" style="width: 50px;" src="<%= users[i].image %>">
                            <br>
                            <a href="/users/<%= users[i]._id %>"><%= users[i].username %></a>
                        </td>
                        <td>
                            <form method="POST" action="/projectmembers/<%= project._id %>">
                                <input type="hidden" name="_method" value="PUT">
                                <input type="hidden" name="user" value="<%= users[i]._id %>">
                                <button type="submit" class="btn btn-primary btn-round btn-sm mt-4"><i class="fas fa-plus"></i> Add</button>
                            </form>
                        </td>
                    </tr>
                <% } %>
                </tbody>
            </table>
        </div>
    </div>
</div>
<% } else { %>
<div class="row">
    <div class="col-md-12">
        <div class="user-dashboard-info-box table-responsive mb-0 bg-white p-4 shadow-sm">
            There's no user!
        </div>
    </div>
</div>
<% } %>

<% if (pages > 0) { %>
    <nav aria-label="...">
         <ul class="pagination mt-2">
            <% if (current == 1) { %>
                <li class="page-item disabled"><a class="page-link">First</a></li>
            <% } else { %>
                <li class="page-item"><a class="page-link" href="/projectmembers/<%= project._id %>/new/1">First</a></li>
            <% } %>
            <% var i = (Number(current) > 5 ? Number(current) - 4 : 1) %>
            <% if (i !== 1) { %>
                <li class="page-item disabled"><a class="page-link">...</a></li>
            <% } %>
            <% for (; i <= (Number(current) + 4) && i <= pages; i++) { %>
                <% if (i == current) { %>
                    <li class="page-item active"><a class="page-link"><%= i %></a></li>
                <% } else { %>
                    <li class="page-item"><a class="page-link" href="/projectmembers/<%= project._id %>/<%= i %>"><%= i %></a></li>
                <% } %>
                <% if (i == Number(current) + 4 && i < pages) { %>
                    <li class="page-item disabled"><a class="page-link">...</a></li>
                <% } %>
            <% } %>
            <% if (current == pages) { %>
                <li class="page-item disabled"><a class="page-link">Last</a></li>
            <% } else { %>
                <li class="page-item"><a class="page-link" href="/projectmembers/<%= project._id %>/<%= pages %>">Last</a></li>
            <% } %>
        </ul>
    </nav>
<% } %>
