<!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/toast-ui-view.js}"></script>
    <link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
    <script type="text/javascript" th:src="@{/js/blog.js}"></script>
    <link th:href="@{/css/blog.css}" rel="stylesheet" />
    <script th:inline="javascript">
        let editor
        let onChange = () => {console.log(editor.getMarkdown())}
        document.addEventListener("DOMContentLoaded", onLoaded);
        function onLoaded() {

        }
    </script>
</th:block>
<th:block layout:fragment="content" id="content">
    <section class="wrapper style1">
        <div class="container">
            <div class="row gtr-200">
<!--                <div class="col-3 col-12-narrower">-->
<!--                    <div id="sidebar1">-->
<!--                        <section>-->
<!--                            <h3>Just a Subheading</h3>-->
<!--                            <p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.-->
<!--                                Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.-->
<!--                                Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis et nisi etiam.</p>-->
<!--                            <footer>-->
<!--                                <a href="#" class="button">Continue Reading</a>-->
<!--                            </footer>-->
<!--                        </section>-->

<!--                        <section>-->
<!--                            <h3>Another Subheading</h3>-->
<!--                            <ul class="links">-->
<!--                                <li><a href="#">Amet turpis, feugiat sit amet</a></li>-->
<!--                                <li><a href="#">Ornare in hendrerit lectus</a></li>-->
<!--                                <li><a href="#">Semper mod quis eget dolore</a></li>-->
<!--                                <li><a href="#">Consequat lorem phasellus</a></li>-->
<!--                                <li><a href="#">Amet turpis feugiat amet</a></li>-->
<!--                                <li><a href="#">Semper mod quisturpis nisi</a></li>-->
<!--                            </ul>-->
<!--                            <footer>-->
<!--                                <a href="#" class="button">More Random Links</a>-->
<!--                            </footer>-->
<!--                        </section>-->

<!--                    </div>-->
<!--                </div>-->
                <div class="col-6 col-12-narrower imp-narrower">
                    <div id="content">
                        <article>
                            <section class="col-6 col-12-narrower imp-narrower" th:each="post : ${Posts}">
                                <!--                    <span th:text="${cell}"></span>-->
                                <div class="box post" onclick="goToViewer(this)" th:id="${post.id}">
                                    <a href="javascript:goToViewer(this)" th:id="${post.id}" th:data="${post.id}" class="image left"><img th:src="${#strings.length(post.thumb) > 0} ? ${post.thumb} : 'images/pic01.jpg'" alt="" /></a>
                                    <div class="inner">
                                        <h3 th:text="${#strings.length(post.title) > 0} ? ${post.title} : ('untitled[' + ${#temporals.format(T(java.time.Instant).ofEpochMilli(post.writeTime).atZone(T(java.time.ZoneId).systemDefault()).toLocalDateTime(), 'yyyy-MM-dd HH:mm:ss')} + ']')"></h3>
                                        <p th:text="${#strings.abbreviate(post.html, 80)}" class="ellipsis"></p>
                                    </div>
                                </div>
                            </section>
                        </article>

                    </div>
                </div>
<!--                <div class="col-3 col-12-narrower">-->
<!--                    <div id="sidebar2">-->

<!--                        <section>-->
<!--                            <h3>Another Subheading</h3>-->
<!--                            <ul class="links">-->
<!--                                <li><a href="#">Amet turpis, feugiat sit amet</a></li>-->
<!--                                <li><a href="#">Ornare in hendrerit lectus</a></li>-->
<!--                                <li><a href="#">Semper mod quis eget dolore</a></li>-->
<!--                                <li><a href="#">Consequat lorem phasellus</a></li>-->
<!--                                <li><a href="#">Amet turpis feugiat amet</a></li>-->
<!--                                <li><a href="#">Semper mod quisturpis nisi</a></li>-->
<!--                            </ul>-->
<!--                            <footer>-->
<!--                                <a href="#" class="button">More Random Links</a>-->
<!--                            </footer>-->
<!--                        </section>-->

<!--                        <section>-->
<!--                            <h3>Just a Subheading</h3>-->
<!--                            <p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.-->
<!--                                Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.-->
<!--                                Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis et nisi etiam.</p>-->
<!--                            <footer>-->
<!--                                <a href="#" class="button">Continue Reading</a>-->
<!--                            </footer>-->
<!--                        </section>-->

<!--                    </div>-->
<!--                </div>-->
            </div>
        </div>
    </section>
</th:block>
</html>
