<!-- html:5 -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Tiffy's to-do list website</title>

		<meta name="description" content="Tiffy's todo list website" />
		<meta name="keywords" content="list, todo" />
		<meta name="author" content="Tiffany" />

		<link rel="icon" href="images/favicon.ico" />

		<link rel="stylesheet" href="css/pages/index.css" />

		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
			integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"
		/>
	</head>

	<body>
		<section>
			<div class="container">
				<h1 class="title-text">Tiffy's to-do list website</h1>

				<img src="images/image.jpg" alt="Image not found" />

				<p><i>Add something cute to my to-do list!</i></p>
				<form action="/form-action" method="post">
					<label for="to-do"></label>
					<input
						name="todo"
						type="text"
						placeholder="Enter a to-do"
						required
						class="todo-input"
					/>
					<button type="submit" class="form-submit">Add</button>
				</form>

				<!-- List -->
				<!-- ordered list -->

				<div class="todo-container">
					<div class="inner-todo">
						<h1>To do list</h1>
						<ol>
							<!-- rendering the todos -->
							<% todos.forEach(todo => { %>
							<li>
								<%= todo %> 
								<button onclick="deleteTodo('<%= todo %>')" class="delete-button">
								<i class="fa-solid fa-delete-left"></i>
							</li>
							<% }); %>
						</ol>
						<div class="decor">
							<img src="images/cryinggirl.gif" />
						</div>
					</div>
				</div>

				<!-- unordered list -->
				<!-- <ul></ul> -->
			</div>
		</section>
	</body>

	<script src="js/index.js"></script>
</html>
