{{define "metatags"}}
    <title>{{ .AppName }}{{ if .Title }} | {{ .Title }}{{ end }}</title>
    <link rel="icon" href="{{file "favicon.png"}}">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    {{- if .Metatags.Description}}
        <meta name="description" content="{{.Metatags.Description}}">
    {{- end}}
    {{- if .Metatags.Keywords}}
        <meta name="keywords" content="{{.Metatags.Keywords | join ", "}}">
    {{- end}}
{{end}}

{{define "css"}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
{{end}}

{{define "js"}}
    <script src="https://unpkg.com/htmx.org@1.6.1"></script>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
{{end}}

{{define "footer"}}
    {{- if .CSRF}}
        <script>
            document.body.addEventListener('htmx:configRequest', function(evt)  {
                if (evt.detail.verb !== "get") {
                    evt.detail.parameters['csrf'] = '{{.CSRF}}';
                }
            })
        </script>
    {{end}}
    <script>
        document.body.addEventListener('htmx:beforeSwap', function(evt) {
            if (evt.detail.xhr.status >= 400){
                evt.detail.shouldSwap = true;
                evt.detail.target = htmx.find("body");
            }
        });
    </script>
{{end}}