{$_('toolbar.waypoint.name')} {$_('toolbar.waypoint.description')}

<Label for="comment">{$_('toolbar.waypoint.comment')}</Label>
		<Textarea bind:value={comment} id="comment" />
		<div class="flex flex-row gap-2">
			<div>
				<Label for="latitude">{$_('toolbar.waypoint.latitude')}</Label>
				<Input
					bind:value={latitude}
					type="number"
					id="latitude"
					step={1e-6}
					min={-90}
					max={90}
					class="text-xs h-8"
				/>
			</div>
			<div>
				<Label for="longitude">{$_('toolbar.waypoint.longitude')}</Label>
				<Input
					bind:value={longitude}
					type="number"
					id="longitude"
					step={1e-6}
					min={-180}
					max={180}
					class="text-xs h-8"
				/>
			</div>
		</div>
	</fieldset>
	<div class="flex flex-row gap-2">
		<Button
			variant="outline"
			disabled={!canCreate && !$selectedWaypoint}
			class="grow"
			on:click={createOrUpdateWaypoint}
		>
			{#if $selectedWaypoint}
				{$_('toolbar.waypoint.update')}
			{:else}
				{$_('toolbar.waypoint.create')}
			{/if}
		</Button>
		<Button
			variant="outline"
			on:click={() => {
				selectedWaypoint.set(undefined);
				resetWaypointData();
			}}
		>
			<CircleX size="16" />
		</Button>
	</div>
	<Help>
		{#if $selectedWaypoint || canCreate}
			{$_('toolbar.waypoint.help')}
		{:else}
			{$_('toolbar.waypoint.help_no_selection')}
		{/if}
	</Help>
</div>