<!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-ip {
      display: inline-block;
      vertical-align: top;
    }
    .comment-author-mess-mini {
        display: none
    }
    .comment-author-mess>.comment-author-avatar {
        margin: auto 0
    }
    .comment-author-mess .comment-author {
        margin-left: 17px;
    }
    .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 layui-btn-primary" data-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" data-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" data-status="SPAM"><i class="fa fa-fw fa-poop"></i>垃圾</a>
            </div>
            <div>
                <table id="comments" lay-filter="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">
                {{# if (d.url) { }}
                    <div class="comment-author"><a href="{{d.url}}"><b>{{d.author}}</b></a></div>
                {{# } else { }} 
                    <div class="comment-author"><b>{{d.authorDisplay}}</b></div>
                {{# } }}
                    <div class="comment-email">
                        <a href="#" title="封禁该 Email" class="hidden-by-mouse op-red op-ban" op="email" ban="{{d.email}}">
                            <i class="fa fa-ban"></i></a>
                        <a title="{{d.email}}" href="mailto:{{d.email}}">{{d.email}}</a>
                    </div>
                    <div class="comment-ip">
                        <a href="#" title="封禁该 IP" class="hidden-by-mouse op-red op-ban" op="ip" ban="{{d.ip}}">
                            <i class="fa fa-ban"></i></a>
                        <div class="comment-ip" title="{{d.ip}}">{{d.ip}}{{d.ipInfo.empty ? '': '<br>' + d.ipInfo.geoString}}</div>
                    </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>
                {{# if (d.url) { }}
                    <div class="comment-author"><a href="{{d.url}}"><b>{{d.author}}</b></a></div>
                {{# } else { }} 
                    <div class="comment-author"><b>{{d.authorDisplay}}</b></div>
                {{# } }}
                <div class="comment-email">
                    <a title="{{d.email}}" href="mailto:{{d.email}}">{{d.email}}</a>
                    <a href="#" title="封禁该 Email" class="op-red op-ban" op="email" ban="{{d.email}}">
                        <i class="fa fa-ban"></i></a>
                </div>
                <div class="comment-ip">
                    <span title="{{d.ip}}">{{d.ip}}</span>
                    <a href="#" title="封禁该 IP" class="op-red op-ban" op="ip" ban="{{d.ip}}">
                        <i class="fa fa-ban"></i></a>
                </div>
            </div>
            <div class="comment-meta">{{d.createTime}} 于 <a target="_blank" href="/admin/v2/comment/jumpTo?id={{d.id}}"><b>{{d.postTitle}}</b></a></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="reply"><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="editComment">
            <div class="layui-form" style="margin:10px 15px" id="editCommentForm" lay-filter="editCommentForm">
                <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="author" 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="content" 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="editComment">提交</button>
                    </div>
                </div>
            </div>
        </script>
        <script type="text/html" id="replyComment">
            <div class="layui-form" style="margin:10px 15px" id="editCommentForm" lay-filter="editCommentForm">
                <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}"
                        checked
                        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/comment/indexJS::indexJS}"></script>
    </body>

</html>