{{ template "header" . }}
<div class="flex flex-col gap-4">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold">Library</h1>
        <button class="btn btn-primary animate-none" 
                hx-get="/api/library/scan" 
                hx-target="#scan-results"
                hx-indicator="#scan-spinner, #scan-results"
                hx-disabled-elt="this">
            <span id="scan-spinner" class="loading loading-spinner loading-xs htmx-indicator mr-1"></span>
            Scan for FLACs
        </button>
    </div>

    <div class="card bg-base-100 shadow">
        <div class="card-body">
            <h2 class="card-title">Scan Results</h2>
            <div id="scan-results" class="overflow-x-auto">
                {{ if .HasCache }}
                    {{ template "scan_results.html" .CachedAlbums }}
                {{ else }}
                    <p class="text-sm opacity-50">Click scan to find FLAC albums</p>
                {{ end }}
            </div>
        </div>
    </div>
</div>
{{ template "footer" . }}