<div class="mb-3 row">
    <label class="col-form-label col-sm-3">
        <b>{{ i18n("notification_endpoint.email.smtp_server") }}</b>
        <a title="{{ i18n('help') }}" target="blank" href="https://www.ntop.org/guides/ntopng/alerts/available_recipients.html#email"><i class="fa-regular fa-circle-question"></i></a>
    </label>
    <div class="col-sm-5">
        <div class="form-control-with-spinner">
            <input
                data-validation-message="{{ i18n('notification_endpoint.email.validation.invalid_SMTP_server') }}"
                data-validation-empty-message="{{ i18n('notification_endpoint.email.validation.empty_SMTP_server') }}"
                data-pattern="ipv4|ipv6|domainName|emailUrl" 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="mb-3 row">
    <label class="col-form-label col-sm-3">
        <b>{{ i18n("notification_endpoint.email.smtp_port") }}</b>
        <a title="{{ i18n('help') }}" target="blank" href="https://www.ntop.org/guides/ntopng/alerts/available_recipients.html#email"><i class="fa-regular fa-circle-question"></i></a>
    </label>
    <div class="col-sm-7">
        <div class="form-control-with-spinner">
            <input
                data-validation-message="{{ i18n('notification_endpoint.email.validation.invalid_SMTP_port') }}"
                data-validation-empty-message="{{ i18n('notification_endpoint.email.validation.empty_SMTP_port') }}"
                name="smtp_port" type="number" class="form-control"/>
            <div class="spinner-border spinner-border-sm" role="status" style="display: none;">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
</div>
<div class="mb-3 row">
    <label class="col-form-label col-sm-3">
        <b>{{ i18n("notification_endpoint.email.use_proxy") }}</b>
        <a title="{{ i18n('help') }}" target="blank" href="https://www.ntop.org/guides/ntopng/alerts/available_recipients.html#email"><i class="fa-regular fa-circle-question"></i></a>
    </label>
    <div class="col-sm-7">
        <input name="use_proxy" type="checkbox" class="form-check-input" id="email_use_proxy">
        <label class="form-check-label" for="email_use_proxy"><small>{{ i18n("notification_endpoint.email.use_proxy_descr") }}</small></label>
    </div>
</div>
<div class="mb-3 row">
    <label class="col-form-label col-sm-3">
        <b>{{ i18n("notification_endpoint.email.email_sender") }}</b>
        <a title="{{ i18n('help') }}" target="blank" href="https://www.ntop.org/guides/ntopng/alerts/available_recipients.html#email"><i class="fa-regular fa-circle-question"></i></a>
    </label>
    <div class="col-sm-7">
        <input
            data-validation-message="{{ i18n('notification_endpoint.email.validation.invalid_email') }}"
            data-validation-empty-message="{{ i18n('notification_endpoint.email.validation.empty_email') }}"
            name="email_sender" data-pattern="email" class="form-control" required />
    </div>
</div>
<div class="mb-3 row">
    <label class="col-form-label col-sm-3">
        {{ i18n("notification_endpoint.email.smtp_username") }}
        <a title="{{ i18n('help') }}" target="blank" href="https://www.ntop.org/guides/ntopng/alerts/available_recipients.html#email"><i class="fa-regular fa-circle-question"></i></a>
    </label>
    <div class="col-sm-7">
        <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="mb-3 row">
    <label class="col-form-label col-sm-3">
        {{ i18n("notification_endpoint.email.smtp_password") }}
        <a title="{{ i18n('help') }}" target="blank" href="https://www.ntop.org/guides/ntopng/alerts/available_recipients.html#email"><i class="fa-regular fa-circle-question"></i></a>
    </label>
    <div class="col-sm-7">
        <input name="smtp_password" type="password" class="form-control" />
        <small class="text-muted">{{ i18n("optional_field") }}</small>
    </div>
</div>
