<script>
 import {
     Container,
     Form,
     FormGroup,
     Icon,
     Input,
     InputGroup,
     InputGroupText,
     Label,
 } from 'sveltestrap';
</script>

<Container class="flex-fill d-flex flex-column py-2">
    <h2>
        Paramètres
    </h2>
    <Form>
        <FormGroup>
            <Label for="gongIntervals">Intervalle entre les gongs</Label>
            <InputGroup>
                <Input
                    type="number"
                    id="gongIntervals"
                    placeholder="20"
                />
                <InputGroupText>min</InputGroupText>
            </InputGroup>
        </FormGroup>

        <FormGroup>
            <Label for="weatherDelay">Annonce météo après</Label>
            <InputGroup>
                <Input
                    type="number"
                    id="weatherDelay"
                    placeholder="5"
                />
                <InputGroupText>min</InputGroupText>
            </InputGroup>
        </FormGroup>

        <FormGroup>
            <Label for="weatherRituel">Rituel pour l'annonce météo</Label>
            <Input
                type="select"
                id="weatherRituel"
            >
                <option value="1">test</option>
            </Input>
        </FormGroup>

        <FormGroup>
            <Label for="greetingLanguage">Langue de salutation</Label>
            <Input
                type="select"
                id="greetingLanguage"
            >
                <option value="fr_FR">Français</option>
                <option value="en_US">Anglais</option>
                <option value="es_ES">Espagnol</option>
                <option value="de_DE">Allemand</option>
            </Input>
        </FormGroup>
    </Form>
</Container>
