Repository: louislam/uptime-kuma
File: src/components/notifications/Telegram.vue (Vue)

Code before:
            </p>
        </div>

        <label for="message_thread_id" class="form-label">{{ $t("telegramMessageThreadID") }}</label>
        <input id="message_thread_id" v-model="$parent.notification.telegramMessageThreadID" type="text" class="form-control">
        <p class="form-text">{{ $t("telegramMessageThreadIDDescription") }}</p>
    </div>

    <div class="mb-3">
        <div class="form-check form-switch">
            <input v-model="$parent.notification.telegramUseTemplate" class="form-check-input" type="checkbox">
            <label class="form-check-label">{{ $t("telegramUseTemplate") }}</label>
        </div>

        <div class="form-text">
            {{ $t("telegramUseTemplateDescription") }}
        </div>
    </div>

    <template v-if="$parent.notification.telegramUseTemplate">
        <div class="mb-3">
            <label class="form-label" for="message_parse_mode">{{ $t("Template Format") }}</label>

            <i18n-t tag="div" keypath="telegramTemplateFormatDescription" class="form-text mb-3">
                <a href="https://core.telegram.org/bots/api#formatting-options" target="_blank">{{ $t("documentation") }}</a>
            </i18n-t>

            <select
                id="message_parse_mode"
                v-model="$parent.notification.telegramTemplateParseMode"
                class="form-select"
                required
            >
                <option value="plain">{{ $t("Plain Text") }}</option>
                <option value="HTML">HTML</option>
                <option value="MarkdownV2">MarkdownV2</option>
            </select>
        </div>

        <div class="mb-3">
            <label class="form-label" for="message_parse_mode">{{ $t("Template") }}</label>

            <div class="form-text mb-3">
                <i18n-t tag="div" keypath="liquidIntroduction">
                    <a href="https://liquidjs.com/" target="_blank">{{ $t("documentation") }}</a>
                </i18n-t>

                <code v-pre>{{ msg }}</code>: {{ $t("templateMsg") }}<br />
                <code v-pre>{{ heartbeatJSON }}</code>: {{ $t("templateHeartbeatJSON") }} <b>({{ $t("templateLimitedToUpDownNotifications") }})</b><br />
                <code v-pre>{{ monitorJSON }}</code>: {{ $t("templateMonitorJSON") }} <b>({{ $t("templateLimitedToUpDownCertNotifications") }})</b><br />
            </div>

Review comment (refactor):
please move this down under `message_parse_mode` and format it as a helptext.

Please also include what setting `telegramTemplateParseMode` means in said helptext.
Currently, this would be pretty confusing.

Code after:
            </p>
        </div>

        <label for="message_thread_id" class="form-label">{{ $t("telegramMessageThreadID") }}</label>
        <input id="message_thread_id" v-model="$parent.notification.telegramMessageThreadID" type="text" class="form-control">
        <p class="form-text">{{ $t("telegramMessageThreadIDDescription") }}</p>
    </div>

    <div class="mb-3">
        <div class="form-check form-switch">
            <input v-model="$parent.notification.telegramUseTemplate" class="form-check-input" type="checkbox">
            <label class="form-check-label">{{ $t("telegramUseTemplate") }}</label>
        </div>

        <div class="form-text">
            {{ $t("telegramUseTemplateDescription") }}
        </div>
    </div>

    <template v-if="$parent.notification.telegramUseTemplate">
        <div class="mb-3">
            <label class="form-label" for="message_parse_mode">{{ $t("Message Format") }}</label>
            <select
                id="message_parse_mode"
                v-model="$parent.notification.telegramTemplateParseMode"
                class="form-select"
                required
            >
                <option value="plain">{{ $t("Plain Text") }}</option>
                <option value="HTML">HTML</option>
                <option value="MarkdownV2">MarkdownV2</option>
            </select>
            <i18n-t tag="p" keypath="telegramTemplateFormatDescription" class="form-text">
                <a href="https://core.telegram.org/bots/api#formatting-options" target="_blank">{{ $t("documentation") }}</a>
            </i18n-t>

            <label class="form-label" for="message_template">{{ $t('Message Template') }}</label>
            <TemplatedTextarea id="message_template" v-model="$parent.notification.telegramTemplate" :required="true" :placeholder="telegramTemplatedTextareaPlaceholder"></TemplatedTextarea>
        </div>
    </template>

    <div class="mb-3">
        <div class="form-check form-switch">
            <input v-model="$parent.notification.telegramSendSilently" class="form-check-input" type="checkbox">
            <label class="form-check-label">{{ $t("telegramSendSilently") }}</label>
        </div>

        <div class="form-text">
            {{ $t("telegramSendSilentlyDescription") }}
        </div>
    </div>