{{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>
                    </header>
                    {{if .Tags}}
                        <footer>
                            {{range .Tags}}
                                <a href="{{basePath}}/tags/{{.Name}}" class="tag-chip">{{.Name}}</a>
                            {{end}}
                        </footer>
                    {{end}}
                    <footer class="fave-card-actions">
                        <span class="privacy-toggle" id="privacy-{{.ID}}">
                            <button
                                hx-post="{{basePath}}/faves/{{.ID}}/privacy"
                                hx-target="#privacy-{{.ID}}"
                                hx-swap="outerHTML"
                                class="fave-action-btn {{if eq .Privacy "private"}}secondary{{end}}"
                                aria-label="{{if eq .Privacy "public"}}Gjør privat{{else}}Gjør offentlig{{end}}"
                                title="{{if eq .Privacy "public"}}Gjør privat{{else}}Gjør offentlig{{end}}"
                            >{{if eq .Privacy "public"}}Offentlig{{else}}Privat{{end}}</button>
                        </span>
                        <a href="{{basePath}}/faves/{{.ID}}/edit" class="fave-action-link"
                           aria-label="Rediger {{.Description}}">Rediger</a>
                        <button
                            hx-delete="{{basePath}}/faves/{{.ID}}"
                            hx-confirm="Er du sikker på at du vil slette denne favoritten?"
                            hx-target="closest article"
                            hx-swap="outerHTML"
                            class="fave-action-btn secondary"
                            aria-label="Slett {{.Description}}"
                        >Slett</button>
                    </footer>
                </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}}