{#snippet hint()} {name.length}/{NAME_MAX_LENGTH} {/snippet}

</Field>
		</div>
	</div>

<div class="flex items-center justify-between gap-4 rounded-art bg-surface px-4 py-3.5">
		<div class="min-w-0">
			<div class="text-sm font-medium text-fg-2">Visibilidad</div>
			<div class="mt-0.5 text-xs text-muted">
				{visibility === 'private'
					? 'Solo tú la ves en tu biblioteca'
					: 'Cualquiera con el enlace puede verla'}
			</div>
		</div>
		<div class="relative flex shrink-0 rounded-full bg-surface-2 p-1">
			<div
				class="absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full bg-fg transition-transform duration-300 ease-out {visibility ===
				'public'
					? 'translate-x-full'
					: ''}"
			></div>
			<button
				type="button"
				onclick={() => (visibility = 'private')}
				class="relative z-10 w-20 rounded-full py-1.5 text-center text-xs font-medium transition-colors {visibility ===
				'private'
					? 'text-ink'
					: 'text-muted hover:text-fg-2'}"
			>
				Privada
			</button>
			<button
				type="button"
				onclick={() => (visibility = 'public')}
				class="relative z-10 w-20 rounded-full py-1.5 text-center text-xs font-medium transition-colors {visibility ===
				'public'
					? 'text-ink'
					: 'text-muted hover:text-fg-2'}"
			>
				Pública
			</button>
		</div>
	</div>

{#if formMessage}
		<Alert tone="danger">{formMessage}</Alert>
	{/if}

<div class="flex items-center justify-between gap-4">
		{#if helperText}
			<p class="text-sm text-muted">{helperText}</p>
		{:else}
			<span></span>
		{/if}
		<div class="flex shrink-0 items-center gap-3">
			<Button type="button" variant="secondary" onclick={onCancel}>Cancelar</Button>
			<Button type="submit" disabled={submitting || name.trim() === ''}>
				{submitting ? submittingLabel : submitLabel}
			</Button>
		</div>
	</div>
</form>