<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment :: head(~{::title})">
    <meta charset="UTF-8">
    <title>留言板</title>
</head>
<body>
<nav th:replace="fragment :: menu(3)"></nav>

<div class=" message-container  animated slideInDown" th:classappend="${session.user}==null?'hide':''">
    <div class="ui container">
        <form action="/message/save" th:action="@{/message/save}" method="post" id="message_from" class="ui form">
            <input type="hidden" name="forum.id">
            <input type="hidden" name="parentComment.id" value="-1">
            <div class="field">
                <textarea name="content" required th:placeholder="${session.user}==null?'客官，请先登录哦！！！':'亲，给坛友留点话呗...'"
                          placeholder=""></textarea>
            </div>
            <div style="float: right;">
                <div class="fields">

                    <div class="field  m-margin-bottom-small m-mobile-wide">
                        <button id="commentpost-btn" th:classappend="${session.user}==null?'hide':''" value=""
                                class="ui teal button m-mobile-wide"><i
                                class="edit icon"></i>发表留言
                        </button>
                        <a th:href="@{/user}" id="to_login"
                           target="_blank"
                           th:classappend="${session.user}==null?'':'hide'">我要登录
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>

</div>
</div>

<div class="   animated slideInUp " style="max-width: 840px;margin: 100px auto">
    <div class="ui container">
        <div class="ui  attached segment">
            <div>
                <div class="ui threaded comments">
                    <h3 class="ui dividing header">留言板</h3>
                    <div class="comment" th:each="message : ${messages}">
                        <a class="avatar">
                            <img th:src="${message.getMsg_avatar()}"
                                 src="http://img.duoziwang.com/2018/17/05272146700399.jpg">
                        </a>
                        <div class="content">
                            <a class="author" th:text="${message.getName()}" style="font-style: italic">Matt</a>
                            <div class="metadata">

<!--                                <div class="ui mini basic teal left pointing label m-padded-mini"-->
<!--                                     th:classappend="${message.getAdmin()==0}?'hide'"-->
<!--                                     th:text="${message.getAdmin()==1}?'博主'">博主-->
<!--                                </div>-->
                                <span class="date" th:text="${#dates.format(message.getCreateTime(), 'yyyy-MM-dd HH:mm:ss')}">Today at 5:42PM</span>
                            </div>
                            <div class="text" th:text="${message.getContent()}" style="color: rgba(12,12,12,0.66)">
                                博主测试功能中。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
                            </div>
                            <div class="actions" th:classappend="${session.user}==null?'hide':''">
                                <a class="reply">回复</a>
                            </div>
                            <div class="reply_input hide">
                                <form method="post" th:action="@{/message/reply/save}" action="#">
                                    <input type="text" name="mes_id" th:value="${message.getId()}"
                                           style="display: none">
                                    <textarea class="input_text" type=" text"
                                              required
                                              name="content"
                                              th:placeholder="'回复 @'+${message.getName()}"
                                              placeholder="回复@jacky："
                                    ></textarea>
                                    <input class="reply-button" type="submit" value="回复">
                                </form>
                            </div>
                        </div>

<!--回复-->
                        <div class="comments " th:classappend="${message.getReplies().size()==0}?'hide'"
                             th:each="reply : ${message.getReplies()}">
                            <div class="comment">
                                <a class="avatar">
                                    <img th:src="@{${reply.getAvatar()}}" src="../static/images/avatar.jpg">
                                </a>
                                <div class="content">
                                    <a class="author" th:text="${reply.getNames()}">jacky</a>
                                    <div class="metadata">
                                        <span class="date"
                                              th:text="${#dates.format(reply.getCreateTime(), 'yyyy-MM-dd HH:mm:ss')}">Today at 5:42PM</span>
                                    </div>
                                    <div class="text">
                                        <a href="#"
                                           th:text="'@'+${message.getName()}+'：'">@jacky</a> <span
                                            th:text="${reply.getContent()}" style="color: rgba(62,21,111,0.95)"><：测试回复功能</span>
                                    </div>
<!--                                    <div class="actions" th:classappend="${session.user}==null?'hide':''">-->
<!--                                        <a class="reply">回复</a>-->
<!--                                    </div>-->
<!--                                    <div class="reply_input hide">-->
<!--                                        <form method="post" th:action="@{/message/reply/save}" action="#">-->
<!--                                            <input type="text" name="mes_id" th:value="${message.getId()}"-->
<!--                                                   style="display: none">-->
<!--                                            <input type="text" name="reply_name" th:value="${reply.getName()}"-->
<!--                                                   style="display: none">-->
<!--                                            <textarea class="input_text" type=" text"-->
<!--                                                      required-->
<!--                                                      name="content"-->
<!--                                                      th:placeholder="'回复 @'+${reply.getName()}"-->
<!--                                                      placeholder="回复@jacky："-->
<!--                                            ></textarea>-->
<!--                                            <input class="reply-button" type="submit" value="回复">-->
<!--                                        </form>-->
<!--                                    </div>-->
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<span id="session_user" th:text="${session.user}==null?'':${session.user.getUsername()}"></span>
<footer th:replace="fragment :: footer"></footer>
<script>

    if ($("#session_user").text() == '') {
        $("#message_from textarea").prop("readonly", true)
    }


    $('.reply').click(function () {
        $(".reply_input").addClass("hide");
        $(this).parent().parent().find(".reply_input").removeClass("hide");
    });


</script>
</body>
</html>
