<?php
$edited = can_action('69', 'edited');
$tableId = 'DataTablesTasksGoal' . $goal_info->goal_tracking_id;
?>

<div class="space-y-4">
	<div class="flex items-center justify-between">
		<div class="flex items-center gap-2">

			<?php if (!empty($edited)) { ?>
				<a href="<?= base_url() ?>admin/tasks/create/goal/<?= $goal_info->goal_tracking_id ?>"
					class="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-xs font-semibold text-foreground hover:bg-muted">
					<i data-lucide="plus" class="h-4 w-4"></i>
					<?= lang('new_task') ?>
				</a>
			<?php } ?>
		</div>
	</div>

	<div class="rounded-2xl border border-border bg-card shadow-sm">
		<div class="p-4">
			<div class="overflow-x-auto">
				<table id="<?= $tableId ?>" class="min-w-full table-auto text-left text-sm DataTables" width="100%">
					<thead>
						<tr>
							<th class="w-10 text-center"><input type="checkbox" id="select_all_tasks_<?= $goal_info->goal_tracking_id ?>" class="mx-auto"></th>
							<th class="py-2 px-3 break-words"><?= lang('task_name') ?></th>
							<th class="py-2 px-3 whitespace-nowrap"><?= lang('due_date') ?></th>
							<th class="py-2 px-3 whitespace-nowrap"><?= lang('progress') ?></th>
							<th class="py-2 px-3 whitespace-nowrap"><?= lang('status') ?></th>
							<th class="py-2 px-3 text-right whitespace-nowrap"><?= lang('action') ?></th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
				<script type="text/javascript">
					$(function() {
						fire_datatable(base_url + "admin/goal_tracking/tasksList/<?= $goal_info->goal_tracking_id ?>", "<?= $tableId ?>");
					});
				</script>
			</div>
		</div>
	</div>
</div>
