server-manager/views/servers/team_server.php

<?php
$server = $server ?? [];
$members = $members ?? [];
$availableUsers = $availableUsers ?? [];
?>

<div class="page-header">
    <div class="page-header-left">
        <div class="back-link">
            <a href="/team"><i class="fas fa-arrow-left"></i> Back to Team</a>
        </div>
        <h1 class="page-title"><?= htmlspecialchars($server['name'] ?? '') ?></h1>
        <p class="page-subtitle">Manage team access for this server</p>
    </div>
</div>

<div class="dashboard-grid">
    <div class="dashboard-card">
        <div class="card-header">
            <h2><i class="fas fa-users"></i> Team Members</h2>
        </div>
        <div class="card-body">
            <?php if (empty($members)): ?>
                <div class="empty-state">
                    <i class="fas fa-users"></i>
                    <p>No team members yet.</p>
                </div>
            <?php else: ?>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Role</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="teamMembersBody">
                            <?php foreach ($members as $member): ?>
                                <tr data-user-id="<?= $member['user_id'] ?>">
                                    <td>
                                        <strong><?= htmlspecialchars($member['username']) ?></strong>
                                        <br><small class="text-muted"><?= htmlspecialchars($member['email']) ?></small>
                                    </td>
                                    <td>
                                        <?php if ($member['role'] === 'owner'): ?>
                                            <span class="badge badge-danger">Owner</span>
                                        <?php else: ?>
                                            <select class="form-select form-select-sm role-select"
                                                    onchange="updateRole(<?= $member['user_id'] ?>, this.value)"
                                                    style="width:auto">
                                                <option value="viewer" <?= $member['role'] === 'viewer' ? 'selected' : '' ?>>Viewer</option>
                                                <option value="manager" <?= $member['role'] === 'manager' ? 'selected' : '' ?>>Manager</option>
                                            </select>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <?php if ($member['role'] !== 'owner'): ?>
                                            <button class="btn btn-xs btn-danger"
                                                    onclick="removeUser(<?= $member['user_id'] ?>, '<?= htmlspecialchars(addslashes($member['username'])) ?>')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <div class="dashboard-card">
        <div class="card-header">
            <h2><i class="fas fa-user-plus"></i> Add User</h2>
        </div>
        <div class="card-body">
            <?php if (empty($availableUsers)): ?>
                <div class="empty-state">
                    <i class="fas fa-user-plus"></i>
                    <p>All users already have access to this server.</p>
                </div>
            <?php else: ?>
                <form id="addUserForm" class="form" onsubmit="addUser(event)">
                    <input type="hidden" name="_csrf_token" value="<?= $this->csrfToken() ?>">

                    <div class="form-group">
                        <label for="userId">User</label>
                        <select id="userId" name="user_id" class="form-select" required>
                            <option value="">Select a user...</option>
                            <?php foreach ($availableUsers as $user): ?>
                                <option value="<?= $user['id'] ?>">
                                    <?= htmlspecialchars($user['username']) ?> (<?= htmlspecialchars($user['email']) ?>)
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="role">Role</label>
                        <select id="role" name="role" class="form-select" required>
                            <option value="viewer">Viewer — can view server details and use terminal</option>
                            <option value="manager">Manager — full control except team management</option>
                        </select>
                    </div>

                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-user-plus"></i> Add User
                    </button>
                </form>
            <?php endif; ?>
        </div>
    </div>
</div>

<form id="csrfForm" style="display:none">
    <input type="hidden" name="_csrf_token" value="<?= $this->csrfToken() ?>">
</form>

<script>
function getCsrfToken() {
    return document.querySelector('meta[name="csrf-token"]')?.content || '';
}

function addUser(e) {
    e.preventDefault();
    const form = document.getElementById('addUserForm');
    const data = new FormData(form);

    fetch('/team/<?= $server['id'] ?>/add-user', {
        method: 'POST',
        headers: {
            'X-CSRF-Token': getCsrfToken(),
        },
        body: data,
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) {
            showToast('success', res.message);
            location.reload();
        } else {
            showToast('error', res.message);
        }
    })
    .catch(err => showToast('error', 'Request failed'));
}

function removeUser(userId, username) {
    if (!confirm('Remove "' + username + '" from this server?')) return;

    const form = new FormData();
    form.append('user_id', userId);
    form.append('_csrf_token', getCsrfToken());

    fetch('/team/<?= $server['id'] ?>/remove-user', {
        method: 'POST',
        headers: {
            'X-CSRF-Token': getCsrfToken(),
        },
        body: form,
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) {
            showToast('success', res.message);
            location.reload();
        } else {
            showToast('error', res.message);
        }
    })
    .catch(err => showToast('error', 'Request failed'));
}

function updateRole(userId, role) {
    const form = new FormData();
    form.append('user_id', userId);
    form.append('role', role);
    form.append('_csrf_token', getCsrfToken());

    fetch('/team/<?= $server['id'] ?>/update-role', {
        method: 'POST',
        headers: {
            'X-CSRF-Token': getCsrfToken(),
        },
        body: form,
    })
    .then(r => r.json())
    .then(res => {
        if (res.success) {
            showToast('success', 'Role updated to ' + role);
        } else {
            showToast('error', res.message);
        }
    })
    .catch(err => showToast('error', 'Request failed'));
}
</script>