package layout

const appName = "🏨 RentEase"

templ BaseLayout() {
	<!DOCTYPE html>
	<html lang="en" data-theme="dracula">
		@head()
		<body hx-boost="true" style="display: flex; flex-direction: column; min-height: 100vh;">
			@navbar()
			<main class="container mx-auto flex flex-col flex-grow">
				{ children... }
			</main>
			@footer()
		</body>
	</html>
}

templ head() {
	<head>
		<title>RentEase | Your Property Management System</title>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta name="description" content="Property Management System"/>
		<link rel="icon" href="/static/icons/favicon-main.png"/>
		<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css"/>
		<script src="https://cdn.tailwindcss.com"></script>
		<script src="/static/js/htmx.js" defer></script>
		<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
		<script>
      document.addEventListener("DOMContentLoaded", () => {
        document.addEventListener("htmx:beforeSwap", (e) => {
          if([422,401].includes(e.detail.xhr.status)) {
            e.detail.shouldSwap = true
            e.detail.isError = false
          }
        })
      })
    </script>
		<script defer data-domain="rentease.nemausat.com" src="https://plausible.nemausat.com/js/script.file-downloads.hash.outbound-links.pageview-props.tagged-events.js"></script>
		<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
	</head>
}

templ navbar() {
	<nav class="container mx-auto navbar bg-base-100">
		<div class="navbar-start">
			<div class="dropdown">
				<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="h-5 w-5"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M4 6h16M4 12h8m-8 6h16"
						></path>
					</svg>
				</div>
				<ul
					tabindex="0"
					class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
				>
					<li><a href="/bookings">Bookings</a></li>
					<li><a href="/reports">Reports</a></li>
				</ul>
			</div>
			<a class="btn btn-ghost text-xl" href="/">{ appName } </a>
		</div>
		<div class="navbar-center hidden lg:flex">
			<ul class="menu menu-horizontal px-1">
				<li><a href="/bookings">Bookings</a></li>
				<li><a href="/reports">Reports</a></li>
			</ul>
		</div>
		<div class="navbar-end">
			<a href="/bookings/new" role="button" class="btn btn-primary">New Booking</a>
		</div>
	</nav>
}

templ footer() {
	<footer class="footer bg-neutral text-neutral-content items-center p-4 flex flex-row justify-between">
		<aside class="flex items-center">
			<p>{ appName } © 2024</p>
		</aside>
		<nav class="flex items-center gap-4">
			<a href="https://github.com/rjNemo/rentease" target="_blank" rel="noopener noreferrer">
				<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg" alt="github" width="24" height="24"/>
			</a>
		</nav>
	</footer>
}
