Repository: digitalocean/nginxconfig.io
File: src/nginxconfig/templates/global_sections/logging.vue (Vue)

Code before:
                            <PrettyCheck v-model="logNotFound" class="p-default p-curve p-fill p-icon">
                                <i slot="extra" class="icon fas fa-check"></i>
                                {{ i18n.templates.globalSections.logging.enableFileNotFoundErrorLogging }} error_log
                            </PrettyCheck>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="field is-horizontal is-aligned-top">
            <div class="field-label">
                <label class="label">{{ i18n.templates.globalSections.logging.logformat }}</label>
            </div>
            <div class="field-body">
                <div class="field">
                    <div v-if="cloudflareEnabled" :class="`control${cloudflareChanged ? ' is-changed' : ''}`">
                        <div class="checkbox">
                            <PrettyCheck v-model="cloudflare" class="p-default p-curve p-fill p-icon">
                                <i slot="extra" class="icon fas fa-check"></i>
                                {{ i18n.templates.globalSections.logging.enableCloudflare }}
                            </PrettyCheck>
                        </div>
                    </div>
                    <div v-if="cfRayEnabled">
                        <div v-if="cfConnectingIpEnabled" :class="`control${cfRayChanged ? ' is-changed' : ''}`">
                            <div class="checkbox">
                                <PrettyCheck v-model="cfRay" class="p-default p-curve p-fill p-icon">
                                    <i slot="extra" class="icon fas fa-check"></i>
                                    {{ i18n.templates.globalSections.logging.cfRay }}
                                </PrettyCheck>
                            </div>
                        </div>
                        <div v-if="cfConnectingIpEnabled" :class="`control${cfConnectingIpChanged ? ' is-changed' : ''}`">
                            <div class="checkbox">
                                <PrettyCheck v-model="cfConnectingIp" class="p-default p-curve p-fill p-icon">
                                    <i slot="extra" class="icon fas fa-check"></i>
                                    {{ i18n.templates.globalSections.logging.cfConnectingIp }}
                                </PrettyCheck>
                            </div>
                        </div>
                        <div v-if="xForwardedForEnabled" :class="`control${xForwardedForChanged ? ' is-changed' : ''}`">
                            <div class="checkbox">
                                <PrettyCheck v-model="xForwardedFor" class="p-default p-curve p-fill p-icon">
                                    <i slot="extra" class="icon fas fa-check"></i>
                                    {{ i18n.templates.globalSections.logging.xForwardedFor }}
                                </PrettyCheck>
                            </div>
                        </div>
                        <div v-if="xForwardedProtoEnabled" :class="`control${xForwardedProtoChanged ? ' is-changed' : ''}`">
                            <div class="checkbox">

Review comment (bug):
```suggestion
                        <div v-if="cfRayEnabled" :class="`control${cfRayChanged ? ' is-changed' : ''}`">
```
Extra div + incorrect if check?

Code after:
                            <PrettyCheck v-model="logNotFound" class="p-default p-curve p-fill p-icon">
                                <i slot="extra" class="icon fas fa-check"></i>
                                {{ i18n.templates.globalSections.logging.enableFileNotFoundErrorLogging }} error_log
                            </PrettyCheck>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="field is-horizontal is-aligned-top">
            <div class="field-label">
                <label class="label">{{ i18n.templates.globalSections.logging.logformat }}</label>
            </div>
            <div class="field-body">
                <div class="field">
                    <div v-if="cloudflareEnabled" :class="`control${cloudflareChanged ? ' is-changed' : ''}`">
                        <div class="checkbox">
                            <PrettyCheck v-model="cloudflare" class="p-default p-curve p-fill p-icon">
                                <i slot="extra" class="icon fas fa-check"></i>
                                {{ i18n.templates.globalSections.logging.enableCloudflare }}
                            </PrettyCheck>
                        </div>
                    </div>
                    <div v-if="cfRayEnabled" :class="`control${cfRayChanged ? ' is-changed' : ''}`">
                        <div class="checkbox">
                            <PrettyCheck v-model="cfRay" class="p-default p-curve p-fill p-icon">
                                <i slot="extra" class="icon fas fa-check"></i>
                                {{ i18n.templates.globalSections.logging.cfRay }}
                            </PrettyCheck>
                        </div>
                    </div>
                    <div v-if="cfConnectingIpEnabled" :class="`control${cfConnectingIpChanged ? ' is-changed' : ''}`">
                        <div class="checkbox">
                            <PrettyCheck v-model="cfConnectingIp" class="p-default p-curve p-fill p-icon">
                                <i slot="extra" class="icon fas fa-check"></i>
                                {{ i18n.templates.globalSections.logging.cfConnectingIp }}
                            </PrettyCheck>
                        </div>
                    </div>
                    <div v-if="xForwardedForEnabled" :class="`control${xForwardedForChanged ? ' is-changed' : ''}`">
                        <div class="checkbox">
                            <PrettyCheck v-model="xForwardedFor" class="p-default p-curve p-fill p-icon">
                                <i slot="extra" class="icon fas fa-check"></i>
                                {{ i18n.templates.globalSections.logging.xForwardedFor }}
                            </PrettyCheck>
                        </div>
                    </div>
                    <div v-if="xForwardedProtoEnabled" :class="`control${xForwardedProtoChanged ? ' is-changed' : ''}`">
                        <div class="checkbox">
                            <PrettyCheck v-model="xForwardedProto" class="p-default p-curve p-fill p-icon">