@if (currentUserForm) {
<ion-grid class="ion-no-padding">
    <ion-row class="ion-justify-content-center">
        <ion-col [size]="css.sizeMd" [sizeMd]="css.sizeMd" size-xs="12">
            <ion-card>
                <ion-item lines="full" color="light">
                    <ion-icon slot="start" name="person-outline"
                        color="primary"></ion-icon>
                    <ion-label>
                        <span>{{ user.name }}</span>
                    </ion-label>
                    <oe-help-button key="REDIRECT.SETTINGS_ALERTING" [useDefaultPrefix]="false"></oe-help-button>
                </ion-item>
                <ion-card-content class="ion-no-padding">
                    <form>
                        <formly-form [model]="currentUserForm.model"
                            [fields]="currentUserForm.fields"
                            [options]="currentUserForm.options"
                            [form]="currentUserForm.formGroup">
                        </formly-form>
                    </form>
                </ion-card-content>
            </ion-card>
        </ion-col>
    </ion-row>
    @if (otherUserForm) {
    <ion-row class="ion-justify-content-center ion-padding-top">
        <ion-col size="10" size-md="10" size-xs="12">
            <ion-card>
                <ion-item lines="full" color="light">
                    <ion-icon slot="start" name="people-outline"
                        color="primary"></ion-icon>
                    <ion-label>
                        {{ "ALERTING.OTHER_USERS" | translate }}
                    </ion-label>
                </ion-item>
                <ion-card-content class="ion-no-padding-left-right">
                    <form>
                        <formly-form [model]="{}"
                            [fields]="otherUserForm.fields"
                            [options]="otherUserForm.options"
                            [form]="otherUserForm.formGroup">
                        </formly-form>
                    </form>
                </ion-card-content>
            </ion-card>
        </ion-col>
    </ion-row>
    }
</ion-grid>
} @else {
<ngx-spinner [name]="spinnerId"></ngx-spinner>
}

<!-- Save Button -->
@if (currentUserForm?.formGroup?.dirty || otherUserForm?.formGroup?.dirty) {
<ion-footer>
    <ion-grid>
        <ion-row class="ion-justify-content-center">
            <ion-col size="12" size-md="6">
                <ion-button expand="block" type="submit" color="primary"
                    (click)="setUsersAlertingConfig()" translate>
                    GENERAL.SAVE
                </ion-button>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-footer>
}