<Drawer.Root bind:open>
	<Drawer.Trigger asChild let:builder>
		<Button builders={[builder]}>Add To Library</Button>
	</Drawer.Trigger>
	<Drawer.Portal>
		<Drawer.Content>
			<form
				action="?/purchase&trackId={trackId}"
				enctype="multipart/form-data"
				method="POST"
				use:enhance
			>
				<div class="mx-auto flex w-2/3 flex-col items-center space-y-2">
					<Drawer.Header>
						<Drawer.Title class="text-2xl">Confirm Addition</Drawer.Title>
					</Drawer.Header>
					<p class="text-secondary-foreground">
						Confirm addition of <span class="font-bold">{trackTitle}</span> by
						<span class="font-bold">{artistName} </span>to your
						<span class="font-bold">{licenseType}</span> collection. This grants
						immediate access to all related assets for download. By proceeding, you
						agree to the legal obligations and payment terms as per your library's
						agreement with That Pitch.
					</p>

					<Drawer.Footer class="w-2/3">
						<Form.Button disabled={$delayed}>
							<Reload
								class={cn('mr-2 h-4 w-4 animate-spin', { hidden: !$delayed })}
							/>
							Confirm
						</Form.Button>
						<Drawer.Close asChild let:builder>
							<Button
								builders={[builder]}
								variant="outline"
								disabled={$delayed}
							>
								Cancel
							</Button>
						</Drawer.Close>
					</Drawer.Footer>
				</div>
			</form>
		</Drawer.Content>
	</Drawer.Portal>
</Drawer.Root>