<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="~{admin/include::head}">
    </head>
    <style>
    .layui-table-cell {
        height: auto!important;
        white-space: normal
    }
    /*td[data-field="2"], th[data-field="2"] {
        max-width: 200px
    }*/
    a.comment-status:hover {
        text-decoration: none
    }
    .comment-author-mess {
        display: flex
    }
    
    .comment-author-mess-mini {
        display: none
    }
    .comment-author-mess>.comment-author-avatar {
        margin: auto 0
    }
    .comment-author-mess .comment-author-meta, .comment-author-mess-mini>*:not(:first-of-type) {
        margin-left: 6px
    }
    @media screen and (max-width: 720px) {
        .comment-author-mess {
            display: block
        }
        .comment-author-mess>*,.comment-author-mess>.comment-author-avatar {
            margin: 0 auto
        }
        .comment-author-mess>.comment-author-avatar {width: 40px}
        .comment-author-meta {
            margin-left: 0
        }
        .comment-author-mess-mini {
            display: flex
        }
        td[data-field="1"], th[data-field="1"],
        td[data-field="3"], th[data-field="3"] {
            display: none;
        }
        td[data-field="2"], th[data-field="2"], .laytable-cell-1-0-2 {
            width: fit-content!important;
        }
        .layui-form-label {
            width: 50px;
        }
        .layui-input-block {
            margin-left: 80px;
        }
    }
    @media screen and (max-width: 480px) {
        .layui-table tr td .hidden-by-mouse {
            display: block;
            filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
            opacity: 1;
        }
    }
    </style>
    <body style="background-color: #f2f2f2">
        <ul th:replace="~{admin/include::nav}"></ul>
        
        <div class="manage-body">
            <div>
            <h2 class="manage-title"><b>[[${title}]]</b></h2>
            </div>
            <button class="layui-btn layui-btn-sm operdown">
               <span>选中项<i class="layui-icon layui-icon-sm layui-icon-triangle-d"></i></span>
           </button>
           <div class="layui-btn-group">
              <a type="button" class="layui-btn layui-btn-sm comment-status" href="#RELEASED" status="RELEASED"><i class="fa fa-fw fa-check"></i>通过</a>
              <a type="button" class="layui-btn layui-btn-sm comment-status layui-btn-primary" href="#WAITING" status="WAITING"><i class="fa fa-fw fa-search"></i>待审</a>
              <a type="button" class="layui-btn layui-btn-sm comment-status layui-btn-primary" href="#SPAM" status="SPAM"><i class="fa fa-fw fa-poop"></i>删除</a>
            </div>
            <div>
                <table id="comments" class="layui-table">
                </table>
            </div>
        </div>
        <div th:replace="~{admin/include::feet}"></div>
        <script type="text/html" id="authorTpl">
            <div class="comment-author-mess">
                <div class="comment-author-avatar">
                    <img referrerpolicy="same-origin" src="{{d.avatarUrl}}" width="40" height="40"/>
                </div>
                <div class="comment-author-meta">
                    <div class="comment-author"><a href="{{d.url}}"><b>{{d.name}}</b></a></div>
                    <div class="comment-email">
                        <a title="{{d.url}}" href="{{d.url}}" rel="external nofollow">{{d.url}}</a>
                    </div>
                </div>
            </div>
        </script>
        <script type="text/html" id="commentTpl">
            <div class="comment-author-mess-mini">
                <div class="comment-author-avatar">
                    <img referrerpolicy="same-origin" src="{{d.avatarUrl}}" width="20" height="20"/>
                </div>
                <div class="comment-author"><a href="{{d.url}}"><b>{{d.name}}</b></a></div>
                <div class="comment-email">
                    <a title="{{d.url}}" href="{{d.url}}" rel="external nofollow">{{d.url}}</a>
                </div>
            </div>
            <div class="comment-meta">添加于 {{d.createTime}} 更新于 {{d.detectiveTime}}</div>
            {{d.contentDisplay}}
            <div class="comment-action hidden-by-mouse" data-id="{{d.id}}">
                {{d.op}}
                <a href="#" class="op-light-green" op="edit"><i class="fa fa-fw fa-edit"></i>编辑</a>
                <a href="#" class="op-green" op="test"><i class="fa fa-fw fa-reply"></i>检测</a>
                <a href="#" class="op-red op-status"><i class="fa fa-fw fa-trash"></i>删除</a>
            </div>
        </script>
        <script type="text/html" id="editLink">
            <div class="layui-form" style="margin:10px 15px" id="editLinkForm" lay-filter="editLinkForm">
                <div class="layui-form-item">
                    <input type="hidden" name="id"/>
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" lay-verify="required" name="name" 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" lay-verify="required" name="email" 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="url" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea placeholder="链接描述" lay-verify="required" name="description" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="checkbox" name="markdown" title="开启 Markdown" placeholder="" autocomplete="off" lay-skin="primary">
                    </div>
                </div>
                <div style="display:none" class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="editLink">提交</button>
                    </div>
                </div>
            </div>
        </script>
        <script type="text/html" id="replyComment">
            <div class="layui-form" style="margin:10px 15px" id="editLinkForm" lay-filter="editLinkForm">
                <div class="layui-form-item">
                    <input type="hidden" name="id"/>
                    <label class="layui-form-label">回复</label>
                    <div class="layui-input-block">
                        <textarea placeholder="回复内容" lay-verify="required" name="content" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input th:if="${ @commentConfig.markdownOn}" title="开启 Markdown" checked type="checkbox" name="markdown" placeholder="" autocomplete="off" lay-skin="primary">
                        <input th:if="${!@commentConfig.markdownOn}" title="开启 Markdown" type="checkbox" name="markdown" placeholder="" autocomplete="off" lay-skin="primary">
                    </div>
                </div>
                <div style="display:none" class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="replyComment">提交</button>
                    </div>
                </div>
            </div>
        </script>
        <th:block th:replace="~{admin/include::head-script}"></th:block>
        <script th:replace="~{admin/link/indexJS::indexJS}"></script>
    </body>

</html>