tabler/shared/components/modals/AddTaskModalContent.astro

---
// selected ids "5,6,2,3" → people[id-1] (Liquid: id | plus: 0 | minus: 1).
import people from '@data/people.json';
import FormGroup from '@ui/FormGroup.astro';

interface Person {
	id: string;
	full_name: string;
}

const selectedPeople = ['5', '6', '2', '3'].map((idStr) => (people as Person[])[Number(idStr) - 1]);
---

<div class="modal-header">
	<h4 class="modal-title">Add task</h4>
	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">
	<form>
		<FormGroup label="Name">
			<input type="text" class="form-control" placeholder="Task name">
		</FormGroup>
		<FormGroup label="Assigned To">
			<select class="form-select">
				<option value="">Select person</option>
				{
					selectedPeople.map((person) => (
						<option value={person.id}>{person.full_name}</option>
					))
				}
			</select>
		</FormGroup>
		<FormGroup label="Priority">
			<select class="form-select">
				<option value="Low">Low</option>
				<option value="Medium">Medium</option>
				<option value="High">High</option>
			</select>
		</FormGroup>
		<FormGroup label="Description">
			<textarea class="form-control" rows="3" placeholder="Task description"></textarea>
		</FormGroup>
	</form>
</div>

<div class="modal-footer">
	<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
	<button type="button" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
		Save
	</button>
</div>