<!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="detail-header">
            <div class="detail-image">
                {{if .Movie.ImageURL}}
                <img src="{{.Movie.ImageURL}}" alt="{{.Movie.Title}}">
                {{else}}
                <div class="placeholder-image">No Image</div>
                {{end}}
            </div>

            <div class="detail-info">
                <h1>{{.Movie.Title}}</h1>

                <div class="detail-meta">
                    {{if .Movie.Date}}
                    <div class="meta-item">
                        <strong>Release Date:</strong> {{.Movie.Date}}
                    </div>
                    {{end}}

                    {{if .StudioName}}
                    <div class="meta-item">
                        <strong>Studio:</strong>
                        {{if .Movie.StudioID}}
                        <a href="/studios/{{.Movie.StudioID}}">{{.StudioName}}</a>
                        {{else}}
                        {{.StudioName}}
                        {{end}}
                    </div>
                    {{end}}

                    {{if .Movie.Director}}
                    <div class="meta-item">
                        <strong>Director:</strong> {{.Movie.Director}}
                    </div>
                    {{end}}

                    {{if .Movie.Duration}}
                    <div class="meta-item">
                        <strong>Duration:</strong> {{.Movie.Duration}} minutes
                    </div>
                    {{end}}

                    {{if .Movie.Source}}
                    <div class="meta-item">
                        <strong>Source:</strong> {{.Movie.Source}}
                        {{if .Movie.URL}}
                        | <a href="{{.Movie.URL}}" target="_blank">View on {{.Movie.Source}}</a>
                        {{end}}
                    </div>
                    {{end}}
                </div>

                {{if .Movie.Description}}
                <div class="detail-description">
                    <h3>Description</h3>
                    <p>{{.Movie.Description}}</p>
                </div>
                {{end}}
            </div>
        </div>

        {{if .Scenes}}
        <section class="detail-section">
            <h2>Scenes ({{len .Scenes}})</h2>
            <div class="gx-card-grid scene-card-grid">
                {{range .Scenes}}
                <div class="gx-card scene-card" onclick="location.href='/scenes/{{.ID}}'">
                    <div class="gx-card-thumb"
                         style="background-image: url('{{if .ImageURL}}{{.ImageURL}}{{else}}/static/img/placeholder-scene.jpg{{end}}'); background-color: #1a1a1a;">
                    </div>

                    <div class="gx-card-body">
                        <div class="gx-card-title">{{.Title}}</div>
                        {{if .Date}}
                        <div class="gx-card-meta">📅 {{.Date}}</div>
                        {{end}}
                    </div>
                </div>
                {{end}}
            </div>
        </section>
        {{end}}

        {{if .Movie.BackImageURL}}
        <section class="detail-section">
            <h2>Back Cover</h2>
            <div style="max-width: 800px;">
                <img src="{{.Movie.BackImageURL}}" alt="{{.Movie.Title}} - Back Cover" style="width: 100%; border-radius: 8px;">
            </div>
        </section>
        {{end}}
        </main>
    </div>
    {{template "html-scripts" .}}
</body>
</html>
