<div class="form-group row">
    <label class="col-form-label col-sm-3">
        <b>{{ i18n("email_alert_endpoint.smtp_server") }}</b>
    </label>
    <div class="col-sm-5">
        <div class="form-control-with-spinner">
            <input
                data-validation-message="{{ i18n('email_alert_endpoint.validation.invalid_SMTP_server') }}"
                data-validation-empty-message="{{ i18n('email_alert_endpoint.validation.empty_SMTP_server') }}"
                data-pattern="ipv4|ipv6|domainName" data-validation-resolveDNS="true" name="smtp_server" type="text" class="form-control" required />
            <div class="spinner-border spinner-border-sm" role="status" style="display: none;">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
</div>
<div class="form-group row">
    <label class="col-form-label col-sm-3">
        <b>{{ i18n("email_alert_endpoint.email_sender") }}</b>
    </label>
    <div class="col-sm-5">
        <input
            data-validation-message="{{ i18n('email_alert_endpoint.validation.invalid_email') }}"
            data-validation-empty-message="{{ i18n('email_alert_endpoint.validation.empty_email') }}"
            name="email_sender" data-pattern="email" class="form-control" required />
    </div>
</div>
<div class="form-group row">
    <label class="col-form-label col-sm-3">
        {{ i18n("email_alert_endpoint.smtp_username") }}
    </label>
    <div class="col-sm-5">
        <input data-pattern="username|email" name="smtp_username" type="text" class="form-control" />
        <small class="text-muted">{{ i18n("optional_field") }}</small>
    </div>
</div>
<div class="form-group row">
    <label class="col-form-label col-sm-3">
        {{ i18n("email_alert_endpoint.smtp_password") }}
    </label>
    <div class="col-sm-5">
        <input name="smtp_password" type="password" class="form-control" />
        <small class="text-muted">{{ i18n("optional_field") }}</small>
    </div>
</div>