<script lang="ts">
    import * as m from '@/messages';
    import Stack from '@/lib/components/Stack/Stack.svelte';
    import Grid from '@/lib/components/Grid/Grid.svelte';
    import Select from '@/lib/components/Select/Select.svelte';
    import { profileNames } from '@/lib/client.ts';

    const profiles = $state<Array<{ value: string; name: string }>>([]);

    $effect(() => {
        profileNames().then((profile_names) => {
            const items = profile_names
                .map((name) => ({ value: name, name }))
                .sort((a, b) => {
                    if (a.name === 'default') return -1;
                    if (b.name === 'default') return 1;

                    if (a.name < b.name) return -1;
                    if (a.name > b.name) return 1;
                    return 0;
            });

            profiles.splice(0, profiles.length, ...items);
        });
    });
</script>

<Stack gap="xs">
    <Grid cols={2} gap="xs">
        <fieldset class="zm-domain-test__general">
            <legend>{m.general()}</legend>
            <label>
                <input type="radio" name="iptype" value="both" checked />
                {m.ipv4AndIpv6()}
            </label>
            <label>
                <input type="radio" name="iptype" value="ipv4" />
                IPv4 {m.only()}
            </label>
            <label>
                <input type="radio" name="iptype" value="ipv6" />
                IPv6 {m.only()}
            </label>
        </fieldset>
        {#if profiles.length > 1}
            <div>
                <Select
                    name="profile"
                    value="default"
                    label={m.profile()}
                    options={profiles}
                />
            </div>
        {/if}
    </Grid>
</Stack>
