{{define "ui_button"}}
  <button
    type="{{if .Type}}{{.Type}}{{else}}button{{end}}"
    class="btn {{if .Variant}}btn-{{.Variant}}{{else}}btn-default{{end}} {{if .Size}}btn-{{.Size}}{{end}} {{.Class}}"
    {{if .ID}}id="{{.ID}}"{{end}}
    {{if .Disabled}}disabled{{end}}>
    {{if .Icon}}{{icon .Icon "size-4"}}{{end}}
    {{if .Label}}<span>{{.Label}}</span>{{end}}
  </button>
{{end}}

{{define "ui_badge"}}
  <span class="badge {{if .Variant}}badge-{{.Variant}}{{end}}">
    {{if .Icon}}{{icon .Icon "size-3.5"}}{{end}}
    <span>{{.Text}}</span>
  </span>
{{end}}

{{define "ui_kbd"}}
  <kbd class="kbd">{{.}}</kbd>
{{end}}

{{define "ui_avatar"}}
  {{if .Large}}{{avatar .Username .AvatarURL "avatar-lg"}}{{else}}{{avatar .Username .AvatarURL}}{{end}}
{{end}}

{{define "ui_empty_state"}}
  <div class="empty-state">
    {{if .Icon}}
      <div class="mb-2" style="color:hsl(var(--muted-foreground));">{{icon .Icon "size-6"}}</div>
    {{end}}
    <div class="font-semibold text-base" style="color:hsl(var(--foreground));">{{.Title}}</div>
    {{if .Subtitle}}<div class="text-sm text-muted mt-1">{{.Subtitle}}</div>{{end}}
    {{if .ActionHref}}
      <div class="mt-4">
        <a href="{{.ActionHref}}" class="btn btn-primary btn-sm">
          {{if .ActionIcon}}{{icon .ActionIcon "size-3.5"}}{{end}}
          <span>{{.ActionLabel}}</span>
        </a>
      </div>
    {{end}}
  </div>
{{end}}

{{define "repo_header"}}
  <div class="repo-banner mb-3{{if .Repo.ForkedFromRepoID}} has-subrow{{end}}">
    <div class="repo-banner-main">
      <a href="/{{.Repo.OwnerUsername}}" class="repo-avatar-link">{{avatar .Repo.OwnerUsername .Repo.OwnerAvatarURL "repo-avatar"}}</a>
      <div class="min-w-0 repo-head-block">
        <div class="repo-head-row">
          <nav class="breadcrumb" aria-label="Repository breadcrumb">
            <a href="/{{.Repo.OwnerUsername}}" class="text-sm font-medium text-muted">{{.Repo.OwnerUsername}}</a>
            <span class="breadcrumb-sep">/</span>
            <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}" class="font-semibold text-lg tracking-tight" style="color:hsl(var(--foreground));">{{.Repo.Name}}</a>
          </nav>
          {{if .Repo.IsPrivate}}
            <span class="badge badge-outline">{{icon "lock" "size-3.5"}} {{t .Lang "repo.private"}}</span>
          {{else}}
            <span class="badge badge-outline">{{icon "globe" "size-3.5"}} {{t .Lang "repo.public"}}</span>
          {{end}}
          {{if .Repo.Description}}
            <span class="repo-desc" data-repo-desc>{{.Repo.Description}}</span>
          {{end}}
        </div>
        {{if .Repo.ForkedFromRepoID}}
          <div class="text-xs text-muted mt-1 flex items-center gap-2 flex-wrap">
            <span class="flex items-center gap-1.5">
              {{icon "git-branch" "size-3.5"}}
              {{t .Lang "fork.forked_from"}}
              <a class="font-medium" style="color:hsl(var(--foreground));" href="/{{.Repo.ForkedFromOwner}}/{{.Repo.ForkedFromName}}">{{.Repo.ForkedFromOwner}}/{{.Repo.ForkedFromName}}</a>
            </span>
          </div>
        {{end}}
      </div>
    </div>

    {{if .CurrentUser}}
      <div class="repo-banner-actions">
        {{if .IsRepoOwner}}
          <a class="btn btn-ghost btn-sm" href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/forks" title="{{t .Lang "fork.forks_btn"}}">{{icon "git-branch" "size-3.5"}}<span class="hidden md-flex">{{if gt .Repo.ForkCount 0}}{{.Repo.ForkCount}} {{end}}{{t .Lang "fork.forks_btn"}}</span></a>
        {{else if .ViewerFork}}
          <a class="btn btn-ghost btn-sm" href="/{{.ViewerFork.OwnerUsername}}/{{.ViewerFork.Name}}" title="{{t .Lang "fork.your_fork_desc"}}">{{icon "git-branch" "size-3.5"}}<span class="hidden md-flex">{{t .Lang "fork.your_fork"}}</span></a>
        {{else}}
          <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/fork" style="margin:0;">
            <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
            <button class="btn btn-ghost btn-sm" type="submit" title="{{t .Lang "fork.fork_btn_desc"}}">{{icon "git-branch" "size-3.5"}}<span class="hidden md-flex">{{t .Lang "fork.fork_btn"}}</span></button>
          </form>
        {{end}}
        {{if .Repo.EnableIssues}}
          <a class="btn btn-ghost btn-sm" href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/issues/new" title="{{t .Lang "issues.new"}}">{{icon "issue" "size-3.5"}}<span class="hidden md-flex">{{t .Lang "issues.new"}}</span></a>
        {{end}}
        {{if .Repo.EnablePulls}}
          <a class="btn btn-ghost btn-sm" href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/pulls/new" title="{{t .Lang "pulls.new"}}">{{icon "git-pull-request" "size-3.5"}}<span class="hidden md-flex">{{t .Lang "pulls.new"}}</span></a>
        {{end}}
      </div>
    {{end}}
  </div>


  <div class="tabs-nav" role="tablist">
    <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}" class="tab-link {{if eq .ActiveTab "code"}}active{{end}}" role="tab">
      {{icon "code" "size-4"}}
      <span>{{t .Lang "repo.tab.code"}}</span>
    </a>
    {{if .Repo.EnableIssues}}
      <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/issues" class="tab-link {{if eq .ActiveTab "issues"}}active{{end}}" role="tab">
        {{icon "issue" "size-4"}}
        <span>{{t .Lang "repo.tab.issues"}}</span>
        {{if gt .Repo.OpenIssueCount 0}}
          <span class="badge" style="padding:0 0.35rem;font-size:0.68rem;">{{.Repo.OpenIssueCount}}</span>
        {{end}}
      </a>
    {{end}}
    {{if .Repo.EnablePulls}}
      <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/pulls" class="tab-link {{if eq .ActiveTab "pulls"}}active{{end}}" role="tab">
        {{icon "git-pull-request" "size-4"}}
        <span>{{t .Lang "repo.tab.pulls"}}</span>
        {{if gt .Repo.OpenPRCount 0}}
          <span class="badge" style="padding:0 0.35rem;font-size:0.68rem;">{{.Repo.OpenPRCount}}</span>
        {{end}}
      </a>
    {{end}}
    {{if .Repo.EnableReleases}}
      <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/releases" class="tab-link {{if eq .ActiveTab "releases"}}active{{end}}" role="tab">
        {{icon "tag" "size-4"}}
        <span>{{t .Lang "repo.tab.releases"}}</span>
        {{if gt .Repo.ReleaseCount 0}}
          <span class="badge" style="padding:0 0.35rem;font-size:0.68rem;">{{.Repo.ReleaseCount}}</span>
        {{end}}
      </a>
    {{end}}
    {{if .Repo.EnableActivity}}
      <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/activity" class="tab-link {{if eq .ActiveTab "activity"}}active{{end}}" role="tab">
        {{icon "activity" "size-4"}}
        <span>{{t .Lang "repo.tab.activity"}}</span>
      </a>
    {{end}}
    {{if .CanWrite}}
      <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/settings" class="tab-link {{if eq .ActiveTab "settings"}}active{{end}}" role="tab">
        {{icon "settings" "size-4"}}
        <span>{{t .Lang "repo.tab.settings"}}</span>
      </a>
    {{end}}
  </div>
{{end}}