{{define "library_detail"}}
<div class="detail-view">
    <div class="detail-header">
        <h2>{{.Data.Item.Name}}</h2>
        <details class="delete-overlay">
            <summary role="button" class="small danger">Delete</summary>
            <div class="overlay-panel">
                <p>Are you sure you want to delete this item?</p>
                <form method="post" action="/library/item/{{urlEncodePath .Data.Item.RelPath}}/delete" class="form-actions">
                    <button type="submit" class="danger">Yes, Delete</button>
                </form>
            </div>
        </details>
    </div>

    {{if gt (len .Data.Item.MediaFiles) 1}}
    <form method="get" action="/library/item/{{urlEncodePath .Data.Item.RelPath}}" class="file-selector">
        <label for="file">Playing</label>
        <select id="file" name="file">
            {{range .Data.Item.MediaFiles}}
            <option value="{{.Filename}}" {{if eq .Filename $.Data.SelectedFilename}}selected{{end}}>{{.Filename}}</option>
            {{end}}
        </select>
        <button type="submit" class="secondary">Switch</button>
    </form>
    {{end}}

    {{range .Data.Item.MediaFiles}}
    {{if eq .Filename $.Data.SelectedFilename}}
    <div class="player-container">
        {{if .IsAudio}}
        <audio controls>
            <source src="/media/item/{{urlEncodePath $.Data.Item.RelPath}}?file={{.Filename}}" type="{{mimeType .Filepath}}">
            Your browser does not support the audio element.
        </audio>
        {{else}}
        <video controls preload="metadata">
            <source src="/media/item/{{urlEncodePath $.Data.Item.RelPath}}?file={{.Filename}}" type="{{mimeType .Filepath}}">
            {{range $.Data.Subtitles}}
            <track kind="subtitles" src="{{.Src}}" srclang="{{.Lang}}" label="{{.Label}}">
            {{end}}
            Your browser does not support the video element.
        </video>
        {{end}}
    </div>
    {{end}}
    {{end}}

    <div class="detail-meta">
        <dl>
            {{if .Data.Item.SourceURL}}
            <dt>Source URL</dt>
            <dd><a href="{{.Data.Item.SourceURL}}" target="_blank">{{.Data.Item.SourceURL}}</a></dd>
            {{end}}

            {{if .Data.Item.Description}}
            {{$longDesc := isLongText .Data.Item.Description}}
            <dt>Description</dt>
            <dd class="description{{if $longDesc}} collapsible{{end}}">
                {{if $longDesc}}<input type="checkbox" id="desc-toggle" class="desc-toggle">{{end}}
                <div class="desc-text">{{.Data.Item.Description}}</div>
                {{if $longDesc}}<label for="desc-toggle" class="desc-toggle-label"></label>{{end}}
            </dd>
            {{end}}
        </dl>

        <details>
            <summary role="button" class="small secondary">More Details</summary>
            <dl>
                {{if .Data.SelectedFilename}}
                <dt>File</dt>
                <dd>{{.Data.SelectedFilename}}</dd>
                {{end}}

                {{if .Data.Item.YtdlpFlags}}
                <dt>yt-dlp flags</dt>
                <dd><code>{{.Data.Item.YtdlpFlags}}</code></dd>
                {{end}}

                {{if .Data.Metadata}}
                {{if .Data.Metadata.Container}}
                <dt>Container</dt>
                <dd>{{.Data.Metadata.Container}}</dd>
                {{end}}

                {{if .Data.Metadata.Resolution}}
                <dt>Resolution</dt>
                <dd>{{.Data.Metadata.Resolution}}</dd>
                {{end}}

                {{range .Data.Metadata.VideoStreams}}
                <dt>Video</dt>
                <dd>
                    {{.Codec}}
                    {{if .Profile}}({{.Profile}}){{end}}
                    {{if .Width}}[{{.Width}}x{{.Height}}]{{end}}
                    {{if .FPS}}@ {{.FPS}} fps{{end}}
                    {{if .PixelFormat}}, {{.PixelFormat}}{{end}}
                    {{if .Bitrate}}, {{.Bitrate}} kbps{{end}}
                </dd>
                {{end}}

                {{range .Data.Metadata.AudioStreams}}
                <dt>Audio</dt>
                <dd>
                    {{.Codec}}
                    {{if .Language}}[{{.Language}}]{{end}}
                    {{if .SampleRate}}, {{.SampleRate}} Hz{{end}}
                    {{if .ChannelLayout}}, {{.ChannelLayout}}{{else if .Channels}}, {{.Channels}} channels{{end}}
                    {{if .SampleFormat}}, {{.SampleFormat}}{{end}}
                    {{if .Bitrate}}, {{.Bitrate}} kbps{{end}}
                </dd>
                {{end}}

                {{range .Data.Metadata.SubtitleStreams}}
                <dt>Subtitle</dt>
                <dd>
                    {{.Codec}}
                    {{if .Language}}[{{.Language}}]{{end}}
                    {{if .Title}}- {{.Title}}{{end}}
                </dd>
                {{end}}

                {{if .Data.Metadata.FileSize}}
                <dt>File Size</dt>
                <dd>{{formatFileSize .Data.Metadata.FileSize}}</dd>
                {{end}}
                {{end}}
            </dl>
        </details>
    </div>

    {{if .Data.Heatmap}}
    <details class="engagement-section">
        <summary role="button" class="small secondary">Playback heatmap</summary>
        <figure class="heatmap-figure">
            <div class="heatmap" role="list" aria-label="Playback activity heatmap">
                {{range .Data.Heatmap}}
                <div class="heatmap-bar" role="listitem" style="width: {{printf "%.4f" .Width}}%; height: {{printf "%.2f" .Height}}%;" aria-label="{{heatmapRange .}}" title="{{heatmapRange .}}"></div>
                {{end}}
            </div>
            <figcaption><span>Start</span><span>End</span></figcaption>
        </figure>
    </details>
    {{end}}

    {{if gt .Data.CommentTotal 0}}
    <details class="engagement-section comments-preview">
        <summary role="button" class="small secondary">Comments <span class="badge">{{.Data.CommentTotal}}</span></summary>
        <div class="comments-actions">
            <a href="/library/comments/{{urlEncodePath .Data.Item.RelPath}}">View all comments</a>
        </div>
        <div class="comment-list">
            {{range .Data.Comments}}
            {{template "comment_card" .}}
            {{end}}
        </div>
    </details>
    {{end}}
</div>
{{end}}