{{define "content"}}
{{$repoBg := imageURL .Repo.BackgroundURL}}
<div class="container">
  {{template "repo_header" .}}

  <!-- General Settings -->
  <section class="card mb-4">
    <div class="card-header">
      <span class="font-semibold flex items-center gap-2">{{icon "settings" "size-4"}} {{t .Lang "repo.tab.settings"}}</span>
    </div>
    <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/settings" enctype="multipart/form-data" class="card-body flex flex-col gap-3">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <input type="hidden" id="repo-avatar-data-input" name="avatar_data" value="">
      <input type="hidden" id="remove-repo-avatar-input" name="remove_avatar" value="false">
      <input type="hidden" id="repo-background-data-input" name="background_data" value="">
      <input type="hidden" id="remove-repo-background-input" name="remove_background" value="false">

      <div class="flex items-center gap-4 flex-wrap pb-3" style="border-bottom:1px solid hsl(var(--border));">
        <div id="repo-avatar-preview-wrap">
          {{avatar .Repo.OwnerUsername (or .Repo.AvatarURL .Repo.OwnerAvatarURL) "avatar-xl"}}
        </div>
        <div class="flex flex-col gap-1.5">
          <div class="text-sm font-medium">{{t .Lang "repo.avatar"}}</div>
          <div class="flex items-center gap-2 flex-wrap">
            <label class="btn btn-outline btn-sm" style="cursor:pointer;">
              {{icon "image" "size-3.5"}}
              <span>{{t .Lang "repo.avatar_upload"}}</span>
              <input id="repo-avatar-file-input" name="avatar_file" type="file" accept="image/png,image/jpeg,image/webp,image/gif" style="display:none;">
            </label>
            {{if .Repo.AvatarURL}}
              <button type="button" id="remove-repo-avatar-btn" class="btn btn-ghost btn-sm text-destructive">
                {{icon "trash" "size-3.5"}}
                <span>{{t .Lang "repo.avatar_remove"}}</span>
              </button>
            {{end}}
          </div>
          <div class="field-hint" style="margin:0;">{{t .Lang "repo.avatar_hint"}}</div>
        </div>
      </div>

      <div class="flex flex-col gap-2 pb-3" style="border-bottom:1px solid hsl(var(--border));">
        <div class="flex items-center justify-between gap-2 flex-wrap">
          <div>
            <div class="text-sm font-medium">{{t .Lang "repo.background"}}</div>
            <div class="field-hint" style="margin:0;">{{t .Lang "repo.background_hint"}}</div>
          </div>
          <div class="flex items-center gap-2 flex-wrap">
            <label class="btn btn-outline btn-sm" style="cursor:pointer;">
              {{icon "image" "size-3.5"}}
              <span>{{t .Lang "repo.background_upload"}}</span>
              <input id="repo-background-file-input" name="background_file" type="file" accept="image/png,image/jpeg,image/webp,image/gif" style="display:none;">
            </label>
            {{if $repoBg}}
              <button type="button" id="remove-repo-background-btn" class="btn btn-ghost btn-sm text-destructive">
                {{icon "trash" "size-3.5"}}
                <span>{{t .Lang "repo.background_remove"}}</span>
              </button>
            {{end}}
          </div>
        </div>
        <div id="repo-background-preview" class="background-preview{{if not $repoBg}} is-empty{{end}}">
          {{if $repoBg}}
            <img src="{{$repoBg}}" alt="">
          {{else}}
            <span class="background-preview-placeholder">{{icon "image" "size-5"}}</span>
          {{end}}
        </div>
      </div>

      <div>
        <label class="label" for="description">{{t .Lang "repo.description"}}</label>
        <input id="description" name="description" type="text" class="input" value="{{.Repo.Description}}" maxlength="500" placeholder="{{t .Lang "repo.description_ph"}}">
      </div>

      <div class="grid-2">
        <div>
          <label class="label" for="default_branch">{{t .Lang "repo.default_branch"}}</label>
          <select id="default_branch" name="default_branch" class="select font-mono">
            {{if .Branches}}
              {{range .Branches}}
                <option value="{{.}}" {{if eq . $.Repo.DefaultBranch}}selected{{end}}>{{.}}</option>
              {{end}}
            {{else}}
              <option value="{{.Repo.DefaultBranch}}" selected>{{.Repo.DefaultBranch}}</option>
            {{end}}
          </select>
        </div>

        <div>
          <label class="label" for="visibility">{{t .Lang "repo.visibility"}}</label>
          <select id="visibility" name="visibility" class="select">
            <option value="public" {{if not .Repo.IsPrivate}}selected{{end}}>{{t .Lang "repo.public"}}</option>
            <option value="private" {{if .Repo.IsPrivate}}selected{{end}}>{{t .Lang "repo.private"}}</option>
          </select>
        </div>
      </div>

      <!-- Feature Toggles for Repository -->
      <div class="card p-3 mt-1" style="background:hsl(var(--muted));">
        <div class="font-semibold text-xs text-muted mb-2 uppercase" style="letter-spacing:0.04em;">{{t .Lang "repo.features"}}</div>
        <div class="flex flex-col gap-2.5">
          <label class="flex items-center justify-between cursor-pointer">
            <span class="flex items-center gap-2 text-sm font-medium">
              {{icon "issue" "size-4"}}
              <span>{{t .Lang "repo.tab.issues"}}</span>
            </span>
            <input type="checkbox" name="enable_issues" value="true" class="switch" {{if .Repo.EnableIssues}}checked{{end}}>
          </label>
          <label class="flex items-center justify-between cursor-pointer">
            <span class="flex items-center gap-2 text-sm font-medium">
              {{icon "git-pull-request" "size-4"}}
              <span>{{t .Lang "repo.tab.pulls"}}</span>
            </span>
            <input type="checkbox" name="enable_pulls" value="true" class="switch" {{if .Repo.EnablePulls}}checked{{end}}>
          </label>
          <label class="flex items-center justify-between cursor-pointer">
            <span class="flex items-center gap-2 text-sm font-medium">
              {{icon "tag" "size-4"}}
              <span>{{t .Lang "repo.tab.releases"}}</span>
            </span>
            <input type="checkbox" name="enable_releases" value="true" class="switch" {{if .Repo.EnableReleases}}checked{{end}}>
          </label>
          <label class="flex items-center justify-between cursor-pointer">
            <span class="flex items-center gap-2 text-sm font-medium">
              {{icon "activity" "size-4"}}
              <span>{{t .Lang "repo.tab.activity"}}</span>
            </span>
            <input type="checkbox" name="enable_activity" value="true" class="switch" {{if .Repo.EnableActivity}}checked{{end}}>
          </label>
        </div>
      </div>

      <div class="flex items-center justify-end">
        <button type="submit" class="btn btn-primary btn-sm">{{t .Lang "repo.save"}}</button>
      </div>
    </form>
  </section>

  <!-- Collaborators -->
  <section class="card mb-4" id="collaborators">
    <div class="card-header">
      <span class="font-semibold flex items-center gap-2">{{icon "users" "size-4"}} {{t .Lang "collab.title"}}</span>
      <span class="text-xs text-muted">{{t .Lang "collab.desc"}}</span>
    </div>

    <div class="dense-list" style="border-bottom:1px solid hsl(var(--border));">
      <div class="dense-row" style="min-height:2.6rem;padding:0.45rem 0.85rem;">
        <div class="flex items-center gap-2.5 min-w-0">
          {{avatar .Repo.OwnerUsername .Repo.OwnerAvatarURL}}
          <div class="min-w-0">
            <a href="/{{.Repo.OwnerUsername}}" class="font-semibold text-sm">{{.Repo.OwnerUsername}}</a>
          </div>
        </div>
        <span class="badge badge-outline">{{t .Lang "collab.owner"}}</span>
      </div>
      {{range .Collaborators}}
        <div class="dense-row" style="min-height:2.6rem;padding:0.45rem 0.85rem;">
          <div class="flex items-center gap-2.5 min-w-0">
            {{avatar .Username .AvatarURL}}
            <div class="min-w-0">
              <a href="/{{.Username}}" class="font-semibold text-sm">{{.Username}}</a>
              {{if .FullName}}<div class="text-xs text-muted truncate">{{.FullName}}</div>{{end}}
            </div>
          </div>
          <div class="flex items-center gap-2">
            <span class="badge badge-outline font-mono">{{if eq .Role "read"}}{{t $.Lang "collab.role_read"}}{{else}}{{t $.Lang "collab.role_write"}}{{end}}</span>
            {{if $.CanManageCollab}}
              <form method="post" action="/{{$.Repo.OwnerUsername}}/{{$.Repo.Name}}/settings/collaborators/remove" style="margin:0;">
                <input type="hidden" name="_csrf" value="{{$.CSRFToken}}">
                <input type="hidden" name="user_id" value="{{.UserID}}">
                <button type="submit" class="btn btn-ghost btn-icon" style="width:1.75rem;height:1.75rem;" title="{{t $.Lang "collab.remove"}}">
                  {{icon "close" "size-3.5"}}
                </button>
              </form>
            {{end}}
          </div>
        </div>
      {{else}}
        <div class="card-body text-xs text-muted">{{t .Lang "collab.empty"}}</div>
      {{end}}
    </div>

    {{if .CanManageCollab}}
      <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/settings/collaborators/add" class="card-body flex items-end gap-2 flex-wrap">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
        <div style="flex:1 1 12rem;">
          <label class="label" for="collab_username">{{t .Lang "collab.username"}}</label>
          <input id="collab_username" name="username" type="text" class="input font-mono" placeholder="{{t .Lang "collab.username_ph"}}" required>
        </div>
        <div>
          <label class="label" for="collab_role">{{t .Lang "collab.role"}}</label>
          <select id="collab_role" name="role" class="select">
            <option value="write">{{t .Lang "collab.role_write"}}</option>
            <option value="read">{{t .Lang "collab.role_read"}}</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary btn-sm">
          {{icon "plus" "size-3.5"}}
          <span>{{t .Lang "collab.add"}}</span>
        </button>
      </form>
    {{end}}
  </section>

  <!-- Rename Repository -->  <section class="card mb-4">
    <div class="card-header">
      <span class="font-semibold flex items-center gap-2">{{icon "edit" "size-4"}} {{t .Lang "repo.rename"}}</span>
    </div>
    <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/settings/rename" class="card-body flex items-center gap-2">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <input name="new_name" type="text" class="input font-mono" value="{{.Repo.Name}}" required pattern="^[a-zA-Z0-9][a-zA-Z0-9._-]{0,63}$">
      <button type="submit" class="btn btn-outline">{{t .Lang "repo.rename"}}</button>
    </form>
  </section>

  <!-- Danger Zone -->
  <section class="card" style="border-color:hsl(var(--destructive) / 0.45);">
    <div class="card-header" style="border-bottom-color:hsl(var(--destructive) / 0.2);">
      <span class="font-semibold text-destructive flex items-center gap-2">{{icon "alert-circle" "size-4"}} {{t .Lang "repo.danger_zone"}}</span>
    </div>
    <div class="card-body flex items-center justify-between flex-wrap gap-3">
      <div>
        <div class="font-medium text-sm">{{t .Lang "repo.delete"}}</div>
        <div class="text-xs text-muted">{{t .Lang "repo.delete_desc"}}</div>
      </div>
      <button type="button" class="btn btn-destructive btn-sm" data-dialog-open="delete-repo-dialog">
        {{icon "trash" "size-3.5"}}
        <span>{{t .Lang "repo.delete"}}</span>
      </button>
    </div>
  </section>
</div>

<!-- Delete Confirmation Modal -->
<div id="delete-repo-dialog" class="backdrop" role="dialog" aria-modal="true" aria-label="{{t .Lang "repo.delete"}}" aria-hidden="true">
  <div class="dialog-box">
    <div class="card-header">
      <span class="font-semibold text-destructive flex items-center gap-2">{{icon "trash" "size-4"}} {{t .Lang "repo.delete"}}</span>
      <button type="button" class="btn btn-ghost btn-icon" data-dialog-close aria-label="{{t .Lang "common.close"}}">{{icon "close" "size-4"}}</button>
    </div>
    <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/settings/delete">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
      <div class="card-body flex flex-col gap-3">
        <p class="text-sm text-muted" style="margin:0;">
          {{t .Lang "repo.delete_confirm"}}: <strong class="font-mono" style="color:hsl(var(--foreground));">{{.Repo.Name}}</strong>
        </p>
        <input
          type="text"
          name="confirm_name"
          class="input font-mono"
          placeholder="{{.Repo.Name}}"
          autocomplete="off"
          required
          data-confirm-input="{{.Repo.Name}}"
          data-confirm-button="confirm-delete-btn">
      </div>
      <div class="card-footer flex items-center justify-end gap-2">
        <button type="button" class="btn btn-outline btn-sm" data-dialog-close>{{t .Lang "common.cancel"}}</button>
        <button id="confirm-delete-btn" type="submit" class="btn btn-destructive btn-sm" disabled>
          {{icon "trash" "size-3.5"}}
          <span>{{t .Lang "repo.delete"}}</span>
        </button>
      </div>
    </form>
  </div>
</div>
{{end}}