<ContentPanel @title={{t "fleet-ops.component.admin.visibility-controls.title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
    <p class="mb-4 dark:text-white text-gray-800">{{t "fleet-ops.component.admin.visibility-controls.message"}}</p>
    {{#each this.visibilitySettings as |visibilityControl|}}
        <InputGroup @wrapperClass="mb-1i">
            <Checkbox
                @value={{visibilityControl.visible}}
                @label={{concat visibilityControl.name " Visible"}}
                @onToggle={{fn (mut visibilityControl.visible)}}
                @helpText={{t "fleet-ops.component.admin.visibility-controls.checkbox-text"}}
            />
        </InputGroup>
    {{/each}}
</ContentPanel>

<div class="mt-3 flex items-center justify-end">
    <Button
        @type="primary"
        @size="lg"
        @icon="save"
        @text={{t "fleet-ops.common.save-changes"}}
        @onClick={{this.saveVisibilitySettings}}
        @disabled={{this.isLoading}}
        @isLoading={{this.isLoading}}
    />
</div>