{{ define "repo-avatar" }}
{{/*
  Repository avatar component - displays image or placeholder with upload overlay
  Required: .RepositoryName (string)
  Optional: .IconURL (string), .IsOwner (bool)
*/}}
<div id="repo-avatar" class="relative shrink-0">
    {{ if .IconURL }}
        <img src="{{ resizeImage .IconURL 96 }}" alt="{{ .RepositoryName }}" class="w-20 rounded-lg object-cover">
    {{ else }}
        <div class="avatar avatar-placeholder">
            <div class="bg-neutral text-neutral-content w-20 rounded-lg shadow-sm uppercase">
                <span class="text-4xl">{{ firstChar .RepositoryName }}</span>
            </div>
        </div>
    {{ end }}
    {{ if .IsOwner }}
        <label class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 hover:opacity-100 transition-opacity cursor-pointer rounded-lg" for="avatar-upload" aria-label="Upload repository icon">
            {{ icon "plus" "size-8 text-white" }}
        </label>
        <input type="hidden" id="avatar-repo" name="repo" value="{{ .RepositoryName }}">
        <input type="file" id="avatar-upload" name="avatar"
               accept="image/png,image/jpeg,image/webp"
               hx-post="/api/avatar"
               hx-include="#avatar-repo"
               hx-encoding="multipart/form-data"
               hx-swap="outerHTML"
               hx-target="#repo-avatar"
               hx-on::after-request="if(event.detail.xhr.status===401) window.location='/auth/oauth/login'"
               class="hidden">
    {{ end }}
</div>
{{ end }}