{{define "head"}}
{{with .Data}}{{$d := .}}{{with .ProfileUser}}
    {{if eq .ProfileVisibility "public"}}
        <meta property="og:title" content="{{.DisplayNameOrUsername}} sine favoritter">
        <meta property="og:type" content="profile">
        {{if $.ExternalURL}}
            <meta property="og:url" content="{{$.ExternalURL}}/u/{{.Username}}">
            {{if .AvatarPath}}
                <meta property="og:image" content="{{$.ExternalURL}}/uploads/{{.AvatarPath}}">
            {{end}}
        {{end}}
        <meta property="og:site_name" content="{{$.SiteName}}">
    {{end}}
{{end}}{{end}}
{{end}}

{{define "content"}}
{{with .Data}}
    {{$d := .}}
    {{with .ProfileUser}}
        <section class="profile-header">
            {{if .AvatarPath}}
                <img src="{{basePath}}/uploads/{{.AvatarPath}}"
                     alt="Profilbilde for {{.DisplayNameOrUsername}}"
                     class="avatar-large">
            {{end}}
            <hgroup>
                <h1>{{.DisplayNameOrUsername}}</h1>
                {{if and (ne .DisplayName "") (ne .DisplayName .Username)}}
                    <p>@{{.Username}}</p>
                {{end}}
            </hgroup>
        </section>

        {{if not $d.IsLimited}}
            {{if .Bio}}
                <p>{{.Bio}}</p>
            {{end}}

            <p><small>Medlem siden {{.CreatedAt.Format "02.01.2006"}}</small></p>

            {{if $d.IsOwner}}
                <p>
                    <a href="{{basePath}}/settings" role="button" class="outline">Rediger profil</a>
                    <a href="{{basePath}}/faves/new" role="button">+ Ny favoritt</a>
                </p>
            {{end}}

            <h2>
                {{if $d.IsOwner}}Favoritter{{else}}Offentlige favoritter{{end}}
                <small>({{$d.Total}})</small>
            </h2>

            {{if $d.Faves}}
                <div class="fave-grid" role="list">
                    {{range $d.Faves}}
                        <article class="fave-card" role="listitem">
                            {{if .ImagePath}}
                                <img src="{{basePath}}/uploads/{{.ImagePath}}"
                                     alt="{{.Description}}"
                                     loading="lazy">
                            {{end}}
                            <header>
                                <a href="{{basePath}}/faves/{{.ID}}">
                                    <strong>{{.Description}}</strong>
                                </a>
                                {{if eq .Privacy "private"}}
                                    <small class="badge-private" aria-label="Privat">Privat</small>
                                {{end}}
                            </header>
                            {{if .Tags}}
                                <footer>
                                    {{range .Tags}}
                                        <a href="{{basePath}}/tags/{{.Name}}" class="tag-chip">{{.Name}}</a>
                                    {{end}}
                                </footer>
                            {{end}}
                        </article>
                    {{end}}
                </div>

                {{if gt $d.TotalPages 1}}
                    <nav aria-label="Sidenavigasjon">
                        <ul>
                            {{if gt $d.Page 1}}
                                <li><a href="{{basePath}}/u/{{.Username}}?page={{subtract $d.Page 1}}">← Forrige</a></li>
                            {{end}}
                            <li>Side {{$d.Page}} av {{$d.TotalPages}}</li>
                            {{if lt $d.Page $d.TotalPages}}
                                <li><a href="{{basePath}}/u/{{.Username}}?page={{add $d.Page 1}}">Neste →</a></li>
                            {{end}}
                        </ul>
                    </nav>
                {{end}}
            {{else}}
                {{if $d.IsOwner}}
                    <p>Du har ingen favoritter ennå. <a href="{{basePath}}/faves/new">Legg til din første!</a></p>
                {{else}}
                    <p>Ingen offentlige favoritter ennå.</p>
                {{end}}
            {{end}}
        {{else}}
            <p><small>Denne profilen har begrenset synlighet.</small></p>
        {{end}}
    {{end}}
{{end}}
{{end}}