<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<?php $templates = isset($templates) && is_array($templates) ? $templates : array(); ?>
<style>
	.management-page {
		display: grid;
		gap: 16px;
	}
	.management-shell {
		display: grid;
		gap: 14px;
		padding: 18px;
		border-radius: 22px;
		background: var(--panel);
		box-shadow: var(--shadow);
	}
	.management-head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
	}
	.management-head h2 {
		margin: 0;
	}
	.management-head p {
		margin: 6px 0 0;
		color: var(--muted);
	}
	.management-list {
		display: grid;
		gap: 10px;
	}
	.management-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px;
		align-items: center;
		padding: 14px;
		border-radius: 18px;
		background: var(--card);
		box-shadow: inset 0 0 0 1px rgba(20, 41, 64, 0.08);
	}
	.management-row strong,
	.management-row span {
		display: block;
	}
	.management-row strong {
		color: var(--ink);
	}
	.management-row span {
		margin-top: 4px;
		color: var(--muted);
		font-size: 0.92rem;
	}
	.management-empty {
		padding: 18px;
		border-radius: 18px;
		background: var(--card);
		box-shadow: inset 0 0 0 1px rgba(20, 41, 64, 0.08);
		color: var(--muted);
		text-align: center;
	}
	.management-actions {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	@media (max-width: 760px) {
		.management-row {
			grid-template-columns: 1fr;
		}
		.management-head {
			grid-template-columns: 1fr;
			display: grid;
		}
	}
</style>

<div class="management-page">
	<div class="actions" style="margin-bottom:0;">
		<a class="btn btn-outline" href="<?php echo site_url('tareas'); ?>">Volver</a>
		<a class="btn" href="<?php echo site_url('tareas/plantillas/nueva'); ?>">Agregar</a>
	</div>

	<section class="management-shell">
		<div class="management-head">
			<div>
				<h2>Plantillas</h2>
				<p>Aqui ves la lista completa de plantillas para editar su base de subtareas.</p>
			</div>
		</div>

		<?php if (empty($templates)) { ?>
			<div class="management-empty">Todavia no hay plantillas creadas.</div>
		<?php } else { ?>
			<div class="management-list">
				<?php foreach ($templates as $template) { ?>
					<div class="management-row">
						<div>
							<strong><?php echo htmlspecialchars(!empty($template['name']) ? (string) $template['name'] : 'Plantilla', ENT_QUOTES, 'UTF-8'); ?></strong>
							<span><?php echo !empty($template['description']) ? htmlspecialchars((string) $template['description'], ENT_QUOTES, 'UTF-8') : 'Sin descripcion'; ?></span>
						</div>
						<div class="management-actions">
							<a class="btn btn-outline" href="<?php echo site_url('tareas/plantillas/'.(int) $template['id']); ?>">Editar</a>
							<form method="post" action="<?php echo site_url('tareas/plantillas/'.(int) $template['id'].'/eliminar'); ?>" onsubmit="return confirm('Estas seguro de eliminar esta plantilla?');">
								<button class="btn" type="submit">Eliminar</button>
							</form>
						</div>
					</div>
				<?php } ?>
			</div>
		<?php } ?>
	</section>
</div>
