<!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="page-header">
            <h2>Performers</h2>
            <form class="search-form" action="/performers" method="get">
                <input type="text" name="q" class="input" placeholder="Search performers..." value="{{.Query}}">

                <select name="nationality" class="input" style="max-width: 200px;">
                    <option value="all" {{if eq .SelectedNationality ""}}selected{{end}}>All Nationalities</option>
                    {{range .Nationalities}}
                    <option value="{{.}}" {{if eq . $.SelectedNationality}}selected{{end}}>{{.}}</option>
                    {{end}}
                </select>

                <select name="gender" class="input" style="max-width: 150px;">
                    <option value="all" {{if eq .SelectedGender ""}}selected{{end}}>All Genders</option>
                    {{range .Genders}}
                    <option value="{{.}}" {{if eq . $.SelectedGender}}selected{{end}}>{{.}}</option>
                    {{end}}
                </select>

                <button type="submit" class="btn">Search<div class="hoverEffect"><div></div></div></button>
            </form>
        </div>

        {{if .Performers}}
        <div class="gx-card-grid performer-card-grid">
            {{range .Performers}}
            <div class="gx-card performer-card" onclick="location.href='/performers/{{.Performer.ID}}'">
                <div class="gx-card-thumb"
                     style="background-image: url('{{if .Performer.ImageURL}}{{.Performer.ImageURL}}{{else}}/static/img/placeholder-performer.jpg{{end}}'); background-color: #1a1a1a;">
                </div>

                <div class="gx-card-body">
                    <div class="gx-card-title">
                        {{.Performer.Name}}{{if gt .Age 0}} ({{.Age}}){{end}}
                    </div>
                    <div class="gx-card-meta">{{.SceneCount}} scenes</div>

                    {{if .Performer.Nationality}}
                    <div class="gx-card-meta">
                        {{if .CountryFlag}}{{.CountryFlag}}{{else}}🌍{{end}} {{.Performer.Nationality}}
                    </div>
                    {{end}}

                    {{if .Performer.Gender}}
                    <div class="gx-card-tags">
                        <span class="gx-card-tag">{{.Performer.Gender}}</span>
                        {{if .Performer.Source}}
                        <span class="gx-card-tag">{{.Performer.Source}}</span>
                        {{end}}
                    </div>
                    {{end}}
                </div>
            </div>
            {{end}}
        </div>
        {{else}}
        <div class="empty-state">
            <p>No performers found.</p>
            <div class="empty-import-actions">
                <p class="hint">Import performers from Adult Empire without the CLI.</p>
                <div class="action-buttons">
                    <button type="button" class="btn" onclick="bulkImportPerformers()">Import all performers</button>
                    <button type="button" class="btn btn-secondary" onclick="aeImportPerformerByName()">Import performer by name</button>
                    <button type="button" class="btn btn-secondary" onclick="aeImportPerformerByURL()">Import performer by URL</button>
                </div>
                <div id="ae-status" class="status-banner"></div>
            </div>
        </div>
        {{end}}
        </main>
    </div>
    {{template "html-scripts" .}}
</body>
</html>
