<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="~{admin/include::head}">
    </head>
    <style>
    .layui-form {
        padding: 18px 50px 1px 10px;background:white;
        box-shadow: 0 10px 20px 0 rgba(236,236,236,.86);
        border-radius: 5px;
    }
    .layui-elem-quote-warning {
        border-left: 5px solid #d8a900;
    }
    .layui-form-mid {
        float: none;    
    }
    </style>
    <body style="background-color: #f2f2f2">
        <ul th:replace="~{admin/include::nav}"></ul>
        
        <div class="manage-body">
            <div>
            <h2 class="manage-title"><b>邮件设置</b></h2>
            </div>
            <div class="layui-form" id="editCommentForm" lay-filter="editCommentForm">

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>主要设置</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">启用邮件</label>
                    <div class="layui-input-block">
                      <input type="checkbox" 
                        th:attr="checked=${@mailConfig.mailOn}? ''"
                        th:value="${@mailConfig.mailOn}"
                        name="mailOn" lay-skin="switch" lay-filter="mailOnSwitch" lay-text="ON|OFF">
                        <div class="layui-form-mid layui-word-aux">是否开启邮件功能
                        </div>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">管理员邮箱地址<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@mailConfig.adminAddress}" lay-verify="required" name="adminAddress"/>
                        <div class="layui-form-mid layui-word-aux">
                            当站点收到新回复时，发送通知至的邮箱地址
                        </div>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">邮件主题<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@mailConfig.subject}" lay-verify="required" name="subject"/>
                        <div class="layui-form-mid layui-word-aux">
                            邮件的标题
                        </div>
                    </div>
                </div>
                
                
                <div class="layui-form-item">
                    <label class="layui-form-label">发件人地址<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@mailConfig.fromAddress}" lay-verify="required" name="fromAddress"/>
                        <div class="layui-form-mid layui-word-aux">
                            邮件的发送人地址
                        </div>
                    </div>
                </div>
                
                
                <div class="layui-form-item">
                    <label class="layui-form-label">发件人名称</label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@mailConfig.fromUser}" lay-verify="required" name="fromUser"/>
                        <div class="layui-form-mid layui-word-aux">
                            邮件的发送人名称（可选）
                        </div>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">发送延迟<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@mailConfig.sendingDelay}" lay-verify="required|number|ge:0|le:1440" name="sendingDelay"/>
                    <div class="layui-form-mid layui-word-aux">
                        收到新回复后发送邮件的延迟（分钟），应对可能发生的修改评论的情况
                        <br>每次修改评论后，会重新计算延迟。已进入发送延迟队列的邮件<b>会</b>在修改本参数后发生变化
                    </div>
                </div>
                
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>SMTP 服务器设置</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label">SMTP 用户名<span>*</span></label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@mailConfig.username}" name="username" lay-verify="required"/>
                        <div class="layui-form-mid layui-word-aux">登录 SMTP 服务器所用的用户名
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">SMTP 密码</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="password" autocomplete="false" th:value="${@mailConfig.password}" name="password"/>
                        <div class="layui-form-mid layui-word-aux">登录 SMTP 服务器所用的密码
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">SMTP 服务器</label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@mailConfig.smtpHost}" name="smtpHost"/>
                        <div class="layui-form-mid layui-word-aux">SMTP 服务器地址
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">SMTP 端口</label>
                    <div class="layui-input-block">
                        <input class="layui-input" th:value="${@mailConfig.smtpPort}" lay-verify="required|number|gt:0|le:65535" name="smtpPort"/>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">启用 TLS</label>
                    <div class="layui-input-block">
                      <input type="checkbox" 
                        th:attr="checked=${@mailConfig.tlsEnable}? ''"
                        th:value="${@mailConfig.tlsEnable}"
                        name="tlsEnable" lay-skin="switch" lay-filter="tlsEnableSwitch" lay-text="ON|OFF">
                        <div class="layui-form-mid layui-word-aux">是否开启 TLS
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div th:replace="~{admin/include::feet}"></div>
        <th:block th:replace="~{admin/include::head-script}"></th:block>
        
        <script>
        layui.use(['form'], function(){
            var form = layui.form;
            document.querySelectorAll('[lay-skin="switch"]').forEach(check => {
                form.on(`switch(${check.getAttribute('lay-filter')})`, (data) => {
                    var el = data.elem;
                    el.value = !!el.checked;
                });
            })
            form.on('submit(submit)', function(data){
                $.ajax({
                    url: location.href,
                    data: JSON.stringify(data.field),
                    contentType: 'application/json',
                    method: 'POST',
                    success: function (result) {
                        layer.msg('保存成功', {time:1000}, function(){
                            location.reload();
                        });
                    },
                    error: function (res) {
                        var r = res.responseJSON;
                        layer.msg(r&&r.data||'服务器错误', {time:2000});
                    }
                });
            });
            form.render();
            
        })
        </script>
    </body>

</html>