{{ template "document.html" . }}

{{ define "document-title" }}{{ .Page.Title }} - Glance{{ end }}

{{ define "document-head-before" }}
<script>
    const pageData = {
        slug: "{{ .Page.Slug }}",
    };
</script>
{{ end }}

{{ define "document-root-attrs" }}class="{{ if .App.Config.Theme.Light }}light-scheme {{ end }}{{ if ne "" .Page.Width }}page-width-{{ .Page.Width }}{{ end }}"{{ end }}
{{ define "document-head-after" }}
{{ template "page-style-overrides.gotmpl" . }}
{{ if ne "" .App.Config.Theme.CustomCSSFile }}
<link rel="stylesheet" href="{{ .App.Config.Theme.CustomCSSFile }}?v={{ .App.Config.Server.StartedAt.Unix }}">
{{ end }}
{{ end }}

{{ define "navigation-links" }}
{{ range .App.Config.Pages }}
<a href="/{{ .Slug }}" class="nav-item{{ if eq .Slug $.Page.Slug }} nav-item-current{{ end }}">{{ .Title }}</a>
{{ end }}
{{ end }}

{{ define "document-body" }}
<div class="flex flex-column height-100">
    <div class="header-container content-bounds">
        <div class="header flex padding-inline-widget widget-content-frame">
            <!-- TODO: Replace G with actual logo, first need an actual logo -->
            <div class="logo">G</div>
            <div class="nav flex grow">
                {{ template "navigation-links" . }}
            </div>
        </div>
    </div>

    <div class="mobile-navigation">
        <div class="mobile-navigation-icons">
            <a class="mobile-navigation-label" href="#top">↑</a>
            {{ range $i, $column := .Page.Columns }}
            <label class="mobile-navigation-label"><input type="radio" class="mobile-navigation-input" name="column" value="{{ $i }}" autocomplete="off"{{ if eq "full" $column.Size }} checked{{ end }}><div class="mobile-navigation-pill"></div></label>
            {{ end }}
            <label class="mobile-navigation-label"><input type="checkbox" class="mobile-navigation-page-links-input" autocomplete="on"><div class="hamburger-icon"></div></label>
        </div>
        <div class="mobile-navigation-page-links">
            {{ template "navigation-links" . }}
        </div>
    </div>

    <div class="content-bounds grow">
        <div class="page" id="page">
            <div class="page-content" id="page-content"></div>
            <div class="page-loading-container">
                <!-- TODO: add a bigger/better loading indicator -->
                <div class="loading-icon"></div>
            </div>
        </div>
    </div>

    <div class="footer flex items-center flex-column">
        <div>
            <a class="size-h3" href="https://github.com/glanceapp/glance" target="_blank" rel="noreferrer">Glance</a> {{ if ne "dev" .App.Version }}<a class="visited-indicator" title="Release notes" href="https://github.com/glanceapp/glance/releases/tag/{{ .App.Version }}" target="_blank" rel="noreferrer">{{ .App.Version }}</a>{{ else }}({{ .App.Version }}){{ end }}
        </div>
        <a class="color-primary block margin-top-5 size-h5" href="https://github.com/glanceapp/glance/issues" target="_blank" rel="noreferrer">Report issue</a>
    </div>

    <div class="mobile-navigation-offset"></div>
</div>
{{ end }}