<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="~{fragments/header :: header}">
</head>
<body>
<!-- Page Content -->
<div class="container blog-content-container">

    <div class="row">

        <!-- Blog Entries Column -->
        <div class="col-md-8">

            <!-- Blog Post -->
            <div class="card mb-4">
                <div class="card-block">
					<h2 class="card-title">
						<span> <a href="/u/waylau" title="waylau"
							th:href="'/u/' + ${blogModel.user.username}"
							th:title="${blogModel.user.username}"> <img
								src="/images/avatar-defualt.jpg"
								th:src="${blogModel.user.avatar} == null 
									? '/images/avatar-defualt.jpg' 
									: ${blogModel.user.avatar}"
								class="blog-avatar-50">
						</a>
						</span> <a href="/u/waylau/blogs/1" class="card-link" title="waylau"
							th:href="'/u/' + ${blogModel.user.username} + '/blogs/'+ ${blogModel.id}"
							th:title="${blogModel.user.username}"
							th:text="${blogModel.title}"> OAuth 2.0 认证的原理与实践 </a>
					</h2>
					<div class="card-text">
						<a href="/u/waylau" th:href="'/u/' + ${blogModel.user.username}"
							class="card-link" th:text="${blogModel.user.username}">waylau</a>
						发表于 [[${#dates.format(blogModel.createTime, 'yyyy-MM-dd
						HH:mm')}]] <i class="fa fa-eye" aria-hidden="true">[[${blogModel.readSize}]]</i>
						<i class="fa fa-heart-o" aria-hidden="true">[[${blogModel.voteSize}]]</i>
						<i class="fa fa-comment-o" aria-hidden="true">[[${blogModel.commentSize}]]</i>
						<a href="/u/waylau" th:if="${isBlogOwner}"
							th:href="'/u/' + ${blogModel.user.username}+ '/blogs/edit/'+ ${blogModel.id}"
							class="btn btn-primary float-right">编辑</a> <a
							href="javascript:void(0)" th:if="${isBlogOwner}"
							class="btn btn-primary float-right blog-delete-blog">删除</a>
					</div>
					<hr>
					<article class="post-content" th:utext="${blogModel.htmlContent}">

					</article>
					<hr>
				</div>
                
	               <div class="card-block">
	
	
						<h5>
							分类：<a
								th:href="'/u/'+${blogModel.user.username} + '/blogs?catalog='+${blogModel.catalog.id} "
								th:text="${blogModel.catalog.name}"> Spring Boot </a>
						</h5>
	
						<h5>
							标签： <a
								th:each="tag : ${#strings.arraySplit(blogModel.tags , ',')}"
								th:href="'/u/' + ${blogModel.user.username}  + '/blogs?keyword='+ ${tag}">
								<span class="badge badge-default" th:text="${tag}">Web
									Design</span>
							</a>
						</h5>
					</div>

					<div class="card-block">
						<h5>评论：</h5>
						<div class="row">
							<div class="col-lg-12">
								<textarea class="blog-textarea" placeholder="看帖需留言~"
									id="commentContent"></textarea>
							</div>
						</div>
						<button class="btn btn-primary float-right" id="submitComment">发表评论</button>
						<button class="btn btn-primary float-right"
							th:if="${currentVote} == null" id="submitVote">点赞</button>
						<button class="btn btn-primary float-right" th:if="${currentVote}"
							th:attr="voteId=${currentVote.id}" id="cancelVote">取消点赞</button>
					</div>


					<div class="card-block" id="mainContainer">

						<div class="row" id="mainContainerRepleace"
							th:each="comment,commentStat : ${comments}"
							th:object="${comment}">
							<h2 class="card-title col-lg-1 col-md-2">
								<span> <a href="/u/waylau"
									th:href="'/u/'+ *{user.username}" title="waylau"
									th:title="*{user.username}"> <img
										src="/images/avatar-defualt.jpg"
										th:src="*{user.avatar} == null ? '/images/avatar-defualt.jpg' : *{user.avatar}"
										class="blog-avatar-50">
								</a>
								</span>
							</h2>
							<div class="card-text col-lg-11 col-md-10">
								<a href="/u/waylau" th:href="'/u/'+ *{user.username}"
									class="card-link" th:text="*{user.username}">waylau</a>
								[[${commentStat.index} + 1]]楼
								[[${#dates.format(comment.createTime, 'yyyy-MM-dd HH:mm')}]] <a
									href="javascript:void(0)" class="blog-delete-comment"
									th:if="${commentOwner} eq *{user.username}"
									th:attr="commentId=*{id}"><i class="fa fa-trash-o"
									aria-hidden="true"></i></a>
								<p th:text="*{content}">不错哦，顶起！</p>
							</div>
						</div>

					</div>

				</div>

        </div>

        <!-- 右侧栏目 -->
        <div class="col-md-4">
            <div>
                <!-- 文章目录 -->
                <div class="card ">
                    <h5 class="card-header"><i class="fa fa-bars" aria-hidden="true"></i> 文章目录</h5>
                    <div class="card-block">
                        <div class="row">
                            <div id="catalog" class="col-lg-12"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
    <!-- /.row -->

</div>
<!-- /.container -->


<div th:replace="~{fragments/footer :: footer}">...</div>


<!-- JavaScript -->
<script th:inline="javascript">
var blogId = [[${blogModel.id}]];
var blogUrl = '/u/' + [[${blogModel.user.username}]] + '/blogs/'+ [[${blogModel.id}]] ;
</script>
<script src="../../js/userspace/blog.js" th:src="@{/js/userspace/blog.js}"></script>
</body>
</html>