{{define "content"}}
<div class="container">
  <!-- Profile -->
  <section class="profile-hero mb-4">
    <div class="profile-hero-content flex items-start flex-wrap">
      {{avatar .ProfileUser.Username .ProfileUser.AvatarURL "avatar-xxl"}}
      <div class="flex-1 min-w-0" style="margin-left:1.6rem;min-width:15rem;">
        <div class="flex items-center gap-2 flex-wrap">
          <h1 class="text-2xl font-bold" style="margin:0;line-height:1.15;">
            {{if .ProfileUser.FullName}}{{.ProfileUser.FullName}}{{else}}{{.ProfileUser.Username}}{{end}}
          </h1>
          {{if .ProfileUser.IsAdmin}}
            <span class="badge badge-primary">{{t .Lang "admin.role.admin"}}</span>
          {{end}}
        </div>
        <div class="text-sm text-muted font-mono" style="margin-top:0.3rem;">@{{.ProfileUser.Username}}</div>

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

        <div class="flex items-center flex-wrap gap-2" style="margin-top:0.9rem;">
          {{if .ProfileUser.Location}}
            <span class="profile-chip">{{icon "map-pin" "size-3.5"}}<span>{{.ProfileUser.Location}}</span></span>
          {{end}}
          {{if .ProfileUser.Website}}
            <span class="profile-chip">{{icon "link" "size-3.5"}}<a href="{{.ProfileUser.Website}}" target="_blank" rel="noopener noreferrer">{{.ProfileUser.Website}}</a></span>
          {{end}}
          <span class="profile-chip">{{icon "calendar" "size-3.5"}}<span>{{t .Lang "profile.joined"}} · {{formatShortDate .ProfileUser.CreatedAt}}</span></span>
        </div>
      </div>

      <div class="flex items-center gap-2" style="margin-left:auto;">
        {{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>
  </section>

  {{if .ProfileReadmeHTML}}
    <!-- Profile README from the <user>/<user> repository -->
    <section class="card mb-4">
      <div class="card-body markdown-body">
        {{.ProfileReadmeHTML}}
      </div>
    </section>
  {{end}}

  <!-- Repositories -->
  <div class="flex items-center justify-between flex-wrap gap-2 mb-3">
    <h2 class="text-base font-semibold" style="margin:0;">
      {{t .Lang "nav.repositories"}}
      <span class="badge badge-outline font-mono" style="margin-left:0.35rem;">{{len .Repos}}</span>
    </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}}
        <a href="/{{.OwnerUsername}}/{{.Name}}" class="card p-3 flex flex-col gap-2 repo-card" data-tree-row data-tree-name="{{.Name}} {{.Description}}" style="text-decoration:none;color:inherit;">
          <div class="flex items-center justify-between gap-2">
            <span class="font-semibold text-sm flex items-center gap-2 min-w-0">
              {{if .IsPrivate}}
                {{icon "lock" "size-3.5"}}
              {{else}}
                {{icon "book-open" "size-3.5"}}
              {{end}}
              <span class="truncate">{{.Name}}</span>
            </span>
            <span class="badge badge-outline flex-shrink-0">{{if .IsPrivate}}{{t $.Lang "repo.private"}}{{else}}{{t $.Lang "repo.public"}}{{end}}</span>
          </div>
          {{if .Description}}
            <p class="text-xs text-muted" style="margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">{{.Description}}</p>
          {{end}}
          <div class="flex items-center justify-between text-xs text-muted font-mono">
            <span class="flex items-center gap-1.5">
              {{icon "git-branch" "size-3.5"}}
              <span>{{.DefaultBranch}}</span>
            </span>
            <span>{{timeAgo .UpdatedAt $.Lang}}</span>
          </div>
        </a>
      {{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}}