{{define "content"}}
<div style="display:flex;justify-content:space-between;align-items:center">
    <h2>Users</h2>
    <button class="btn btn-primary" onclick="document.getElementById('newUserForm').style.display='block'">+ Add User</button>
</div>

<div id="newUserForm" style="display:none;margin-bottom:1.5rem">
    <div class="stat-card">
        <h3>New User</h3>
        <form method="POST" action="/users">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <label for="role">Role</label>
                <select id="role" name="role">
                    <option value="admin">Admin</option>
                    <option value="viewer">Viewer</option>
                </select>
            </div>
            <div style="display:flex;gap:.5rem">
                <button type="submit" class="btn btn-primary btn-sm">Create</button>
                <button type="button" class="btn btn-sm" onclick="this.closest('#newUserForm').style.display='none'">Cancel</button>
            </div>
        </form>
    </div>
</div>

<table class="data-table">
    <thead>
        <tr><th>Username</th><th>Role</th><th>Created</th><th>Actions</th></tr>
    </thead>
    <tbody>
        {{range .Data.Users}}
        <tr>
            <td>{{.Username}}</td>
            <td><span class="badge badge-ok">{{.Role}}</span></td>
            <td>{{.Created}}</td>
            <td>
                <form method="POST" action="/users/{{.Username}}/delete" style="display:inline"
                      onsubmit="return confirm('Delete user {{.Username}}?')">
                    <button class="btn btn-sm">Delete</button>
                </form>
            </td>
        </tr>
        {{else}}
        <tr><td colspan="4">No users.</td></tr>
        {{end}}
    </tbody>
</table>
{{end}}