package templates

import "gitgud/internal/domain"

templ Explore(user *domain.User, repos []*domain.Repository) {
	@Layout("Explore · gitgud", user) {
		<div class="mx-auto max-w-3xl">
			<div class="mb-6 flex items-center justify-between gap-4">
				<div>
					<h1 class="text-base font-semibold text-ink">Public repositories</h1>
					<p class="mt-1 text-[13px] text-muted">
						{ itoa(len(repos)) } public { plural(len(repos), "repository", "repositories") } on this instance.
					</p>
				</div>
				if user != nil {
					<a class="btn btn-primary shrink-0" href="/new">+ New repository</a>
				}
			</div>
			if len(repos) == 0 {
				if user != nil {
					@emptyState("No public repositories yet", "Create a public repository and it will show up here for everyone.", "/new", "Create repository")
				} else {
					@emptyState("No public repositories yet", "When someone creates a public repository, it will appear here.", "", "")
				}
			} else {
				@repoList(repos)
			}
		</div>
	}
}

templ repoList(repos []*domain.Repository) {
	<div class="flex flex-col">
		for _, repo := range repos {
			<a class="group block border-t border-line py-3.5 last:border-b" href={ templ.SafeURL("/" + repo.OwnerName + "/" + repo.Name) }>
				<div class="mb-1.5 flex items-center gap-2">
					<span class="font-mono text-sm font-semibold text-accent group-hover:underline">{ repo.OwnerName }/{ repo.Name }</span>
					if repo.IsPrivate {
						<span class="rounded border border-[#4a3d24] px-1.5 py-0.5 font-mono text-[10px] text-warn">private</span>
					} else {
						<span class="rounded border border-line2 px-1.5 py-0.5 font-mono text-[10px] text-faint">public</span>
					}
				</div>
				if repo.Description != "" {
					<p class="mb-2.5 line-clamp-2 text-[13px] text-muted">{ repo.Description }</p>
				}
				<div class="flex items-center gap-1.5 font-mono text-xs text-faint">
					<span class="size-2 rounded-full bg-accent"></span>
					{ repo.DefaultBranch }
				</div>
			</a>
		}
	</div>
}

templ emptyState(title, body, href, cta string) {
	<div class="card flex flex-col items-center px-6 py-14 text-center">
		<div class="mb-4 flex size-10 items-center justify-center rounded-full border border-line2 text-faint">·</div>
		<h3 class="font-semibold text-ink">{ title }</h3>
		<p class="mt-1 max-w-sm text-sm text-muted">{ body }</p>
		if href != "" {
			<a class="btn btn-primary mt-5" href={ templ.SafeURL(href) }>{ cta }</a>
		}
	</div>
}