<!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="/performers">← Back to Performers</a>
        </div>

        <div class="detail-container">
            {{if or .Performer.ImageURL .Performer.PosterURL}}
            <div class="image-gallery">
                {{if .Performer.ImageURL}}
                <div class="profile-image" onclick="openLightbox('{{.Performer.ImageURL}}')">
                    <img src="{{.Performer.ImageURL}}" alt="{{.Performer.Name}}" onerror="this.style.display='none'">
                </div>
                {{end}}
                {{if .Performer.PosterURL}}
                <div class="profile-image" onclick="openLightbox('{{.Performer.PosterURL}}')">
                    <img src="{{.Performer.PosterURL}}" alt="{{.Performer.Name}} Poster" onerror="this.style.display='none'">
                </div>
                {{end}}
            </div>
            {{end}}

            <div class="detail-header">
                <div>
                    <h2>{{.Performer.Name}}</h2>
                    {{if .Performer.Aliases}}
                    <p class="aliases">aka {{.Performer.Aliases}}</p>
                    {{end}}
                </div>
                <div class="badge">ID: {{.Performer.ID}}</div>
            </div>

            <div class="detail-grid">
                <div class="detail-section">
                    <h3>Statistics</h3>
                    <div class="detail-row">
                        <span class="label">Scenes:</span>
                        <span class="value">{{.SceneCount}}</span>
                    </div>
                </div>

                {{if or .Performer.Gender .Performer.Birthday .Performer.Birthplace .Performer.Nationality}}
                <div class="detail-section">
                    <h3>Personal Information</h3>
                    {{if .Performer.Gender}}
                    <div class="detail-row">
                        <span class="label">Gender:</span>
                        <span class="value">{{.Performer.Gender}}</span>
                    </div>
                    {{end}}
                    {{if .Performer.Birthday}}
                    <div class="detail-row">
                        <span class="label">Birthday:</span>
                        <span class="value">{{.Performer.Birthday}}</span>
                    </div>
                    {{end}}
                    {{if .Performer.DateOfDeath}}
                    <div class="detail-row">
                        <span class="label">Date of Death:</span>
                        <span class="value">{{.Performer.DateOfDeath}}</span>
                    </div>
                    {{end}}
                    {{if .Performer.Astrology}}
                    <div class="detail-row">
                        <span class="label">Astrology:</span>
                        <span class="value">{{.Performer.Astrology}}</span>
                    </div>
                    {{end}}
                    {{if .Performer.Birthplace}}
                    <div class="detail-row">
                        <span class="label">Birthplace:</span>
                        <span class="value">{{.Performer.Birthplace}}</span>
                    </div>
                    {{end}}
                    {{if .Performer.Nationality}}
                    <div class="detail-row">
                        <span class="label">Nationality:</span>
                        <span class="value">{{.Performer.Nationality}}</span>
                    </div>
                    {{end}}
                    {{if .Performer.Ethnicity}}
                    <div class="detail-row">
                        <span class="label">Ethnicity:</span>
                        <span class="value">{{.Performer.Ethnicity}}</span>
                    </div>
                    {{end}}
                </div>
                {{end}}

                {{if or .Performer.Height .Performer.Weight .Performer.Measurements .Performer.HairColor .Performer.EyeColor}}
                <div class="detail-section">
                    <h3>Physical Attributes</h3>
                    {{if .Performer.Height}}
                    <div class="detail-row">
                        <span class="label">Height:</span>
                        <span class="value">{{.Performer.Height}} cm</span>
                    </div>
                    {{end}}
                    {{if .Performer.Weight}}
                    <div class="detail-row">
                        <span class="label">Weight:</span>
                        <span class="value">{{.Performer.Weight}} kg</span>
                    </div>
                    {{end}}
                    {{if .Performer.Measurements}}
                    <div class="detail-row">
                        <span class="label">Measurements:</span>
                        <span class="value">{{.Performer.Measurements}}</span>
                    </div>
                    {{end}}
                    {{if .Performer.CupSize}}
                    <div class="detail-row">
                        <span class="label">Cup Size:</span>
                        <span class="value">{{.Performer.CupSize}}</span>
                    </div>
                    {{end}}
                    {{if .Performer.HairColor}}
                    <div class="detail-row">
                        <span class="label">Hair Color:</span>
                        <span class="value">{{.Performer.HairColor}}</span>
                    </div>
                    {{end}}
                    {{if .Performer.EyeColor}}
                    <div class="detail-row">
                        <span class="label">Eye Color:</span>
                        <span class="value">{{.Performer.EyeColor}}</span>
                    </div>
                    {{end}}
                    {{if .Performer.TattooDescription}}
                    <div class="detail-row">
                        <span class="label">Tattoos:</span>
                        <span class="value">{{.Performer.TattooDescription}}</span>
                    </div>
                    {{end}}
                    {{if .Performer.PiercingDescription}}
                    <div class="detail-row">
                        <span class="label">Piercings:</span>
                        <span class="value">{{.Performer.PiercingDescription}}</span>
                    </div>
                    {{end}}
                </div>
                {{end}}

                {{if .Performer.Career}}
                <div class="detail-section">
                    <h3>Career</h3>
                    <div class="detail-row">
                        <span class="label">Years:</span>
                        <span class="value">{{.Performer.Career}}</span>
                    </div>
                </div>
                {{end}}

                {{if or .Performer.Source .Performer.ImageURL}}
                <div class="detail-section">
                    <h3>Metadata</h3>
                    {{if .Performer.Source}}
                    <div class="detail-row">
                        <span class="label">Source:</span>
                        <span class="value">{{.Performer.Source}}</span>
                    </div>
                    <div class="detail-row">
                        <span class="label">Source ID:</span>
                        <span class="value">{{.Performer.SourceID}}</span>
                    </div>
                    {{end}}
                    {{if .Performer.ImageURL}}
                    <div class="detail-row">
                        <span class="label">Image:</span>
                        <span class="value"><a href="{{.Performer.ImageURL}}" target="_blank">View</a></span>
                    </div>
                    {{end}}
                </div>
                {{end}}
            </div>

            {{if .Performer.Bio}}
            <div class="detail-section full-width">
                <h3>Biography</h3>
                <p class="bio-text">{{.Performer.Bio}}</p>
            </div>
            {{end}}
        </div>

        <!-- Scenes Section -->
        {{if .Scenes}}
        <div class="scenes-section">
            <div class="section-header">
                <h2>Scenes ({{len .Scenes}})</h2>
            </div>
            <div class="scene-grid">
                {{range .Scenes}}
                <a href="/scenes/{{.ID}}" class="scene-card">
                    {{if .ImageURL}}
                    <div class="scene-thumbnail">
                        <img src="{{.ImageURL}}" alt="{{.Title}}" onerror="this.parentElement.classList.add('no-image')">
                    </div>
                    {{else}}
                    <div class="scene-thumbnail no-image">
                        <span class="no-image-text">🎬</span>
                    </div>
                    {{end}}
                    <div class="scene-info">
                        <h3 class="scene-title">{{.Title}}</h3>
                        {{if .Date}}
                        <p class="scene-date">📅 {{.Date}}</p>
                        {{end}}
                        {{if .Code}}
                        <p class="scene-code">🏷️ {{.Code}}</p>
                        {{end}}
                    </div>
                </a>
                {{end}}
            </div>
        </div>
        {{else}}
        <div class="empty-state">
            <p>No scenes found for this performer.</p>
            <p class="help-text">Try importing scenes from ThePornDB or Adult Empire.</p>
        </div>
        {{end}}
        </main>
    </div>

    <!-- Image Lightbox Modal -->
    <div id="lightbox" class="lightbox" onclick="closeLightbox()">
        <span class="lightbox-close">&times;</span>
        <img id="lightbox-img" class="lightbox-content">
    </div>

    <script src="/static/js/app.js"></script>
    <script>
        function openLightbox(imageUrl) {
            document.getElementById('lightbox').style.display = 'flex';
            document.getElementById('lightbox-img').src = imageUrl;
            document.body.style.overflow = 'hidden';
        }

        function closeLightbox() {
            document.getElementById('lightbox').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // Close on Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeLightbox();
            }
        });
    </script>
    {{template "html-scripts" .}}
</body>
</html>
