{#snippet children({ props })} Name {/snippet} {#snippet children({ props })} Industry {/snippet} {#snippet children({ props })} Website {/snippet} {#snippet children({ props })} Notes

{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
			</div>
			<div class={['grid gap-2', createStep !== 2 && 'hidden']}>
				<FormField form={createForm} name="primaryContactName">
					<Field.Field>
						<Control id="create-primary-contact-name">
							{#snippet children({ props })}
								<Field.Label>Name</Field.Label>
								<Input {...props} type="text" bind:value={$createData.primaryContactName} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="primaryContactRole">
					<Field.Field>
						<Control id="create-primary-contact-role">
							{#snippet children({ props })}
								<Field.Label>Role</Field.Label>
								<Input {...props} type="text" bind:value={$createData.primaryContactRole} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="primaryContactEmail">
					<Field.Field>
						<Control id="create-primary-contact-email">
							{#snippet children({ props })}
								<Field.Label>Email</Field.Label>
								<Input
									{...props}
									type="email"
									required
									bind:value={$createData.primaryContactEmail}
								/>
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="primaryContactPhone">
					<Field.Field>
						<Control id="create-primary-contact-phone">
							{#snippet children({ props })}
								<Field.Label>Phone</Field.Label>
								<Input {...props} type="text" bind:value={$createData.primaryContactPhone} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
			</div>
			<div class={['grid gap-2', createStep !== 1 && 'hidden']}>
				<FormField form={createForm} name="primaryAddressLine1">
					<Field.Field>
						<Control id="create-primary-address-line-1">
							{#snippet children({ props })}
								<Field.Label>Address line 1</Field.Label>
								<Input
									{...props}
									type="text"
									required
									bind:value={$createData.primaryAddressLine1}
								/>
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="primaryAddressLine2">
					<Field.Field>
						<Control id="create-primary-address-line-2">
							{#snippet children({ props })}
								<Field.Label>Address line 2</Field.Label>
								<Input {...props} type="text" bind:value={$createData.primaryAddressLine2} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<FormField form={createForm} name="primaryAddressLine3">
					<Field.Field>
						<Control id="create-primary-address-line-3">
							{#snippet children({ props })}
								<Field.Label>Address line 3</Field.Label>
								<Input {...props} type="text" bind:value={$createData.primaryAddressLine3} />
							{/snippet}
						</Control>
						<Field.Error><FieldErrors /></Field.Error>
					</Field.Field>
				</FormField>
				<div class="grid gap-2 sm:grid-cols-2">
					<FormField form={createForm} name="primaryAddressCity">
						<Field.Field>
							<Control id="create-primary-address-city">
								{#snippet children({ props })}
									<Field.Label>City</Field.Label>
									<Input
										{...props}
										type="text"
										required
										bind:value={$createData.primaryAddressCity}
									/>
								{/snippet}
							</Control>
							<Field.Error><FieldErrors /></Field.Error>
						</Field.Field>
					</FormField>
					<FormField form={createForm} name="primaryAddressRegion">
						<Field.Field>
							<Control id="create-primary-address-region">
								{#snippet children({ props })}
									<Field.Label>Region</Field.Label>
									<Input {...props} type="text" bind:value={$createData.primaryAddressRegion} />
								{/snippet}
							</Control>
							<Field.Error><FieldErrors /></Field.Error>
						</Field.Field>
					</FormField>
				</div>
				<div class="grid gap-2 sm:grid-cols-2">
					<FormField form={createForm} name="primaryAddressPostcode">
						<Field.Field>
							<Control id="create-primary-address-postcode">
								{#snippet children({ props })}
									<Field.Label>Postcode</Field.Label>
									<Input
										{...props}
										type="text"
										required
										bind:value={$createData.primaryAddressPostcode}
									/>
								{/snippet}
							</Control>
							<Field.Error><FieldErrors /></Field.Error>
						</Field.Field>
					</FormField>
					<FormField form={createForm} name="primaryAddressCountry">
						<Field.Field>
							<Control id="create-primary-address-country">
								{#snippet children({ props })}
									<Field.Label>Country</Field.Label>
									<Input {...props} type="text" bind:value={$createData.primaryAddressCountry} />
								{/snippet}
							</Control>
							<Field.Error><FieldErrors /></Field.Error>
						</Field.Field>
					</FormField>
				</div>
			</div>

<Dialog.Footer>
				<Dialog.Close
					>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
						>{/snippet}</Dialog.Close
				>
				{#if createStep > 0}
					<Button type="button" variant="outline" onclick={() => (createStep -= 1)}>Back</Button>
				{/if}
				{#if createStep < createSteps.length - 1}
					<Button type="button" onclick={() => (createStep += 1)}>Next step</Button>
				{:else}
					<Button type="submit">Create client</Button>
				{/if}
			</Dialog.Footer>
		</form>
	</Dialog.Content>
</Dialog.Root>