<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'} ">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
    <style>
        .option-td-center {text-align: center;}
        .option-td-center .layui-form-radio {margin: 0; padding: 0;}
        .option-td-center .layui-form-radio i {margin: 0}
        .option-td-center .layui-form-checkbox {margin: 0;}
        .option-td-center .layui-form-checkbox i {font-weight:bold; border-left: 1px solid #d2d2d2;}
        .custom-course-type {width: 200px;height:30px;display: inline-block;margin: 3px 10px;}
        .w-e-text ol li {list-style: decimal;}
        .w-e-text ul li {list-style: disc;}
    </style>
</head>
<body>
<div class="layui-fluid layui-anim layui-anim-fadein">
    <div class="layui-card">
        <div class="layui-card-header">
            <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
              <a class="close" href="javascript:void(0);">上级列表</a><span lay-separator="">/</span>
              <a href="javascript:void(0);"><cite>编辑内容</cite></a>
            </span>
        </div>
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form layui-form-pane" lay-filter="dataForm">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label layui-form">题目</label>
                    <div class="layui-input-block">
                        <div id="subject"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">试题类型</label>
                    <div class="layui-input-block">
                        <input type="hidden" id="questionType" name="questionType" class="layui-input">
                        <input type="text" id="questionTypeName" name="questionTypeName" class="layui-input" placeholder="请选择试题类型" readonly style="cursor: pointer">
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">种类</label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" value="choice" title="选择题"  lay-filter="typeFilter" checked>
                        <input type="radio" name="type" value="tureOrFalse" title="判断题" lay-filter="typeFilter" >
                        <input type="radio" name="type" value="fillInTheBlanks" title="填空题" lay-filter="typeFilter" >
                        <input type="radio" name="type" value="answer" title="解答题" lay-filter="typeFilter" >
                    </div>
                </div>
                <div id="choiceTypeBox" class="layui-form-item" pane>
                    <label class="layui-form-label">选择类别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="choiceType" value="single" lay-filter="choiceTypeFilter" title="单选" checked>
                        <input type="radio" name="choiceType" value="multiple" lay-filter="choiceTypeFilter" title="多选">
                    </div>
                </div>
                <!-- 单选复选选项 -->
                <div id="optionBox" class="layui-form-item">
                    <button type="button" id="addOption" class="layui-btn layui-btn-sm layui-btn-normal">
                        <i class="fa fa-plus"></i> 添加选项和答案
                    </button>
                    <div id="optionTemplateBox" lay-filter="optionTemplateBoxFilter"></div>
                    <script id="optionTemplate" type="text/html">
                        {{# if(d.optionArray.length > 0) { }}
                        <table class="layui-table">
                            <colgroup>
                                <col width="60">
                                <col>
                                <col width="60">
                                <col width="60">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>选项</th>
                                <th>题干</th>
                                <th>答案</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {{# for(var i = 0, item; item = d.optionArray[i++];) { }}
                            <tr>
                                <td class="option-td-center">{{item.option}}</td>
                                <td>
                                    <input type="text" id="optionQuestion{{item.id}}" class="layui-input" value="{{item.content}}" placeholder="请输入试题" lay-verify="required">
                                </td>
                                <td class="option-td-center">
                                    {{# if(d.choiceType === 'single') { }}
                                    <input type="radio" name="optionAnswer" value="{{item.option}}" lay-filter="choiceTypeSingleFilter">
                                    {{# } else { }}
                                    <input type="checkbox" name="optionAnswer[{{item.option}}]" value="{{item.option}}" lay-filter="choiceTypeMultipleFilter">
                                    {{# } }}
                                </td>
                                <td class="option-td-center">
                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger remove-option-btn" data-option-id="{{item.id}}">
                                        <i class="fa fa-remove"></i>
                                    </button>
                                </td>
                            </tr>
                            {{# } }}
                            </tbody>
                        </table>
                        {{# } }}
                    </script>
                </div>
                <!-- 填空题 -->
                <div id="fillInTheBlanksAnswerBox" style="display: none;">
                    <div id="fillInTheBlanksAnswerTemplateBox"></div>
                    <script id="fillInTheBlanksAnswerTemplate" type="text/html">
                        {{# if(d.length > 0) { }}
                        <table class="layui-table">
                            <colgroup>
                                <col width="60">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>答案</th>
                            </tr>
                            </thead>
                            <tbody>
                            {{# for(var i = 0, item; item = d[i++];) { }}
                            <tr>
                                <td class="option-td-center">{{i}}</td>
                                <td>
                                    <input type="text" id="fillInTheBlanksAnswer{{item.id}}" class="layui-input" value="{{item.content}}" placeholder="请输入答案" lay-verify="required">
                                </td>
                            </tr>
                            {{# } }}
                            </tbody>
                        </table>
                        {{# } }}
                    </script>
                </div>
                <div id="answerBox" class="layui-form-item layui-form-text" style="display: none;">
                    <label class="layui-form-label">答案</label>
                    <div class="layui-input-block">
                        <textarea id="answer" name="answer" class="layui-textarea" placeholder="请输入答案"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label layui-form">解析</label>
                    <div class="layui-input-block">
                        <div id="analysis"></div>
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">难度</label>
                    <div class="layui-input-block">
                        <input type="radio" name="difficulty" value="1" title="⭐" checked>
                        <input type="radio" name="difficulty" value="2" title="⭐⭐">
                        <input type="radio" name="difficulty" value="3" title="⭐⭐⭐">
                        <input type="radio" name="difficulty" value="4" title="⭐⭐⭐⭐">
                        <input type="radio" name="difficulty" value="5" title="⭐⭐⭐⭐⭐">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">来源</label>
                    <div class="layui-input-block">
                        <input type="text" id="source" name="source" class="layui-input" value="" placeholder="请输入来源" >
                    </div>
                </div>
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;">
                            <button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交编辑</button>
                            <button type="button" class="layui-btn layui-btn-primary close">返回上级</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="assets/js/vendor/wangEditor/wangEditor.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: 'assets/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate', 'laytpl'], function(){
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var questionId = top.restAjax.params(window.location.href).questionId;

        var wangEditor = window.wangEditor;
        var wangEditorObj = {};
        var fillTag = '$_WenG_$';
        var type = 'choice';
        var choiceOptionAnswer = [];
        var choiceOption = {
            choiceType: 'single',
            optionArray: []
        };
        var fillInBlanksAnswerArray = [];

        function closeBox() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }

        // 设置填空题答案
        function setFillInTheBlanksAnswerContent() {
            for(var i = 0, item; item = fillInBlanksAnswerArray[i++];) {
                item.content = $('#fillInTheBlanksAnswer'+ item.id).val();
            }
        }
        // 刷新空格
        function refreshFillInTheBlanks() {
            var blankCount = 0;
            var subject = wangEditorObj['subject'].txt.text();
            for(var i = 0, item; item = subject[i++];) {
                if(item === '_') {
                    blankCount++;
                }
            }
            if(fillInBlanksAnswerArray.length < blankCount) {
                fillInBlanksAnswerArray.push({
                    id: new Date().getTime(),
                    content: '',
                });
            } else {
                fillInBlanksAnswerArray.splice(blankCount, fillInBlanksAnswerArray.length - blankCount);
            }
            laytpl(document.getElementById('fillInTheBlanksAnswerTemplate').innerHTML).render(fillInBlanksAnswerArray, function(html) {
                document.getElementById('fillInTheBlanksAnswerTemplateBox').innerHTML = html;
            });
        }

        function closeBox() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }

        function refreshDownloadTemplet(fileName, file) {
            var dataRander = {};
            dataRander[fileName] = file;

            laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) {
                document.getElementById(fileName +'FileBox').innerHTML = html;
            });
        }
        // 富文本设置
        function editorMenus() {
            return [
                'bold',  // 粗体
                'italic',  // 斜体
                'underline',  // 下划线
                'strikeThrough',  // 删除线
                'foreColor',  // 文字颜色
                'backColor',  // 背景颜色
                'link',  // 插入链接
                'list',  // 列表
                'quote',  // 引用
                'image',  // 插入图片
                'table',  // 表格
                'undo',  // 撤销
                'redo'  // 重复
            ]
        }
        function editorPasteTextHandle(content) {
            if (content == '' && !content) {
                return ''
            }
            var str = content;
            str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '');
            str = str.replace('/class=(")?Mso[a-zA-Z]+(")?)/g', '');
            str = str.replace(/\n|\r/ig, '')
            var reg = new RegExp('<!--(.*?)-->','g')
            str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
            str = str.replace(/<\/?[^>]*>/g, '')
            str = str.replace(/[ | ]*\n/g, '')
            str = str.replace(/&nbsp;/ig, '')
            str = str.replace(reg,'')
            return str;
        }
        // 初始化题目富文本
        function initSubjectRichText(value) {
            var editor = new wangEditor('#subject');
            editor.customConfig.zIndex = 50;
            editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024;
            editor.customConfig.uploadImgMaxLength = 1;
            editor.customConfig.uploadFileName = 'image';
            editor.customConfig.uploadImgServer = 'api/file/wangeditorimage';
            editor.customConfig.uploadImgHooks = {
                fail: function (xhr, editor, result) {
                    top.dialog.msg('系统错误，图片上传失败');
                },
                error: function (xhr, editor) {
                    top.dialog.msg('网络异常');
                },
                timeout: function (xhr, editor) {
                    top.dialog.msg('网络请求超时');
                }
            };
            editor.customConfig.menus = editorMenus();
            editor.customConfig.onchange = function(html) {
                if(type != 'fillInTheBlanks') {
                    return;
                }
                setFillInTheBlanksAnswerContent();
                refreshFillInTheBlanks();
            }
            editor.customConfig.pasteTextHandle = editorPasteTextHandle;
            editor.create();
            editor.txt.html(value);
            wangEditorObj['subject'] = editor;
        }

        // 初始化解析富文本
        function initAnalysisRichText(value) {
            var editor = new wangEditor('#analysis');
            editor.customConfig.zIndex = 50;
            editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024;
            editor.customConfig.uploadImgMaxLength = 1;
            editor.customConfig.uploadFileName = 'image';
            editor.customConfig.uploadImgServer = 'api/file/wangeditorimage';
            editor.customConfig.uploadImgHooks = {
                fail: function (xhr, editor, result) {
                    top.dialog.msg('系统错误，图片上传失败');
                },
                error: function (xhr, editor) {
                    top.dialog.msg('网络异常');
                },
                timeout: function (xhr, editor) {
                    top.dialog.msg('网络请求超时');
                }
            };
            editor.customConfig.menus = editorMenus();
            editor.customConfig.pasteTextHandle = editorPasteTextHandle;
            editor.create();
            editor.txt.html(value);
            wangEditorObj['analysis'] = editor;
        }
        // 设置选择答案 - 用于缓存临时答案，防止新增时取消状态
        function setQuestionOptionAnswer() {
            var dataFormData = {};
            if(choiceOption.choiceType === 'multiple') {
                for(var i = 0, item; item = choiceOptionAnswer[i++];) {
                    dataFormData['optionAnswer['+ item +']'] = true;
                }
            } else {
                dataFormData['optionAnswer'] = choiceOptionAnswer[0];
            }
            form.val('dataForm', dataFormData);
        }
        // 设置选项内容
        function setQuestionOptionContent() {
            for(var i = 0, item; item = choiceOption.optionArray[i++];) {
                item.content = $('#optionQuestion'+ item.id).val();
            }
        }
        // 刷新选项
        function resetQuestionOption() {
            for(var i = 0; i < choiceOption.optionArray.length; i++) {
                choiceOption.optionArray[i].option = String.fromCharCode(i + 65);
            }
        }
        function refreshOptionTemplate(data) {
            laytpl(document.getElementById('optionTemplate').innerHTML).render(data, function(html) {
                document.getElementById('optionTemplateBox').innerHTML = html;
                setQuestionOptionAnswer();
                if(data.choiceType === 'multiple') {
                    form.render('checkbox');
                } else {
                    form.render('radio');
                }
            });
        }
        $('#addOption').on('click', function() {
            if(type === 'choice') {
                if(choiceOption.optionArray.length >= 26) {
                    top.dialog.msg('选择题最多26个选项');
                    return;
                }
            } else if(type === 'tureOrFalse') {
                if(choiceOption.optionArray.length >= 2) {
                    top.dialog.msg('判断题最多2个选项');
                    return;
                }
            }
            var option;
            if(choiceOption.optionArray.length == 0) {
                option = String.fromCharCode(choiceOption.optionArray.length + 65);
            } else {
                option = String.fromCharCode(choiceOption.optionArray[choiceOption.optionArray.length - 1].option.charCodeAt() + 1);
            }
            setQuestionOptionContent();
            choiceOption.optionArray.push({
                id: new Date().getTime(),
                option: option,
                content: ''
            });
            refreshOptionTemplate(choiceOption);
        });

        // 删除选项事件
        $(document).on('click', '.remove-option-btn', function() {
            setQuestionOptionContent();
            var self = this;
            for(var i = 0; i < choiceOption.optionArray.length; i++) {
                var item = choiceOption.optionArray[i];
                if(item.id == self.dataset.optionId) {
                    choiceOption.optionArray.splice(i, 1);
                    break;
                }
            }
            resetQuestionOption();
            refreshOptionTemplate(choiceOption);
        });
        // 刷新类型
        function refreshType(isInit) {
            if(type === 'choice') {
                $('#choiceTypeBox').show();
                $('#optionBox').show();
                $('#answerBox').hide();
                $('#fillInTheBlanksAnswerBox').hide();
                if(!isInit) {
                    setQuestionOptionContent();
                }
                refreshOptionTemplate(choiceOption);
            } else if(type === 'tureOrFalse') {
                choiceOption.choiceType = 'single';
                form.val('dataForm', {
                    choiceType: 'single'
                });
                $('#choiceTypeBox').hide();
                $('#optionBox').show();
                $('#answerBox').hide();
                $('#fillInTheBlanksAnswerBox').hide();
                if(choiceOption.optionArray.length > 2) {
                    choiceOption.optionArray.splice(2, choiceOption.optionArray.length - 2);
                }
                if(!isInit) {
                    setQuestionOptionContent();
                }
                refreshOptionTemplate(choiceOption);
            } else if(type === 'fillInTheBlanks') {
                $('#choiceTypeBox').hide();
                $('#optionBox').hide();
                $('#answerBox').hide()
                $('#fillInTheBlanksAnswerBox').show();
                if(!isInit) {
                    setFillInTheBlanksAnswerContent();
                }
                refreshFillInTheBlanks();
            } else if(type === 'answer') {
                $('#choiceTypeBox').hide();
                $('#optionBox').hide();
                $('#answerBox').show();
                $('#fillInTheBlanksAnswerBox').hide();
            }
        }

        form.on('radio(typeFilter)', function(data) {
            type = data.value;
            refreshType();
        });

        form.on('radio(choiceTypeFilter)', function(data) {
            if(data.value === 'single') {
                choiceOption.choiceType = 'single';
            } else {
                choiceOption.choiceType = 'multiple';
            }
            setQuestionOptionContent();
            refreshOptionTemplate(choiceOption);
        });

        function getQuestOptionAnswer(formData) {
            var questionOptionAnswer;
            if(choiceOption.choiceType === 'multiple') {
                questionOptionAnswer = top.restAjax.checkBoxToString(formData.field, 'optionAnswer');
                questionOptionAnswer = questionOptionAnswer.replace(/\,/g, fillTag);
            } else {
                questionOptionAnswer = formData.field['optionAnswer'];
            }
            return questionOptionAnswer;
        }
        // 提交表单
        form.on('submit(submitForm)', function(formData) {
            if(!wangEditorObj['subject'].txt.text()) {
                top.dialog.msg('题目不能为空');
                return;
            }
            if(!wangEditorObj['analysis'].txt.text()) {
                top.dialog.msg('解析不能为空');
                return;
            }
            if(formData.field['type'] === 'choice') {
                if(choiceOption.optionArray.length === 0) {
                    top.dialog.msg('试题选项不能为空');
                    return;
                }
                // 获取答案
                var questionOptionAnswer = getQuestOptionAnswer(formData);
                if(!questionOptionAnswer) {
                    top.dialog.msg('试题选项答案不能为空');
                    return;
                }
                setQuestionOptionContent();
                formData.field['answer'] = questionOptionAnswer;
            } else if(formData.field['type'] === 'tureOrFalse') {
                questionOptionAnswer = getQuestOptionAnswer(formData);
                if(!questionOptionAnswer) {
                    top.dialog.msg('试题判断答案不能为空');
                    return;
                }
                setQuestionOptionContent();
                formData.field['answer'] = questionOptionAnswer;
            } else if(formData.field['type'] === 'fillInTheBlanks') {
                setFillInTheBlanksAnswerContent();
                var answer = '';
                for(var i = 0, item; item = fillInBlanksAnswerArray[i++];) {
                    if(answer.length > 0) {
                        answer += fillTag;
                    }
                    answer += item.content;
                }
                formData.field['answer'] = answer;
            }
            top.dialog.confirm(top.dataMessage.commit, function(index) {
                top.dialog.close(index);
                var loadLayerIndex;
                formData.field['subject'] = wangEditorObj['subject'].txt.html();
                formData.field['analysis'] = wangEditorObj['analysis'].txt.html();
                formData.field['options'] = choiceOption.optionArray;
                top.restAjax.put(top.restAjax.path('api/question/update/{questionId}', [questionId]), formData.field, null, function(code, data) {
                    var layerIndex = top.dialog.msg(top.dataMessage.updateSuccess, {
                        time: 0,
                        btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
                        shade: 0.3,
                        yes: function(index) {
                            top.dialog.close(index);
                            window.location.reload();
                        },
                        btn2: function() {
                            closeBox();
                        }
                    });
                }, function(code, data) {
                    top.dialog.msg(data.msg);
                }, function() {
                    loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
                }, function() {
                    top.dialog.close(loadLayerIndex);
                });
            });
            return false;
        });

        // 初始化内容
        function initData() {
            var loadLayerIndex;
            top.restAjax.get(top.restAjax.path('api/question/get/{questionId}', [questionId]), {}, null, function(code, data) {
                var dataFormData = {};
                for(var i in data) {
                    dataFormData[i] = data[i] +'';
                }
                initSubjectRichText(data['subject']);
                initAnalysisRichText(data['analysis']);
                type = data['type'];
                choiceOption.choiceType = data['choiceType'];
                if(type === 'choice' || type === 'tureOrFalse') {
                    for(var i = 0, item; item = data['options'][i++];) {
                        item.id = item.questionOptionsId;
                        choiceOption.optionArray.push(item)
                    }
                    if(choiceOption.choiceType === 'multiple') {
                        var optionAnswerArray = data['answer'].split(fillTag);
                        for(var i = 0, item; item = optionAnswerArray[i++];) {
                            dataFormData['optionAnswer['+ item +']'] = true;
                            choiceOptionAnswer.push(item);
                        }
                    } else {
                        dataFormData['optionAnswer'] = data['answer'];
                        choiceOptionAnswer[0] = data['answer'];
                    }
                    // refreshOptionTemplate(choiceOption);
                } else if(type === 'fillInTheBlanks') {
                    var optionAnswerArray = data['answer'].split(fillTag);
                    for(var i = 0, item; item = optionAnswerArray[i++];) {
                        var fillInBlanks = {
                            id: new Date().getTime() + i,
                            content: item,
                        }
                        fillInBlanksAnswerArray.push(fillInBlanks);
                    }
                    // refreshFillInTheBlanks();
                }
                refreshType(true);
                form.val('dataForm', dataFormData);
                form.render(null, 'dataForm');

            }, function(code, data) {
                top.dialog.msg(data.msg);
            }, function() {
                loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
            }, function() {
                top.dialog.close(loadLayerIndex);
            });
        }
        initData();

        // 单选事件
        form.on('radio(choiceTypeSingleFilter)', function(data) {
            choiceOptionAnswer[0] = data.value;
        });
        // 多选事件
        form.on('checkbox(choiceTypeMultipleFilter)', function(data) {
            var existIndex = -1;
            for(var i = 0; i < choiceOptionAnswer.length; i++) {
                var item = choiceOptionAnswer[i];
                if(data.value === item) {
                    existIndex = i;
                    break;
                }
            }
            if(data.elem.checked && existIndex === -1) {
                // 选中状态，并且不存在，新增
                choiceOptionAnswer.push(data.value);
            } else if(!data.elem.checked && existIndex > -1) {
                // 非选中状态，并且存在，删除
                choiceOptionAnswer.splice(existIndex, 1);
            }
        });

        $('#questionTypeName').on('click', function() {
            top.dialog.open({
                url: top.restAjax.path('route/question-type/list-tree-select-edit?questionTypeIds={questionTypeIds}', [$('#questionType').val()]),
                title: '选择自定义类型',
                width: '200px',
                height: '400px',
                onClose: function() {
                    var selectedNodes = top.dialog.dialogData.selectedNodes;
                    if(selectedNodes.length > 0) {
                        var questionType = '';
                        var questionTypeName = '';
                        for(var i = 0, item; item = selectedNodes[i++];) {
                            if(questionType.length > 0) {
                                questionType += ',';
                                questionTypeName += ',';
                            }
                            questionType += item.id;
                            questionTypeName += item.name;
                        }
                        $('#questionType').val(questionType);
                        $('#questionTypeName').val(questionTypeName);
                    } else {
                        $('#questionType').val('');
                        $('#questionTypeName').val('');
                    }
                    console.log($('#questionType').val())
                }
            });
        })

        $('.close').on('click', function() {
            closeBox();
        });

        // 校验
        form.verify({
        });
    });
</script>
</body>
</html>