{% load static %}
{% block content %}
<style>
    /* 顶部颜色 */
    .layui-card-header {
        background-color: #f0f8ff; /* 浅蓝色 */
        color: #333; /* 字体颜色 */
    }

    /* 输入框样式 */
    .layui-input {
        background-color: #e6f7ff; /* 浅蓝色（英文） */
        border: 1px solid #a6c8ff; /* 边框颜色 */
    }

    .layui-textarea {
        background-color: #e6f7ff; /* 浅蓝色（英文） */
        border: 1px solid #a6c8ff; /* 边框颜色 */
    }

    /* 中文输入框样式 */
    .layui-input[name^="domain_zh"], .layui-input[name^="title_zh"],
    .layui-textarea[name^="keywords_zh"], .layui-textarea[name^="description_zh"] {
        background-color: #ffe6e6; /* 浅红色（中文） */
        border: 1px solid #ffb3b3; /* 边框颜色 */
    }

    .layui-form-item {
        margin-bottom: 20px;
    }

    .layui-form-label {
        width: 120px;
        text-align: right; /* 居中标签 */
    }

    .layui-input-block {
        margin-left: 140px;
    }

    .layui-textarea {
        height: 80px; /* 调整文本域高度 */
    }
</style>

<div class="layui-card">
    <div class="layui-card-header">网站信息</div>
    <div class="layui-card-body">
        <form class="layui-form" lay-filter="website-info-form">
            {% csrf_token %}
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">英文域名</label>
                        <div class="layui-input-block">
                            <input type="text" name="domain_en" value="{{ website_info.domain_en }}" required lay-verify="required" placeholder="请输入英文域名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">英文标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="title_en" value="{{ website_info.title_en }}" required lay-verify="required" placeholder="请输入英文标题" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">英文关键词</label>
                        <div class="layui-input-block">
                            <textarea name="keywords_en" required lay-verify="required" placeholder="请输入英文关键词" class="layui-textarea">{{ website_info.keywords_en }}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">英文描述</label>
                        <div class="layui-input-block">
                            <textarea name="description_en" required lay-verify="required" placeholder="请输入英文描述" class="layui-textarea">{{ website_info.description_en }}</textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">中文域名</label>
                        <div class="layui-input-block">
                            <input type="text" name="domain_zh" value="{{ website_info.domain_zh }}" required lay-verify="required" placeholder="请输入中文域名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">中文标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="title_zh" value="{{ website_info.title_zh }}" required lay-verify="required" placeholder="请输入中文标题" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">中文关键词</label>
                        <div class="layui-input-block">
                            <textarea name="keywords_zh" required lay-verify="required" placeholder="请输入中文关键词" class="layui-textarea">{{ website_info.keywords_zh }}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">中文描述</label>
                        <div class="layui-input-block">
                            <textarea name="description_zh" required lay-verify="required" placeholder="请输入中文描述" class="layui-textarea">{{ website_info.description_zh }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="text-align: center;">
                    <button class="layui-btn" lay-submit lay-filter="save-website-info">保存修改</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    layui.use(['form'], function(){
        var form = layui.form;

        // 监听提交
        form.on('submit(save-website-info)', function(data){
            console.log(data)
            // 使用 Axios 提交表单数据

            axios.post('site-info/', data.field) // 替换为你的 URL
                .then(function(response) {
                    console.log(response)
                    // 处理成功的响应
                    if(response.data.code === 200) {
                        layer.msg('保存成功', {icon: 1});
                    } else {
                        layer.msg(response.data.message, {icon: 2});
                    }
                })
                .catch(function() {
                    layer.msg('服务器错误，请重试', {icon: 2});
                });

            return false; // 阻止表单跳转
        });
    });

</script>
{% endblock %}