{{define "library"}}
<div class="page-header">
    <h2>Library</h2>
    <div class="actions">
        <form method="get" action="/library" class="inline filter-form">
            <input type="hidden" name="path" value="{{.Data.Path}}">
            <input type="text" name="filter" placeholder="Search..." value="{{.Data.Filter}}">
            <select name="sort">
                <option value="date" {{if eq .Data.SortBy "date"}}selected{{end}}>Date</option>
                <option value="title" {{if eq .Data.SortBy "title"}}selected{{end}}>Title</option>
                <option value="duration" {{if eq .Data.SortBy "duration"}}selected{{end}}>Duration</option>
            </select>
            <button type="submit">Filter</button>
        </form>
    </div>
</div>

{{if .Data.Path}}
<nav class="breadcrumbs">
    <a href="/library">Home</a>
    {{$parts := splitPath .Data.Path}}
    {{$last := sub (len $parts) 1}}
    {{$currentPath := ""}}
    {{range $i, $part := $parts}}
        {{$currentPath = printf "%s/%s" $currentPath $part}}
        <span>/</span>
        {{if eq $i $last}}
        <a href="/library?path={{$currentPath}}" aria-current="page" class="current">{{$part}}</a>
        {{else}}
        <a href="/library?path={{$currentPath}}">{{$part}}</a>
        {{end}}
    {{end}}
</nav>
{{end}}

{{$parentPath := .Data.Path}}
<div class="library-grid">
    {{range .Data.Folders}}
    <a href="/library?path={{printf "%s/%s" $parentPath .}}" class="folder-item">
        <div class="folder-icon">📁</div>
        <div class="folder-name">{{baseName .}}</div>
    </a>
    {{end}}

    {{range .Data.Items}}
    {{$item := .}}
    {{$count := len .MediaFiles}}
    <a href="/library/item/{{urlEncodePath .RelPath}}" class="media-item {{if gt $count 0}}{{if (index .MediaFiles 0).IsAudio}}audio{{else}}video{{end}}{{end}}">
        <div class="media-thumbnail {{if le $count 1}}count-1{{else if eq $count 2}}count-2{{else if eq $count 3}}count-3{{else}}count-many{{end}}">
            {{if le $count 1}}
            {{if gt $count 0}}
            {{$mf := index .MediaFiles 0}}
            <div class="thumb-tile">
                <img src="/media/item/{{urlEncodePath .RelPath}}/thumbnail?file={{$mf.Filename}}" alt="" loading="lazy">
                {{if gt $mf.Duration 0}}<span class="media-duration">{{formatDuration $mf.Duration}}</span>{{end}}
            </div>
            {{else}}
            <div class="thumb-tile">
                <img src="/static/icons/video-icon.svg" alt="" loading="lazy">
            </div>
            {{end}}
            {{else}}
            {{range $i, $mf := .MediaFiles}}
            {{if lt $i 4}}
            <div class="thumb-tile">
                <img src="/media/item/{{urlEncodePath $item.RelPath}}/thumbnail?file={{$mf.Filename}}" alt="" loading="lazy">
                {{if gt $mf.Duration 0}}<span class="media-duration">{{formatDuration $mf.Duration}}</span>{{end}}
            </div>
            {{end}}
            {{end}}
            {{if gt $count 4}}
            <span class="thumb-more">+{{sub $count 4}}</span>
            {{end}}
            <span class="thumb-count">{{$count}} files</span>
            {{end}}
        </div>
        <div class="media-info">
            <div class="media-title">{{.Name}}</div>
        </div>
    </a>
    {{end}}
</div>

{{if and (eq (len .Data.Folders) 0) (eq (len .Data.Items) 0)}}
<div class="empty-state">
    <p>No media found. <a href="/download">Start a download</a> or add existing files.</p>
</div>
{{end}}

{{template "pagination" .Data.Pagination}}
{{end}}