{label}
{/if}
{
const file = (e.currentTarget as HTMLInputElement).files?.[0] ?? null;
if (file) setCover(file);
}}
/>
{#if showAvatar}
{
const file = (e.currentTarget as HTMLInputElement).files?.[0] ?? null;
if (file) setAvatar(file);
}}
/>
{/if}
{
e.preventDefault();
if (!disabled) coverDragging = true;
}}
ondragover={(e) => e.preventDefault()}
ondragleave={(e) => {
if (dragStillInside(e)) return;
coverDragging = false;
}}
ondrop={handleCoverDrop}
onkeydown={(e) => {
if (disabled) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
coverInput?.click();
}
}}
onclick={() => !disabled && coverInput?.click()}
class={[
'group min-h-36 relative aspect-3/1 w-full overflow-hidden transition-colors outline-none',
showAvatar ? 'rounded-t-xl' : 'rounded-xl',
'focus-visible:ring-brand-500/40 focus-visible:ring-2 focus-visible:ring-inset',
coverDragging ? 'bg-brand-500/10' : 'bg-surface-overlay',
disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'
]}
>
{#if hasCoverMedia}
{#if !disabled && onedit}
{:else if !disabled}
{/if}
{#if coverDragging}
{/if}
{#if showAvatar}
{#if onframe}
{/if}
{editLabel}
{/if}
{:else}
{coverDragging ? dropTitle : emptyTitle}
{coverHelperText}
{
e.preventDefault();
e.stopPropagation();
if (!disabled) avatarDragging = true;
}}
ondragover={(e) => {
e.preventDefault();
e.stopPropagation();
}}
ondragleave={(e) => {
e.stopPropagation();
if (dragStillInside(e)) return;
avatarDragging = false;
}}
ondrop={(e) => {
e.stopPropagation();
handleAvatarDrop(e);
}}
onkeydown={(e) => {
if (disabled) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
avatarInput?.click();
}
}}
onclick={(e) => {
e.stopPropagation();
if (!disabled) avatarInput?.click();
}}
class={[
'group h-20 w-20 border-surface-elevated bg-surface-overlay shadow-md sm:h-24 sm:w-24 relative z-10 shrink-0 overflow-hidden rounded-full border-4 transition outline-none',
'focus-visible:ring-brand-500/40 focus-visible:ring-offset-surface-elevated focus-visible:ring-2 focus-visible:ring-offset-2',
avatarDragging ? 'ring-brand-500 ring-2' : '',
disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'
]}
>
{#if hasAvatarMedia}
{#if !disabled}
{/if}
{:else}
{avatarEmptyLabel}
{/if}
{#if details}
{#if actions && !details}
{@render details()}
{/if}
{#if actions && details}
{@render actions()}
{/if}
{#if hasLocalMedia}
{#if cover && !disabled}
{/if}
{#if avatar && !disabled}
{/if}
{:else if !details}
{avatarHelperText}
{/if}
{@render actions()}
{/if}
{errorMessage}
{/if}