server-manager/views/servers/index.php

<?php
$servers = $servers ?? [];
$groups = $groups ?? [];
?>

<div class="page-header">
    <div class="page-header-left">
        <h1 class="page-title">Servers</h1>
        <p class="page-subtitle">Manage your Linux servers</p>
    </div>
    <div class="page-header-right">
        <a href="/servers/create" class="btn btn-primary">
            <i class="fas fa-plus"></i> Add Server
        </a>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <div class="card-filters">
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" id="serverSearch" class="form-input"
                       placeholder="Search servers..." value="<?= htmlspecialchars($search ?? '') ?>">
            </div>
            <select id="statusFilter" class="form-select">
                <option value="">All Status</option>
                <option value="online" <?= ($statusFilter ?? '') === 'online' ? 'selected' : '' ?>>Online</option>
                <option value="offline" <?= ($statusFilter ?? '') === 'offline' ? 'selected' : '' ?>>Offline</option>
                <option value="unknown" <?= ($statusFilter ?? '') === 'unknown' ? 'selected' : '' ?>>Unknown</option>
            </select>
            <select id="groupFilter" class="form-select">
                <option value="">All Groups</option>
                <?php foreach ($groups as $group): ?>
                    <option value="<?= htmlspecialchars($group) ?>" <?= ($groupFilter ?? '') === $group ? 'selected' : '' ?>>
                        <?= htmlspecialchars($group) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
    </div>

    <div class="card-body">
        <?php if (empty($servers['data'])): ?>
            <div class="empty-state">
                <i class="fas fa-server"></i>
                <p>No servers found.</p>
                <a href="/servers/create" class="btn btn-primary">Add Your First Server</a>
            </div>
        <?php else: ?>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>IP Address</th>
                            <th>Group</th>
                            <th>Status</th>
                            <th>CPU</th>
                            <th>RAM</th>
                            <th>Disk</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($servers['data'] as $server): ?>
                            <tr>
                                <td>
                                    <a href="/servers/<?= $server['id'] ?>" class="server-name-link">
                                        <?= htmlspecialchars($server['name']) ?>
                                    </a>
                                    <?php if (!$server['is_active']): ?>
                                        <span class="badge badge-warning">Inactive</span>
                                    <?php endif; ?>
                                </td>
                                <td><code><?= htmlspecialchars($server['ip_address']) ?>:<?= $server['ssh_port'] ?></code></td>
                                <td><?= htmlspecialchars($server['group_name'] ?? '-') ?></td>
                                <td>
                                    <span class="status-badge status-<?= $server['current_status'] ?? 'unknown' ?>">
                                        <?= ucfirst($server['current_status'] ?? 'unknown') ?>
                                    </span>
                                </td>
                                <td>
                                    <div class="mini-progress">
                                        <div class="mini-progress-bar" style="width: <?= $server['cpu_usage'] ?? 0 ?>%"></div>
                                        <span><?= $server['cpu_usage'] ?? '-' ?>%</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="mini-progress mini-progress-blue">
                                        <div class="mini-progress-bar" style="width: <?= $server['ram_usage'] ?? 0 ?>%"></div>
                                        <span><?= $server['ram_usage'] ?? '-' ?>%</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="mini-progress mini-progress-purple">
                                        <div class="mini-progress-bar" style="width: <?= $server['disk_usage'] ?? 0 ?>%"></div>
                                        <span><?= $server['disk_usage'] ?? '-' ?>%</span>
                                    </div>
                                </td>
                                <td class="actions-cell">
                                    <div class="btn-group">
                                        <a href="/servers/<?= $server['id'] ?>" class="btn btn-xs" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="/terminal/<?= $server['id'] ?>" class="btn btn-xs" title="Terminal">
                                            <i class="fas fa-terminal"></i>
                                        </a>
                                        <a href="/servers/<?= $server['id'] ?>/edit" class="btn btn-xs" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button class="btn btn-xs btn-danger" title="Delete"
                                                onclick="deleteServer(<?= $server['id'] ?>, '<?= htmlspecialchars(addslashes($server['name'])) ?>')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <?php if ($servers['total_pages'] > 1): ?>
                <div class="pagination">
                    <?php for ($i = 1; $i <= $servers['total_pages']; $i++): ?>
                        <a href="?page=<?= $i ?>&search=<?= urlencode($search ?? '') ?>&status=<?= urlencode($statusFilter ?? '') ?>&group=<?= urlencode($groupFilter ?? '') ?>"
                           class="page-link <?= $i === ($servers['page'] ?? 1) ? 'active' : '' ?>">
                            <?= $i ?>
                        </a>
                    <?php endfor; ?>
                </div>
            <?php endif; ?>
        <?php endif; ?>
    </div>
</div>

<script>
function deleteServer(id, name) {
    if (confirm('Are you sure you want to delete server "' + name + '"?\nThis action cannot be undone.')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/servers/' + id + '/delete';
        const csrf = document.createElement('input');
        csrf.type = 'hidden';
        csrf.name = '_csrf_token';
        csrf.value = document.querySelector('meta[name="csrf-token"]')?.content || '';
        form.appendChild(csrf);
        document.body.appendChild(form);
        form.submit();
    }
}

document.getElementById('serverSearch')?.addEventListener('input', function(e) {
    applyFilters();
});

document.getElementById('statusFilter')?.addEventListener('change', applyFilters);
document.getElementById('groupFilter')?.addEventListener('change', applyFilters);

function applyFilters() {
    const search = document.getElementById('serverSearch')?.value || '';
    const status = document.getElementById('statusFilter')?.value || '';
    const group = document.getElementById('groupFilter')?.value || '';
    window.location.href = '/servers?search=' + encodeURIComponent(search) +
                           '&status=' + encodeURIComponent(status) +
                           '&group=' + encodeURIComponent(group);
}
</script>