{$_('menu.metadata.name')} {$_('menu.metadata.description')}

<Label for="symbol">{$_('toolbar.waypoint.icon')}</Label>
        <Select.Root bind:selected={selectedSymbol}>
            <Select.Trigger
                id="symbol"
                class="w-full h-8"
                disabled={!canCreate && !$selectedWaypoint}
            >
                <Select.Value />
            </Select.Trigger>
            <Select.Content class="max-h-60 overflow-y-scroll">
                {#each sortedSymbols as [key, symbol]}
                    <Select.Item value={symbol.value}>
                        <span>
                            {#if symbol.icon}
                                <svelte:component
                                    this={symbol.icon}
                                    size="14"
                                    class="inline-block align-sub mr-0.5"
                                />
                            {:else}
                                <span class="w-4 inline-block" />
                            {/if}
                            {$_(`gpx.symbol.${key}`)}
                        </span>
                    </Select.Item>
                {/each}
            </Select.Content>
        </Select.Root>
        <Label for="link">{$_('toolbar.waypoint.link')}</Label>
        <Input
            bind:value={link}
            id="link"
            class="h-8"
            disabled={!canCreate && !$selectedWaypoint}
        />
        <div class="flex flex-row gap-2">
            <div class="grow">
                <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"
                    disabled={!canCreate && !$selectedWaypoint}
                />
            </div>
            <div class="grow">
                <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"
                    disabled={!canCreate && !$selectedWaypoint}
                />
            </div>
        </div>
    </fieldset>
    <div class="flex flex-row gap-2 items-center">
        <Button
            variant="outline"
            disabled={!canCreate && !$selectedWaypoint}
            class="grow whitespace-normal h-fit"
            on:click={createOrUpdateWaypoint}
        >
            {#if $selectedWaypoint}
                <Save size="16" class="mr-1 shrink-0" />
                {$_('menu.metadata.save')}
            {:else}
                <MapPin size="16" class="mr-1 shrink-0" />
                {$_('toolbar.waypoint.create')}
            {/if}
        </Button>
        <Button
            variant="outline"
            on:click={() => {
                selectedWaypoint.set(undefined);
                resetWaypointData();
            }}
        >
            <CircleX size="16" />
        </Button>
    </div>
    <Help link={getURLForLanguage($locale, '/help/toolbar/poi')}>
        {#if $selectedWaypoint || canCreate}
            {$_('toolbar.waypoint.help')}
        {:else}
            {$_('toolbar.waypoint.help_no_selection')}
        {/if}
    </Help>
</div>