{#if success}

{successTitle}

{successMessage} {#if lastSent} {lastSent} invite{lastSent === 1 ? '' : 's'} sent as {roleMeta?.label ?? role}. {/if}

{:else}

Team

Invite

{title}

{#if subtitle}

{subtitle}

{/if}

Email addresses {#if validCount} {validCount} ready {/if}

Press Enter or comma to add. You can paste several emails at once.

{#if emailsError}

{emailsError}

{/if}

</div>
				{/if}

{#if inviteLink}
					<div
						class="flex flex-col gap-2 rounded-xl border border-dashed border-border bg-surface/50 p-3 sm:flex-row sm:items-center"
					>
						<div class="flex min-w-0 flex-1 items-start gap-2">
							<span class="mt-0.5 text-muted">
								<Link2 class="h-4 w-4" strokeWidth={2} />
							</span>
							<div class="min-w-0">
								<p class="text-xs font-medium text-primary">Or share an invite link</p>
								<p class="truncate font-mono text-[11px] text-muted">{inviteLink}</p>
							</div>
						</div>
						<CopyButton value={inviteLink} label="Copy link" size="sm" variant="secondary" />
					</div>
				{/if}

{#if members.length}
					<div
						class="flex items-center justify-between gap-3 rounded-xl border border-border bg-surface-overlay/40 px-3 py-2.5"
					>
						<div class="min-w-0">
							<p class="text-xs font-medium text-primary">Already on the workspace</p>
							<p class="text-[11px] text-muted">{members.length}+ teammates</p>
						</div>
						<AvatarGroup items={members} max={4} size="sm" />
					</div>
				{/if}
			</div>

<div class="flex flex-col-reverse gap-2 pt-1 sm:flex-row sm:items-center sm:justify-between">
				<p class="flex items-center gap-1.5 text-[11px] text-muted">
					<Mail class="h-3.5 w-3.5" strokeWidth={2} />
					Invites expire in 7 days
				</p>
				<Button type="submit" variant="primary" loading={isBusy} disabled={isBusy}>
					{validCount > 1 ? `Send ${validCount} invites` : 'Send invites'}
				</Button>
			</div>
		</form>
	{/if}
</div>