{{define "content"}}
<div class="container">
  <!-- Profile Card -->
  <div class="card p-4 mb-4">
    <div class="flex items-start justify-between flex-wrap gap-4">
      <div class="flex items-start gap-4 min-w-0">
        {{avatar .ProfileUser.Username .ProfileUser.AvatarURL "avatar-xl"}}
        <div class="flex flex-col gap-1 min-w-0">
          <div class="flex items-center gap-2 flex-wrap">
            {{if .ProfileUser.FullName}}
              <h1 class="text-xl font-bold" style="margin:0;line-height:1.2;">{{.ProfileUser.FullName}}</h1>
              <span class="font-mono text-sm text-muted">@{{.ProfileUser.Username}}</span>
            {{else}}
              <h1 class="text-xl font-bold" style="margin:0;line-height:1.2;">{{.ProfileUser.Username}}</h1>
            {{end}}
            {{if .ProfileUser.IsAdmin}}
              <span class="badge badge-primary">{{t .Lang "admin.role.admin"}}</span>
            {{end}}
          </div>

          {{if .ProfileUser.Bio}}
            <p class="text-sm" style="margin:0.15rem 0 0.25rem;max-width:38rem;">{{.ProfileUser.Bio}}</p>
          {{end}}

          <div class="flex items-center flex-wrap gap-3 text-xs text-muted mt-1">
            {{if .ProfileUser.Location}}
              <span class="flex items-center gap-1">
                {{icon "map-pin" "size-3.5"}}
                <span>{{.ProfileUser.Location}}</span>
              </span>
            {{end}}
            {{if .ProfileUser.Website}}
              <a href="{{.ProfileUser.Website}}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-1" style="color:hsl(var(--foreground));text-decoration:underline;text-underline-offset:3px;">
                {{icon "link" "size-3.5"}}
                <span>{{.ProfileUser.Website}}</span>
              </a>
            {{end}}
            <span class="flex items-center gap-1">
              {{icon "calendar" "size-3.5"}}
              <span>{{t .Lang "profile.joined"}}: {{formatShortDate .ProfileUser.CreatedAt}}</span>
            </span>
          </div>
        </div>
      </div>

      <div class="flex items-center gap-2">
        {{if .CurrentUser}}
          {{if eq .CurrentUser.ID .ProfileUser.ID}}
            <a href="/settings" class="btn btn-outline btn-sm">
              {{icon "edit" "size-3.5"}}
              <span>{{t .Lang "profile.edit"}}</span>
            </a>
          {{end}}
        {{end}}
      </div>
    </div>

    <!-- Stats Row -->
    <div class="flex items-center gap-4 flex-wrap mt-4 pt-3" style="border-top:1px solid hsl(var(--border));">
      <div class="flex items-center gap-1.5 text-xs">
        {{icon "git-branch" "size-3.5"}}
        <span class="text-muted">{{t .Lang "profile.total_repos"}}:</span>
        <strong class="font-mono">{{len .Repos}}</strong>
      </div>
      <div class="flex items-center gap-1.5 text-xs">
        {{icon "globe" "size-3.5"}}
        <span class="text-muted">{{t .Lang "profile.public_repos"}}:</span>
        <strong class="font-mono">{{.PublicRepoCount}}</strong>
      </div>
      {{if .ShowPrivateCount}}
        <div class="flex items-center gap-1.5 text-xs">
          {{icon "lock" "size-3.5"}}
          <span class="text-muted">{{t .Lang "profile.private_repos"}}:</span>
          <strong class="font-mono">{{.PrivateRepoCount}}</strong>
        </div>
      {{end}}
    </div>
  </div>

  <!-- Repositories Section -->
  <div class="flex items-center justify-between flex-wrap gap-3 mb-3">
    <h2 class="text-base font-semibold" style="margin:0;">{{t .Lang "nav.repositories"}} ({{len .Repos}})</h2>
    <div class="flex items-center gap-2">
      <div class="flex items-center" style="position:relative;">
        <input type="text" class="input" style="height:1.85rem;width:14rem;padding-right:1.8rem;" placeholder="{{t .Lang "repo.filter_ph"}}" data-search-input data-file-filter>
        <kbd class="kbd" style="position:absolute;right:0.4rem;pointer-events:none;">/</kbd>
      </div>
      {{if .CurrentUser}}
        {{if eq .CurrentUser.ID .ProfileUser.ID}}
          <a href="/new" class="btn btn-primary btn-sm" style="height:1.85rem;">
            {{icon "plus" "size-3.5"}}
            <span>{{t .Lang "nav.new_repo"}}</span>
          </a>
        {{end}}
      {{end}}
    </div>
  </div>

  {{if .Repos}}
    <div class="grid-2">
      {{range .Repos}}
        <div class="card p-3 flex flex-col justify-between gap-2" data-tree-row data-tree-name="{{.Name}} {{.Description}}">
          <div>
            <div class="flex items-center justify-between gap-2 mb-1">
              <a href="/{{.OwnerUsername}}/{{.Name}}" class="font-semibold text-sm flex items-center gap-1.5 truncate">
                {{if .IsPrivate}}
                  {{icon "lock" "size-3.5"}}
                {{else}}
                  {{icon "git-branch" "size-3.5"}}
                {{end}}
                <span class="truncate">{{.Name}}</span>
              </a>
              {{if .IsPrivate}}
                <span class="badge badge-outline">{{t $.Lang "repo.private"}}</span>
              {{else}}
                <span class="badge badge-outline">{{t $.Lang "repo.public"}}</span>
              {{end}}
            </div>
            {{if .Description}}
              <p class="text-xs text-muted" style="margin:0.2rem 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">{{.Description}}</p>
            {{end}}
          </div>
          <div class="flex items-center justify-between text-xs text-muted pt-2" style="border-top:1px solid hsl(var(--border)/0.6);">
            <span class="font-mono flex items-center gap-1">{{icon "git-branch" "size-3.5"}} {{.DefaultBranch}}</span>
            <span>{{timeAgo .UpdatedAt $.Lang}}</span>
          </div>
        </div>
      {{end}}
    </div>
  {{else}}
    {{if and .CurrentUser (eq .CurrentUser.ID .ProfileUser.ID)}}
      {{template "ui_empty_state" (dict "Icon" "git-branch" "Title" (t .Lang "repo.empty_list") "Subtitle" (t .Lang "repo.empty_list_sub") "ActionHref" "/new" "ActionLabel" (t .Lang "repo.new.title") "ActionIcon" "plus")}}
    {{else}}
      {{template "ui_empty_state" (dict "Icon" "git-branch" "Title" (t .Lang "repo.empty_list"))}}
    {{end}}
  {{end}}
</div>
{{end}}