<%- include('./partials/head') %>

	<body>
		<%- include('./partials/navbar') %>

			<!-- Page Content -->
			<div class="container">
				<div class="row mt-5 mb-4 justify-content-between">
					<div class="col-2">
						<div class="card linden-hill px-5">
							<p style="font-size: 32px; margin: 16px 0px 14px">
								Search
							</p>
						</div>
					</div>
					<div class="col">
						<div class="card card-bg-orange">
							<p class="linden-hill-italic"
								style="font-size: 32px; text-align: center; margin-top: 14px; color: white;">
								“If you start doing beautiful things, you will be happy in every circumstance.”
							</p>
						</div>
					</div>
				</div>
				<br>
				<form class="mb-4" method="GET" action="/search">
					<div class="form-inline d-inline-flex col-md-6" style="font-size: 32px;">
						<input type="text" name="search" class="form-control col-lg-12"
							placeholder="Search for messages..." value="<%= search %>">
						<div class="input-group-append">
							<button class="btn btn-orange py-3 px-5 mx-2" type="submit">Search</button>
						</div>
					</div>
				</form>
			</div>

			<div class="container mt-2">
				<% messages.forEach(message=> { %>
					<div class="card mb-2 linden-hill">
						<div class="content p-5">
							<span class="mb-2" style="font-size: 28px;">
								<%= message.formatted_date %>
							</span>
							<br><br>
							<span style="font-size: 24px;">
								<%= message.content %>
							</span>
						</div>
					</div>
					<br>
					<% }); %>
			</div>

			<!-- Pagination -->
			<nav aria-label="Page navigation">
				<ul class="pagination justify-content-center mt-4">
					<% if (page> 1) { %>
						<li class="page-item">
							<a class="page-link" href="/search?search=<%= search %>&page=<%= page - 1 %>">Previous</a>
						</li>
						<% } %>
							<% for (let i=1; i <=totalPages; i++) { %>
								<li class="page-item <%= page === i ? 'active' : '' %>">
									<a class="page-link" href="/search/?search=<%= search %>&page=<%= i %>">
										<%= i %>
									</a>
								</li>
								<% } %>
									<% if (page < totalPages) { %>
										<li class="page-item">
											<a class="page-link"
												href="/search?search=<%= search %>&page=<%= page + 1 %>">Next</a>
										</li>
										<% } %>
				</ul>
			</nav>
			</div>
			<br><br><br>
	</body>

	<%- include('./partials/footer') %>