{{define "library_detail"}}
<div class="detail-view">
    <div class="detail-header">
        <a href="/library" class="back-link">← Back to Library</a>
        <h2>{{.Data.Media.Title}}</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 media?</p>
                <form method="post" action="/library/{{.Data.Media.ID}}/delete" class="form-actions">
                    <button type="submit" class="danger">Yes, Delete</button>
                </form>
            </div>
        </details>
    </div>

    <div class="player-container">
        {{if .Data.Media.IsAudio}}
        <audio controls>
            <source src="/media/{{.Data.Media.ID}}" type="{{mimeType .Data.Media.Filepath}}">
            Your browser does not support the audio element.
        </audio>
        {{else}}
        <video controls preload="metadata">
            <source src="/media/{{.Data.Media.ID}}" type="{{mimeType .Data.Media.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>

    <div class="detail-meta">
        <dl>
            <dt>Path</dt>
            <dd>{{.Data.Media.RelativePath}}</dd>

            {{if .Data.Media.Duration}}
            <dt>Duration</dt>
            <dd>{{formatDuration .Data.Media.Duration}}</dd>
            {{end}}

            {{if .Data.Media.URL}}
            <dt>Source URL</dt>
            <dd><a href="{{.Data.Media.URL}}" target="_blank">{{.Data.Media.URL}}</a></dd>
            {{end}}

            {{if .Data.Media.Description}}
            <dt>Description</dt>
            <dd>{{.Data.Media.Description}}</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}}

            {{if .Data.Metadata.VideoCodec}}
            <dt>Video Codec</dt>
            <dd>{{.Data.Metadata.VideoCodec}}</dd>
            {{end}}

            {{if .Data.Metadata.AudioCodec}}
            <dt>Audio Codec</dt>
            <dd>{{.Data.Metadata.AudioCodec}}</dd>
            {{end}}

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

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

            <dt>File</dt>
            <dd>{{.Data.Media.Filepath}}</dd>
        </dl>
    </div>
</div>
{{end}}