-[ template "/base/base.html" ]-

-[ block body ]-

-[ insert "/base/path.html" ]-

<div class="container-func">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
        <h2 class="mb-0">Manage Users</h2>
        <a class="btn btn-outline-secondary btn-sm" href="/admin/panel/admins">Manage admins</a>
    </div>

    <form id="userForm" method="POST" action="/admin/users" class="mt-3">
        <div class="mb-3">
            <label for="newUsername" class="form-label">Username</label>
            <input id="newUsername" type="text" name="username" class="form-control" required />
        </div>
        <div class="mb-3">
            <label for="newEmail" class="form-label">Email</label>
            <input id="newEmail" type="email" name="email" class="form-control" required />
        </div>
        <div class="mb-3">
            <label for="newPassword" class="form-label">Password</label>
            <input id="newPassword" type="password" name="password" class="form-control" required />
        </div>
        <button type="submit" class="btn btn-pink">Add User</button>
        <span id="createStatus" class="ms-2"></span>
    </form>
    <hr/>
    <h3>Existing Users</h3>
    <table class="table">
        <thead>
            <tr>
                <th>UID</th>
                <th>Username</th>
                <th>Email</th>
                <th>Active</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="usersTableBody">
        </tbody>
    </table>
    <div class="mt-3">
      <nav>
        <ul class="pagination">
          <li class="page-item" id="prevPageItem">
            <a id="prevPage" class="page-link" href="#">Previous</a>
          </li>
          <li class="page-item disabled">
            <span class="page-link">Page <span id="currentPage">1</span></span>
          </li>
          <li class="page-item" id="nextPageItem">
            <a id="nextPage" class="page-link" href="#">Next</a>
          </li>
        </ul>
      </nav>
    </div>
    <script>
    const esc = (s) => String(s ?? '').replace(/[&<>"']/g, c => ({
        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
    }[c]));

    async function loadUsers() {
        const urlParams = new URLSearchParams(window.location.search);
        const page = parseInt(urlParams.get('page')) || 1;
        const PER_PAGE = 10;
        let data;
        try {
            const res = await fetch('/admin/users/json' + window.location.search);
            data = await res.json();
        } catch (e) {
            console.error('Fetch to /admin/users/json failed:', e);
            return;
        }
        const users = Array.isArray(data.users) ? data.users : [];
        const total = typeof data.total === 'number' ? data.total : users.length;
        const tbody = document.getElementById('usersTableBody');
        const startIndex = (page - 1) * PER_PAGE;
        const pageUsers = users.slice(startIndex, startIndex + PER_PAGE);
        let html = '';
        for (const user of pageUsers) {
            const uid = user.uid ?? '';
            html += '<tr>' +
                    '<td>' + esc(uid) + '</td>' +
                    '<td>' + esc(user.username) + '</td>' +
                    '<td>' + esc(user.email) + '</td>' +
                    '<td>' + (user.is_active ? 'Yes' : 'No') + '</td>' +
                    '<td><a href="/admin/panel/' + encodeURIComponent(uid) + '">Edit</a></td>' +
                '</tr>';
        }
        tbody.innerHTML = html;
        document.getElementById('currentPage').textContent = page;
        const prevPage = document.getElementById('prevPage');
        const nextPage = document.getElementById('nextPage');
        const prevItem = document.getElementById('prevPageItem');
        const nextItem = document.getElementById('nextPageItem');
        if (page > 1) {
            prevPage.href = window.location.pathname + '?page=' + (page - 1);
            prevItem.classList.remove('disabled');
        } else {
            prevItem.classList.add('disabled');
            prevPage.removeAttribute('href');
        }
        if (startIndex + PER_PAGE < total) {
            nextPage.href = window.location.pathname + '?page=' + (page + 1);
            nextItem.classList.remove('disabled');
        } else {
            nextItem.classList.add('disabled');
            nextPage.removeAttribute('href');
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        loadUsers();
        document.getElementById('userForm').addEventListener('submit', async (event) => {
            event.preventDefault();
            const status = document.getElementById('createStatus');
            status.textContent = 'Saving...';
            // Send urlencoded so hotaru's form_or_default() can parse it.
            const params = new URLSearchParams();
            for (const [k, v] of new FormData(event.currentTarget)) {
                params.append(k, v);
            }
            try {
                const res = await fetch('/admin/users', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: params.toString(),
                });
                const data = await res.json();
                if (!res.ok || !data.success) {
                    status.textContent = data.message || 'Create failed';
                    return;
                }
                status.textContent = 'Created';
                event.currentTarget.reset();
                loadUsers();
            } catch (e) {
                status.textContent = 'Create failed';
            }
        });
    });
    </script>
</div>
-[ endblock ]-