{{define "title"}}{{.Project.Name}} - git-pkgs proxy{{end}}

{{define "content"}}
<div class="mb-8">
    <a href="/ui/projects" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">← Projects</a>
    <h1 class="text-3xl font-bold mt-2 mb-2 break-all">{{.Project.Name}}</h1>
    <p class="text-gray-600 dark:text-gray-400">
        {{.Project.Components}} packages, uploaded {{.Project.UploadedAt}}{{if .Project.Branch}} from <span class="font-mono">{{.Project.Branch}}</span>{{end}}{{if .Project.Ref}} at <span class="font-mono">{{.Project.Ref}}</span>{{end}}
    </p>
    {{if .Outdated}}
    <div class="flex gap-2 mt-3">
        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300">{{.Outdated}} outdated</span>
    </div>
    {{end}}
    <div id="project-delete" class="mt-4" data-project="{{.Project.Name}}">
        <button type="button" id="project-delete-start" class="text-sm px-3 py-1.5 rounded-lg border border-red-300 text-red-700 hover:bg-red-50 dark:border-red-800 dark:text-red-400 dark:hover:bg-red-950">Delete project</button>
        <form id="project-delete-form" class="hidden flex-wrap items-center gap-2">
            <label for="project-delete-token" class="text-sm text-gray-600 dark:text-gray-400">Upload token</label>
            <input type="password" id="project-delete-token" autocomplete="off" required class="text-sm px-2 py-1.5 rounded-lg border border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-900">
            <button type="submit" class="text-sm px-3 py-1.5 rounded-lg bg-red-600 text-white hover:bg-red-700">Delete {{.Project.Name}}</button>
            <button type="button" id="project-delete-cancel" class="text-sm px-3 py-1.5 rounded-lg border border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800">Cancel</button>
        </form>
        <p id="project-delete-error" class="hidden mt-2 text-sm text-red-700 dark:text-red-400"></p>
    </div>
</div>
<script src="/ui/static/project-delete.js" defer></script>

{{if .Components}}
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800">
    <div class="divide-y divide-gray-200 dark:divide-gray-800">
        {{range .Components}}
        <div class="px-6 py-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
            <div class="min-w-0 flex items-center gap-2">
                {{template "ecosystem_badge" .Ecosystem}}
                {{if .Cached}}
                <a href="/ui/package/{{.CachedEcosystem}}/{{.CachedName}}" class="font-medium truncate hover:text-blue-600 dark:hover:text-blue-400">{{.Name}}</a>
                {{else}}
                <span class="font-medium truncate">{{.Name}}</span>
                {{end}}
                <span class="shrink-0 font-mono text-sm text-gray-500 dark:text-gray-400">{{.Version}}</span>
            </div>
            <div class="flex items-center gap-2 shrink-0">
                {{if .Outdated}}
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300" title="latest is {{.LatestVersion}}">outdated, latest {{.LatestVersion}}</span>
                {{end}}
                {{if not .Cached}}
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">not cached</span>
                {{end}}
            </div>
        </div>
        {{end}}
    </div>
</div>
{{else}}
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800 p-12 text-center">
    <p class="text-gray-500 dark:text-gray-400">The latest SBOM lists no packages the proxy serves</p>
</div>
{{end}}
{{end}}