{{define "library"}}
<div class="page-header">
    <h2>Library</h2>
    <div class="actions">
        <form method="post" action="/library/scan" class="inline">
            <button type="submit">Scan Library</button>
        </form>
        <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>
    {{$path := .Data.Path}}
    {{$parts := splitPath $path}}
    {{$currentPath := ""}}
    {{range $i, $part := $parts}}
        {{$currentPath = printf "%s/%s" $currentPath $part}}
        <span>/</span>
        <a href="/library?path={{$currentPath}}">{{$part}}</a>
    {{end}}
</nav>
{{end}}

<div class="library-grid">
    {{range .Data.Folders}}
    <a href="/library?path={{.}}" class="folder-item">
        <div class="folder-icon">📁</div>
        <div class="folder-name">{{baseName .}}</div>
    </a>
    {{end}}

    {{range .Data.Media}}
    <a href="/library/{{.ID}}" class="media-item {{if .IsAudio}}audio{{else}}video{{end}}">
        <div class="media-thumbnail">
            {{if .IsAudio}}
            <img src="/static/icons/audio-icon.svg" alt="">
            {{else}}
            <img src="/media/{{.ID}}/thumbnail" alt="" loading="lazy">
            {{end}}
        </div>
        <div class="media-info">
            <div class="media-title">{{.Title}}</div>
            {{if .Duration}}
            <div class="media-duration">{{formatDuration .Duration}}</div>
            {{end}}
            <div class="media-path">{{.RelativePath}}</div>
        </div>
    </a>
    {{end}}
</div>

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