Drop images here, or click to browse
Any number of images, any size
{#if images.length > 0}
{images.length} image{images.length === 1 ? '' : 's'}
{totalCopies} label{totalCopies === 1 ? '' : 's'} total
{#each images as image, index (image.id)}
{image.name}
setCopies(image, image.copies - 1)} disabled={image.copies <= 1} aria-label="Fewer copies of {image.name}" class="flex h-6 w-6 items-center justify-center rounded border border-slate-300 text-slate-600 hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40 dark:border-zinc-600 dark:text-slate-300 dark:hover:bg-zinc-800" > −
setCopies(image, event.currentTarget.valueAsNumber)} class="w-12 rounded border border-slate-300 px-1 py-0.5 text-center text-sm dark:border-zinc-600 dark:bg-zinc-800 dark:text-slate-100" />
setCopies(image, image.copies + 1)} aria-label="More copies of {image.name}" class="flex h-6 w-6 items-center justify-center rounded border border-slate-300 text-slate-600 hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:outline-none dark:border-zinc-600 dark:text-slate-300 dark:hover:bg-zinc-800" > +
onUpdate(image.id, { rotation: nextRotation(image.rotation) })} aria-label="Rotate {image.name}, currently {image.rotation} degrees" class="rounded border border-slate-300 px-2 py-0.5 text-xs text-slate-600 hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:outline-none dark:border-zinc-600 dark:text-slate-300 dark:hover:bg-zinc-800" > ⟳ {image.rotation}°
onMove(image.id, -1)} disabled={index === 0} aria-label="Move {image.name} earlier" class="flex h-7 w-7 items-center justify-center rounded border border-slate-300 text-slate-600 hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40 dark:border-zinc-600 dark:text-slate-300 dark:hover:bg-zinc-800" > ‹
onMove(image.id, 1)} disabled={index === images.length - 1} aria-label="Move {image.name} later" class="flex h-7 w-7 items-center justify-center rounded border border-slate-300 text-slate-600 hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40 dark:border-zinc-600 dark:text-slate-300 dark:hover:bg-zinc-800" > ›
onRemove(image.id)} aria-label="Remove {image.name}" class="flex h-7 w-7 items-center justify-center rounded border border-slate-300 text-slate-600 hover:border-red-400 hover:text-red-600 focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:outline-none dark:border-zinc-600 dark:text-slate-300 dark:hover:text-red-400" > ✕
{/each}
{/if}