{{define "content"}}
<header>
    <hgroup>
        <h1>Mine favoritter</h1>
        <p>{{with .Data}}{{.Total}} favoritter totalt{{end}}</p>
    </hgroup>
    <a href="{{basePath}}/faves/new" role="button">+ Ny favoritt</a>
</header>

{{with .Data}}
    {{if .Faves}}
        <div class="fave-grid" role="list">
            {{range .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 .TotalPages 1}}
            <nav aria-label="Sidenavigasjon">
                <ul>
                    {{if gt .Page 1}}
                        <li><a href="{{basePath}}/faves?page={{subtract .Page 1}}">← Forrige</a></li>
                    {{end}}
                    <li>Side {{.Page}} av {{.TotalPages}}</li>
                    {{if lt .Page .TotalPages}}
                        <li><a href="{{basePath}}/faves?page={{add .Page 1}}">Neste →</a></li>
                    {{end}}
                </ul>
            </nav>
        {{end}}
    {{else}}
        <p>Du har ingen favoritter ennå. <a href="{{basePath}}/faves/new">Legg til din første!</a></p>
    {{end}}
{{end}}
{{end}}