<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<style>
	.group-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 16px;
	}
	.group-card {
		background: var(--panel);
		border-radius: 18px;
		padding: 16px;
		box-shadow: var(--shadow);
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 14px;
		position: relative;
		overflow: hidden;
	}
	.group-card::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 8px;
		background: var(--group-color, #4d74c3);
	}
	.group-card::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), transparent 52%);
		pointer-events: none;
	}
	.group-card-content,
	.group-card-meta {
		position: relative;
		z-index: 1;
	}
	.group-card-content {
		padding-left: 8px;
	}
	.group-card-content strong {
		display: block;
		font-size: 1.05rem;
	}
	.group-card-meta {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.group-dot {
		width: 14px;
		height: 14px;
		border-radius: 999px;
		background: var(--group-color, #4d74c3);
		box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6);
	}
	.group-pill {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 36px;
		padding: 6px 10px;
		border-radius: 999px;
		color: #fff;
		font-weight: 700;
		box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
	}
</style>

<div class="actions" style="margin-bottom:16px;">
	<a class="btn" href="<?php echo site_url('grupos/nuevo'); ?>">Nuevo grupo</a>
	<a class="btn btn-outline" href="<?php echo site_url('grupos/exportar'); ?>">Exportar CSV</a>
</div>

<?php if (empty($groups)) { ?>
	<div class="panel">No hay grupos disponibles.</div>
<?php } else { ?>
	<div class="group-grid">
		<?php foreach ($groups as $group) { ?>
			<?php $group_color = !empty($group['color']) ? (string)$group['color'] : '#4d74c3'; ?>
			<a class="group-card" href="<?php echo site_url('grupos/'.(int)$group['id']); ?>" style="text-decoration:none; color:inherit; --group-color: <?php echo htmlspecialchars($group_color, ENT_QUOTES, 'UTF-8'); ?>;">
				<div class="group-card-content">
					<strong><?php echo htmlspecialchars($group['name'], ENT_QUOTES, 'UTF-8'); ?></strong>
					<div class="note"><?php echo (int)$group['member_count']; ?> miembros</div>
				</div>
				<div class="group-card-meta">
					<span class="group-dot" aria-hidden="true"></span>
					<span class="group-pill" style="background: <?php echo htmlspecialchars($group_color, ENT_QUOTES, 'UTF-8'); ?>">
						<?php echo (int)$group['member_count']; ?>
					</span>
				</div>
			</a>
		<?php } ?>
	</div>
<?php } ?>
