{label}
{/if}
{
const file = (e.currentTarget as HTMLInputElement).files?.[0] ?? null;
if (file) setCover(file);
}}
/>
{
const file = (e.currentTarget as HTMLInputElement).files?.[0] ?? null;
if (file) setAvatar(file);
}}
/>
{
e.preventDefault();
if (!disabled) coverDragging = true;
}}
ondragover={(e) => e.preventDefault()}
ondragleave={() => (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 relative aspect-3/1 min-h-36 w-full overflow-hidden rounded-t-xl outline-none transition-colors',
'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500/40',
coverDragging ? 'bg-brand-500/10' : 'bg-surface-overlay',
disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'
]}
>
{#if hasCoverMedia}
{#if !disabled}
{/if}
{#if coverDragging}
{/if}
Edit cover
{/if}
{:else}
{coverDragging ? 'Drop cover photo' : 'Add cover photo'}
{coverHelperText}
{
e.preventDefault();
e.stopPropagation();
if (!disabled) avatarDragging = true;
}}
ondragover={(e) => {
e.preventDefault();
e.stopPropagation();
}}
ondragleave={(e) => {
e.stopPropagation();
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 relative z-10 h-20 w-20 shrink-0 overflow-hidden rounded-full border-4 border-surface-elevated bg-surface-overlay shadow-md outline-none transition sm:h-24 sm:w-24',
'focus-visible:ring-2 focus-visible:ring-brand-500/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-elevated',
avatarDragging ? 'ring-2 ring-brand-500' : '',
disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'
]}
>
{#if hasAvatarMedia}
{#if !disabled}
{/if}
{:else}
Photo
{/if}
{#if hasLocalMedia}
{#if cover && !disabled}
{/if}
{#if avatar && !disabled}
{/if}
{:else}
{avatarHelperText}
{/if}{errorMessage}
{/if}