<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>