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

        <div class="detail-container">
            <div class="detail-header">
                <div>
                    <h2>{{.Studio.Name}}</h2>
                </div>
                <div class="badge">ID: {{.Studio.ID}}</div>
            </div>

            {{if .Studio.ImageURL}}
            <div class="studio-logo">
                <img src="{{.Studio.ImageURL}}" alt="{{.Studio.Name}}" onerror="this.style.display='none'">
            </div>
            {{end}}

            <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 .Studio.Source .Studio.Description}}
                <div class="detail-section">
                    <h3>Metadata</h3>
                    {{if .Studio.Source}}
                    <div class="detail-row">
                        <span class="label">Source:</span>
                        <span class="value">{{.Studio.Source}}</span>
                    </div>
                    <div class="detail-row">
                        <span class="label">Source ID:</span>
                        <span class="value">{{.Studio.SourceID}}</span>
                    </div>
                    {{end}}
                </div>
                {{end}}
            </div>

            {{if .Studio.Description}}
            <div class="detail-section full-width">
                <h3>Description</h3>
                <p class="bio-text">{{.Studio.Description}}</p>
            </div>
            {{end}}
        </div>
        </main>
    </div>
    {{template "html-scripts" .}}
</body>
</html>
