<style>
    /* Estilos consistentes con el resto del panel */
    .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .page-header h3 { margin: 0; font-size: 22px; }
    .btn { text-decoration: none; color: #fff; background-color: #007bff; padding: 10px 20px; border-radius: 6px; font-weight: 500; font-size: 15px; transition: all 0.3s ease; }
    .btn:hover { background-color: #0056b3; transform: translateY(-2px); }
    .message { padding: 15px; margin-bottom: 20px; border-radius: 6px; }
    .message.success { color: #0f5132; background-color: #d1e7dd; }
    .message.error { color: #842029; background-color: #f8d7da; }
    .table-container { overflow-x: auto; }
    .data-table { width: 100%; border-collapse: collapse; background-color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-radius: 8px; overflow: hidden; }
    .data-table th, .data-table td { padding: 15px; text-align: left; border-bottom: 1px solid #dee2e6; vertical-align: middle; }
    .data-table thead th { background-color: #f8f9fa; font-weight: 600; text-transform: uppercase; font-size: 12px; }
    .data-table tbody tr:hover { background-color: #f1f1f1; }
    .data-table .actions { display: flex; align-items: center; gap: 8px; }
    .data-table .actions a, .data-table .actions button { text-decoration: none; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; transition: all 0.3s ease; cursor: pointer; }
    .data-table .actions .edit-btn { color: #fff; background-color: #17a2b8; }
    .data-table .actions .delete-btn { color: #fff; background-color: #dc3545; border: none; font-family: inherit; }
    .team-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
</style>

<div class="page-header">
    <h3>Gestionar Equipo</h3>
    <a href="<?php echo url('admin/team_members/create'); ?>" class="btn">Añadir Miembro</a>
</div>

<?php if (isset($_SESSION['message'])): ?>
    <div class="message success"><?php echo $_SESSION['message']; unset($_SESSION['message']); ?></div>
<?php endif; ?>
<?php if (isset($_SESSION['error'])): ?>
    <div class="message error"><?php echo $_SESSION['error']; unset($_SESSION['error']); ?></div>
<?php endif; ?>

<div class="table-container">
    <table class="data-table">
        <thead>
            <tr>
                <th>Avatar</th>
                <th>Nombre</th>
                <th>Cargo</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            <?php if (empty($teamMembers)): ?>
                <tr>
                    <td colspan="4" style="text-align: center; padding: 20px;">No se encontraron miembros del equipo.</td>
                </tr>
            <?php else: ?>
                <?php foreach ($teamMembers as $member): ?>
                    <tr>
                        <td>
                            <img src="<?php echo $member['avatar'] ? url($member['avatar']) : 'https://placehold.co/50x50/e9ecef/6c757d?text=RQ'; ?>" 
                                 alt="Avatar de <?php echo htmlspecialchars($member['name']); ?>" 
                                 class="team-avatar">
                        </td>
                        <td><strong><?php echo htmlspecialchars($member['name']); ?></strong></td>
                        <td><?php echo htmlspecialchars($member['role']); ?></td>
                        <td>
                            <div class="actions">
                                <a href="<?php echo url('admin/team_members/edit?id=' . $member['id']); ?>" class="edit-btn">Editar</a>
                                <form action="<?php echo url('admin/team_members/delete'); ?>" method="POST" onsubmit="return confirm('¿Estás seguro de eliminar a este miembro?');">
                                    <input type="hidden" name="id" value="<?php echo $member['id']; ?>">
                                    <button type="submit" class="delete-btn">Eliminar</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                <?php endforeach; ?>
            <?php endif; ?>
        </tbody>
    </table>
</div>