<!DOCTYPE html>
<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
        layout:decorate="~{layout/default_layout}">
<th:block layout:fragment="head">
    <script type="text/javascript" th:src="@{/js/blog.js}"></script>
    <link th:href="@{/css/blog.css}" rel="stylesheet" />
    <script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
    <link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
    <script th:inline="javascript">
        let editor
        document.addEventListener("DOMContentLoaded", onLoaded);
        function onLoaded() {
            var els = document.getElementsByClassName('content')
            for (i=0;i<els.length;i++) {
                var item = $(els[i])
                console.log(item[0])

                console.log(item.attr("data"))
                new toastui.Editor({
                    el: item[0],
                    width : (item[0].getBoundingClientRect().width * 0.8) + 'px',
                    height : (item[0].getBoundingClientRect().width * 0.8) + 'px',
                    viewer: true,
                    usageStatistics : false,
                    initialValue: item.attr("data"),
                    theme:"dark",
                });
            }
        }
    </script>
</th:block>
<th:block layout:fragment="content" id="content">
    <div id="main_layer">
        <th:block sec:authorize="isAnonymous()">
            <h1>권한이 없는 뎁쇼?!</h1>
        </th:block>
        <th:block sec:authorize="isAuthenticated()">
            <div class="post_layer">
                <th:block class="posts_layer"    id="posts" th:each="posts ,postsStat: ${chunkedPosts}">
                    <th:block class="posts_layer" th:class="${#strings.append(rowKey,postsStat.index)}" th:each="post, postStast : ${posts}">
                        <div class="post_item" th:onclick="goToEditor([[${path}]],[[${post.id}]],[[${SK}]])" >
                            <span id="postTitle" class="post_attr" th:text="${post.title}"></span>
                            <div id="content" class="post_attr content" th:attr="data=${post.content}"></div>
                            <span id="writeDate" class="post_attr" th:text="${#dates.format(post.writeTime, 'yyyy.MM.dd HH:mm:ss')}"></span>
                            <span id="postId" class="post_attr" th:text="${post.id}"></span>
                        </div>
                    </th:block>
                </th:block>
            </div>
        </th:block>
    </div>
</th:block>
</html>
