{{ define "tixe" }}
<!DOCTYPE html>
<html>
<head>
<script async src="https://umami.liljamo.dev/script.js" data-website-id="f8cea9a6-6aff-4c31-b9ce-d99852500703"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/styles.css">
<title>{{ .title }}</title>
</head>
<body>
<main>
<div class="flex flex-col w-full items-center p-4">
<div class="flex flex-col w-full items-center justify-center bg-rose-200">
<p>This is a demo instance.</p>
<p class="text-center max-w-4xl">
Data on this instance is <span class="font-bold">wiped every hour</span>, on the hour.
During that time (usually a minute or two), the site will be unreachable.
</p>
<p class="text-center max-w-4xl">
umami is used to collect usage data on the demo, the data is
viewable <a data-umami-event="demo-header-umami-share" class="text-orange-500 font-bold hover:underline" href="https://umami.liljamo.dev/share/zz12HvMPd6Ii9wGC/tixe%20demo" target="_blank">here</a>
</p>
</div>
<div class="flex w-full max-w-4xl items-center gap-4">
<div class="w-max">
<a data-umami-event="header-home" class="bg-size-200 bg-pos-0 hover:bg-pos-100
bg-gradient-to-br from-slate-600 via-blue-400 to-rose-500
bg-clip-text text-lg font-bold text-transparent
transition-all duration-500"
href="/">
tixë
</a>
</div>
<div class="flex flex-row-reverse w-full pr-4">
{{ if eq .notauthed nil }}
<a data-umami-event="header-tags" class="hover:underline" href="/tags">tags</a>
{{ end }}
</div>
<div class="flex flex-col min-w-max">
{{ if eq .notauthed true }}
Not logged in
{{ else if ne .user nil }}
<div class="group w-fit">
<div class="group-hover:animate-wiggle">
<a data-umami-event="header-settings" class="font-bold animate-starshoot1 hover:underline" href="/settings">{{ .user.DisplayName }}</a>
</div>
<div class="absolute group-hover:animate-starmove">
<svg class="z-50 invisible opacity-0 h-4 w-4 fill-yellow-200 stroke-yellow-400 group-hover:visible group-hover:animate-starspin" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.03954 7.77203C3.57986 8.32856 2.35002 8.60682 2.05742 9.54773C1.76482 10.4886 2.60325 11.4691 4.2801 13.4299L4.71392 13.9372C5.19043 14.4944 5.42868 14.773 5.53586 15.1177C5.64305 15.4624 5.60703 15.8341 5.53498 16.5776L5.4694 17.2544C5.21588 19.8706 5.08912 21.1787 5.85515 21.7602C6.62118 22.3417 7.77268 21.8115 10.0757 20.7512L10.6715 20.4768C11.3259 20.1755 11.6531 20.0248 12 20.0248C12.3469 20.0248 12.6741 20.1755 13.3285 20.4768L13.9243 20.7512C16.2273 21.8115 17.3788 22.3417 18.1449 21.7602C18.9109 21.1787 18.7841 19.8706 18.5306 17.2544M19.7199 13.4299C21.3968 11.4691 22.2352 10.4886 21.9426 9.54773C21.65 8.60682 20.4201 8.32856 17.9605 7.77203L17.3241 7.62805C16.6251 7.4699 16.2757 7.39083 15.9951 7.17781C15.7144 6.96479 15.5345 6.64193 15.1745 5.99623L14.8468 5.40837C13.5802 3.13612 12.9469 2 12 2C11.0531 2 10.4198 3.13613 9.15316 5.40838" stroke-width="1.5" stroke-linecap="round" />
</svg>
</div>
</div>
<a data-umami-event="header-logout" class="self-end text-sm hover:underline" href="/auth/logout">Logout</a>
{{ end }}
</div>
</div>
<div class="flex flex-col w-full max-w-4xl items-center gap-2">
{{ template "content" . }}
</div>
</div>
</main>
<script src="/static/demo.js"></script>
</body>
</html>
{{ end }}