<!DOCTYPE html>
<html lang="en">
<head>
    {{template "html-head" .}}
</head>
<body class="app-shell">
    {{template "navbar" .}}

    <div class="app-body container-fluid px-3 px-lg-4 px-xxl-5">
        <main class="container">
        <div class="breadcrumb">
            <a href="/scenes">← Back to Scenes</a>
        </div>

        <div class="detail-container">
            {{if .Scene.ImageURL}}
            <div class="scene-poster">
                <img src="{{.Scene.ImageURL}}" alt="{{.Scene.Title}}" onerror="this.style.display='none'">
            </div>
            {{end}}

            <div class="detail-header">
                <div>
                    <h2>{{.Scene.Title}}</h2>
                    {{if .Scene.Code}}
                    <p class="aliases">Code: {{.Scene.Code}}</p>
                    {{end}}
                </div>
                <div class="badge">ID: {{.Scene.ID}}</div>
            </div>

            <div class="detail-grid">
                <div class="detail-section">
                    <h3>Information</h3>
                    {{if .Scene.Date}}
                    <div class="detail-row">
                        <span class="label">Date:</span>
                        <span class="value">{{.Scene.Date}}</span>
                    </div>
                    {{end}}
                    {{if .StudioName}}
                    <div class="detail-row">
                        <span class="label">Studio:</span>
                        <span class="value">
                            {{if .Scene.StudioID}}
                            <a href="/studios/{{.Scene.StudioID}}">{{.StudioName}}</a>
                            {{else}}
                            {{.StudioName}}
                            {{end}}
                        </span>
                    </div>
                    {{end}}
                    {{if .Scene.Director}}
                    <div class="detail-row">
                        <span class="label">Director:</span>
                        <span class="value">{{.Scene.Director}}</span>
                    </div>
                    {{end}}
                </div>

                {{if .Performers}}
                <div class="detail-section">
                    <h3>Performers ({{len .Performers}})</h3>
                    <ul class="item-list">
                        {{range .Performers}}
                        <li><a href="/performers/{{.ID}}">{{.Name}}</a></li>
                        {{end}}
                    </ul>
                </div>
                {{end}}

                {{if .Tags}}
                <div class="detail-section">
                    <h3>Tags ({{len .Tags}})</h3>
                    <div class="tag-list">
                        {{range .Tags}}
                        <span class="tag">{{.Name}}</span>
                        {{end}}
                    </div>
                </div>
                {{end}}

                {{if .Movies}}
                <div class="detail-section">
                    <h3>Movies ({{len .Movies}})</h3>
                    <ul class="item-list">
                        {{range .Movies}}
                        <li><a href="/movies/{{.ID}}">{{.Title}}</a></li>
                        {{end}}
                    </ul>
                </div>
                {{end}}

                {{if or .Scene.Source .Scene.URL}}
                <div class="detail-section">
                    <h3>Metadata</h3>
                    {{if .Scene.Source}}
                    <div class="detail-row">
                        <span class="label">Source:</span>
                        <span class="value">{{.Scene.Source}}</span>
                    </div>
                    <div class="detail-row">
                        <span class="label">Source ID:</span>
                        <span class="value">{{.Scene.SourceID}}</span>
                    </div>
                    {{end}}
                    {{if .Scene.URL}}
                    <div class="detail-row">
                        <span class="label">View / Buy:</span>
                        <span class="value"><a class="btn-link" href="{{.Scene.URL}}" target="_blank" rel="noopener">Open on TPDB</a></span>
                    </div>
                    {{end}}
                </div>
                {{end}}
            </div>

            {{if .Scene.Description}}
            <div class="detail-section full-width">
                <h3>Description</h3>
                <p class="bio-text">{{.Scene.Description}}</p>
            </div>
            {{end}}
        </div>
        </main>
    </div>

    {{template "html-scripts" .}}
</body>
</html>
