Repository: louislam/uptime-kuma
File: src/pages/EditMonitor.vue (Vue)

Code before:
                                <div class="my-3">
                                    <label for="system-service-name" class="form-label">{{ $t("Service Name") }}</label>
                                    <input id="system-service-name" v-model="monitor.system_service_name" type="text" class="form-control" required placeholder="nginx">
                                    <div class="form-text">
                                        <template v-if="$root.info.runtime.platform === 'linux'">
                                            {{ $t("systemServiceDescriptionLinux") }} {{ monitor.system_service_name || 'nginx' }} {{ $t("systemServiceActiveText") }}
                                        </template>
                                        <template v-else-if="$root.info.runtime.platform === 'win32'">
                                            {{ $t("systemServiceDescriptionWindows") }} {{ monitor.system_service_name || 'nginx' }} {{ $t("systemServiceActiveText") }}
                                        </template>
                                        <template v-else>
                                            {{ $t("systemServiceDescription") }} {{ monitor.system_service_name || 'nginx' }} {{ $t("systemServiceActiveText") }}
                                        </template>

                                        <div class="mt-2">
                                            <details v-if="$root.info.runtime.platform === 'linux'" class="mb-2">
                                                <summary
                                                    class="btn btn-outline-primary btn-sm w-100 text-start"
                                                    style="box-shadow: none !important;

                                                        --bs-btn-focus-box-shadow: none;"
                                                >
                                                    <i class="fab fa-linux me-1"></i>
                                                    {{ $t("systemServiceLinuxLabel") }}
                                                </summary>
                                                <div class="p-2 ps-4">
                                                    <code>systemctl is-active {{ monitor.system_service_name || 'nginx' }}</code>
                                                    <div class="text-secondary small mt-1">{{ $t("systemServiceExpectedOutput") }}: {{ $t("systemServiceActiveResultLinux") }}</div>
                                                </div>
                                            </details>

                                            <details v-if="$root.info.runtime.platform === 'win32'">
                                                <summary
                                                    class="btn btn-outline-primary btn-sm w-100 text-start"
                                                    style="box-shadow: none !important;

                                                        --bs-btn-focus-box-shadow: none;"
                                                >
                                                    <i class="fab fa-windows me-1"></i>
                                                    {{ $t("systemServiceWindowsLabel") }}
                                                </summary>
                                                <div class="p-2 ps-4">
                                                    <code>(Get-Service -Name "{{ monitor.system_service_name || 'nginx' }}").Status</code>
                                                    <div class="text-secondary small mt-1">{{ $t("systemServiceExpectedOutput") }}: {{ $t("systemServiceActiveResultWindows") }}</div>
                                                </div>
                                            </details>
                                        </div>
                                    </div>
                                </div>
                            </template>


Review comment (suggestion):
this is very inconsistent with the rest of the UI, please change this to be a regular helptext via `i18n-t`.

Docs: https://vue-i18n.intlify.dev/guide/advanced/component

Code after:
                                    <textarea id="mongodbCommand" v-model="monitor.databaseQuery" class="form-control" :placeholder="$t('Example:', [ '{ &quot;ping&quot;: 1 }' ])"></textarea>
                                    <i18n-t tag="div" class="form-text" keypath="mongodbCommandDescription">
                                        <template #documentation>
                                            <a href="https://www.mongodb.com/docs/manual/reference/command/" target="_blank" rel="noopener noreferrer">{{ $t('documentationOf', ['MongoDB']) }}</a>
                                        </template>
                                    </i18n-t>
                                </div>
                                <div class="my-3">
                                    <label for="jsonPath" class="form-label">{{ $t("Json Query") }}</label>
                                    <input id="jsonPath" v-model="monitor.jsonPath" type="text" class="form-control">

                                    <i18n-t tag="div" class="form-text" keypath="jsonQueryDescription">
                                        <a href="https://jsonata.org/" target="_blank" rel="noopener noreferrer">jsonata.org</a>
                                        <a href="https://try.jsonata.org/" target="_blank" rel="noopener noreferrer">{{ $t('here') }}</a>
                                    </i18n-t>
                                </div>
                                <div class="my-3">
                                    <label for="expectedValue" class="form-label">{{ $t("Expected Value") }}</label>
                                    <input id="expectedValue" v-model="monitor.expectedValue" type="text" class="form-control">
                                </div>
                            </template>

                            <!-- Conditions -->
                            <EditMonitorConditions
                                v-if="supportsConditions && conditionVariables.length > 0"
                                v-model="monitor.conditions"
                                :condition-variables="conditionVariables"
                                class="my-3"
                            />

                            <!-- Interval -->
                            <div class="my-3">
                                <label for="interval" class="form-label">{{ $t("Heartbeat Interval") }} ({{ $t("checkEverySecond", [ monitor.interval ]) }})</label>
                                <input
                                    id="interval"
                                    v-model="monitor.interval"
                                    type="number"
                                    class="form-control"
                                    required
                                    :min="minInterval"
                                    :max="maxInterval"
                                    step="1"
                                    @focus="lowIntervalConfirmation.editedValue=true"
                                    @blur="checkIntervalValue"
                                >

                                <div class="form-text">
                                    {{ monitor.humanReadableInterval }}
                                </div>

                                <div v-if="monitor.interval < 20" class="form-text">