<Layout::Section::Header @title={{t "fleet-ops.settings.routing.fleet-ops-routing-settings"}}>
    <Button
        @type="primary"
        @size="sm"
        @icon="save"
        @text={{t "common.save-button-text"}}
        @onClick={{perform this.saveSettings}}
        @disabled={{this.saveSettings.isRunning}}
        @isLoading={{or this.saveSettings.isRunning this.getSettings.isRunning}}
    />
</Layout::Section::Header>

<Layout::Section::Body class="overflow-y-scroll h-full">
    <div class="container mx-auto h-screen">
        <div class="max-w-3xl my-10 mx-auto space-y-6">
            <ContentPanel @title={{t "fleet-ops.settings.routing.configure-routing"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <InputGroup @name="Routing Service" @helpText="Select the service which is responsible for calculating and plotting routes on the map.">
                    <Select
                        @value={{this.routerService}}
                        @options={{this.leafletRoutingControl.availableServices}}
                        @optionLabel="name"
                        @optionValue="key"
                        @onSelect={{fn (mut this.routerService)}}
                        @placeholder="Select routing service..."
                        class="w-full"
                    />
                </InputGroup>
                <InputGroup @name="Routing Distance Unit" @helpText="The unit used for calculating distance and routes.">
                    <Select
                        @value={{this.routingUnit}}
                        @options={{this.routingUnitOptions}}
                        @optionLabel="label"
                        @optionValue="value"
                        @onSelect={{fn (mut this.routingUnit)}}
                        @placeholder="Select routing unit..."
                        class="w-full"
                    />
                </InputGroup>
            </ContentPanel>
            <RegistryYield @registry="fleet-ops:template:settings:routing" as |RegistryComponent|>
                <RegistryComponent @controller={{this}} />
            </RegistryYield>
        </div>
    </div>
    <Spacer @height="600px" />
</Layout::Section::Body>