{ if (disabled) return; if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openPicker(); } }} onclick={openPicker} class={[ 'group h-24 w-24 relative shrink-0 overflow-hidden rounded-full border-2 border-dashed transition-colors outline-none', 'focus-visible:ring-brand-500/30 focus-visible:border-brand-500 focus-visible:ring-2', isDragging ? 'border-brand-500 bg-brand-500/10' : hasFile || externalSrc ? 'border-transparent' : 'border-border bg-surface-elevated hover:border-border-strong', disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer' ]} > {#if primaryFile?.previewUrl || externalSrc} {#if !disabled}

{/if} {:else}

{i18n.t('upload')}

{/if}

{#if primaryFile}

{primaryFile.name}

{primaryFile.sizeFormatted}

{i18n.t('change')} primaryFile && removeFile(primaryFile.id)} {disabled} class="rounded-lg px-2.5 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40 inline-flex items-center transition-colors disabled:opacity-50" > {i18n.t('remove')}

{:else}

{i18n.t('addProfilePhoto')}

{#if resolvedHelperText}

{resolvedHelperText}

{/if} {/if}

{#if singlePreviewUrl && singleIsVideo} {:else if singlePreviewUrl && singleIsAudio}

{@render fileBadge('audio', 'h-14 w-14 rounded-xl text-xs')}

{:else if singlePreviewUrl} {:else}

{@render fileBadge(primaryFile?.kind ?? 'other', 'h-14 w-14 rounded-xl text-xs')}

{/if} {#if !disabled}

{i18n.t('edit')}

{/if}

{singlePreviewName}

{#if singlePreviewMeta}

{singlePreviewMeta}

{/if}

{#if resolvedHelperText}

{resolvedHelperText}

{/if}

{errorMessage}

{#each fileList as item (item.id)}
• {#if item.previewUrl} {:else}

  {@render fileBadge(item.kind, 'h-12 w-12 rounded-xl')}

  {/if} {#if !disabled} removeFile(item.id)} class="right-2 top-2 h-7 w-7 rounded-lg bg-white/95 text-secondary shadow-sm backdrop-blur hover:text-red-600 dark:bg-slate-900/95 dark:hover:text-red-400 absolute inline-flex items-center justify-center opacity-0 transition group-hover:opacity-100 focus-visible:opacity-100" aria-label={i18n.t('removeNamed', { name: item.name })} > {/if}

  {item.name}

  {item.sizeFormatted}

{/each}

{#each fileList as item (item.id)}
• {#if item.previewUrl} {:else} {@render fileBadge(item.kind, 'h-12 w-12 shrink-0 rounded-lg')} {/if}

  {item.name}

  {item.sizeFormatted} · {kindLabel(item.kind)}

  removeFile(item.id)} {disabled} class="rounded-lg p-2 text-secondary hover:bg-red-50 hover:text-red-600 focus-visible:ring-brand-500/30 dark:hover:bg-red-950/40 dark:hover:text-red-400 shrink-0 transition focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50" aria-label={i18n.t('removeNamed', { name: item.name })} >
{/each}