{{define "content"}}
<div class="container">
  {{template "repo_header" .}}

  <div class="flex items-center justify-between flex-wrap gap-2 mb-3">
    <div class="flex items-center gap-2 flex-wrap">
      <div class="dropdown" data-dropdown>
        <button type="button" class="btn btn-outline btn-sm font-mono" data-dropdown-trigger aria-haspopup="true" aria-expanded="false">
          {{icon "git-branch" "size-3.5"}}
          <span>{{.Ref}}</span>
          {{icon "chevron-down" "size-3.5"}}
        </button>
        <div class="dropdown-menu" data-dropdown-menu role="menu" style="min-width:13rem;">
          <div class="palette-group-title">{{t .Lang "repo.branches"}}</div>
          {{range .Branches}}
            <a href="/{{$.Repo.OwnerUsername}}/{{$.Repo.Name}}/blob/{{.}}/{{$.SubPath}}" class="dropdown-item font-mono {{if eq . $.Ref}}active{{end}}" role="menuitem">
              <span class="flex items-center gap-2">{{icon "git-branch" "size-3.5"}} {{.}}</span>
              {{if eq . $.Ref}}{{icon "check" "size-3.5"}}{{end}}
            </a>
          {{end}}
          {{if .Tags}}
            <hr class="separator" style="margin:0.25rem 0;">
            <div class="palette-group-title">{{t .Lang "repo.tags"}}</div>
            {{range .Tags}}
              <a href="/{{$.Repo.OwnerUsername}}/{{$.Repo.Name}}/blob/{{.}}/{{$.SubPath}}" class="dropdown-item font-mono {{if eq . $.Ref}}active{{end}}" role="menuitem">
                <span class="flex items-center gap-2">{{icon "tag" "size-3.5"}} {{.}}</span>
                {{if eq . $.Ref}}{{icon "check" "size-3.5"}}{{end}}
              </a>
            {{end}}
          {{end}}
        </div>
      </div>

      <nav class="breadcrumb font-mono text-xs" aria-label="File breadcrumb">
        <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/tree/{{.Ref}}" class="text-muted">{{.Repo.Name}}</a>
        {{range .Breadcrumbs}}
          <span class="breadcrumb-sep">/</span>
          {{if .IsLast}}
            <span class="font-semibold">{{.Name}}</span>
          {{else}}
            <a href="/{{$.Repo.OwnerUsername}}/{{$.Repo.Name}}/tree/{{$.Ref}}/{{.Path}}" class="text-muted">{{.Name}}</a>
          {{end}}
        {{end}}
      </nav>
    </div>

    <div class="flex items-center gap-1.5">
      <button type="button" class="btn btn-outline btn-sm" data-open-palette="file:">
        {{icon "search" "size-3.5"}}
        <kbd class="kbd">t</kbd>
      </button>
    </div>
  </div>

  <div class="card">
    <div class="card-header" style="padding:0.5rem 0.8rem;">
      <div class="flex items-center gap-2 text-xs text-muted font-mono">
        {{icon "file-code" "size-4"}}
        <span class="font-semibold" style="color:hsl(var(--foreground));">{{.Blob.Name}}</span>
        <span>·</span>
        {{if not .Blob.IsBinary}}
          <span>{{.Blob.LineCount}} {{pluralT .Lang .Blob.LineCount "repo.lines"}}</span>
          <span>·</span>
        {{end}}
        <span>{{formatSize .Blob.Size}}</span>
      </div>

      <div class="flex items-center gap-1.5">
        {{if not .Blob.IsBinary}}
          <button type="button" class="btn btn-outline btn-sm" data-copy="{{.RawText}}" aria-label="{{t .Lang "common.copy"}}">
            {{icon "copy" "size-3.5"}}
            <span>{{t .Lang "common.copy"}}</span>
          </button>
        {{end}}
        <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/raw/{{.Ref}}/{{.SubPath}}" class="btn btn-outline btn-sm">
          {{icon "download" "size-3.5"}}
          <span>{{t .Lang "repo.raw"}}</span>
        </a>
      </div>
    </div>

    {{if .Blob.IsBinary}}
      <div class="card-body text-center py-2 text-sm text-muted">
        <p>{{t .Lang "repo.binary_notice"}} ({{formatSize .Blob.Size}})</p>
        <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/raw/{{.Ref}}/{{.SubPath}}" class="btn btn-secondary btn-sm">
          {{icon "download" "size-3.5"}}
          <span>{{t .Lang "repo.download_raw"}}</span>
        </a>
      </div>
    {{else}}
      <div style="overflow-x:auto;">
        <table class="code-table chroma">
          <tbody>
            {{range .HighlightedLines}}
              <tr id="L{{.Num}}">
                <td class="code-ln"><a href="#L{{.Num}}">{{.Num}}</a></td>
                <td class="code-line">{{.HTML}}</td>
              </tr>
            {{end}}
          </tbody>
        </table>
      </div>
    {{end}}
  </div>
</div>
{{end}}