<!doctype html>
<html lang="{{ currentLocale }}">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>{{ template "title" . }} — Numerus</title>
		<link rel="stylesheet" type="text/css" media="screen" href="/static/numerus.css">
		<script src="/static/htmx@1.9.2.min.js"></script>
		<script type="module" src="/static/numerus.js"></script>
        <script defer src="/static/alpinejs@3.12.0.min.js"></script>
	</head>
	<body class="show-filters">
		<header>
			<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
			<details id="profile-menu" class="menu">
				<summary>
					<i class="ri-eye-close-line ri-3x"></i>
				</summary>
				<ul role="menu" class="action-menu" data-hx-push-url="false" data-hx-swap="beforeend">
					<li role="presentation">
						<a role="menuitem" href="{{ companyURI "/profile" }}" data-hx-boost="true">
							<i class="ri-account-circle-line"></i>
							{{( pgettext "Account" "menu" )}}
						</a>
					</li>
					<li role="presentation">
						<a role="menuitem" href="{{ companyURI "/tax-details" }}" data-hx-boost="true">
							<i class="ri-vip-diamond-line"></i>
							{{( pgettext "Tax Details" "menu" )}}
						</a>
					</li>
					<li role="presentation">
						<form method="POST" action="/logout">
							{{ csrfToken }}
							<button type="submit" role="menuitem">
								<i class="ri-logout-circle-line"></i>
								{{( pgettext "Logout" "action" )}}
							</button>
						</form>
					</li>
				</ul>
			</details>
		</header>
		<nav aria-label="{{( pgettext "Main" "title" )}}" data-hx-target="main" data-hx-boost="true">
			<ul>
				<li><a href="{{ companyURI "/" }}">{{( pgettext "Dashboard" "nav" )}}</a></li>
				<li><a href="{{ companyURI "/quotes" }}">{{( pgettext "Quotations" "nav" )}}</a></li>
				<li><a href="{{ companyURI "/invoices" }}">{{( pgettext "Invoices" "nav" )}}</a></li>
				<li><a href="{{ companyURI "/expenses" }}">{{( pgettext "Expenses" "nav" )}}</a></li>
				<li><a href="{{ companyURI "/products" }}">{{( pgettext "Products" "nav" )}}</a></li>
				<li><a href="{{ companyURI "/contacts" }}">{{( pgettext "Contacts" "nav" )}}</a></li>
			</ul>
		</nav>
		<main>
			{{- template "breadcrumbs" . }}
			{{- template "content" . }}
		</main>
	</body>
    <div x-data="snackbar">
        <div x-show="show"
             @click="dismiss"
             x-cloak
             x-transition:enter="enter"
             x-transition:enter-start="start"
             x-transition:enter-end="end"
             x-transition:leave="leave"
             x-transition:leave-start="start"
             x-transition:leave-end="end"
             role="alert">
            <p x-text="toast"></p>
        </div>
    </div>
</html>
