<!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 th:inline="javascript">

    </script>
</th:block>
<th:block layout:fragment="content" id="content">
    <section id="banner">
        <header>
            <h2>Bum's: <em>짧은 헛소리 혹은 기사?! 링크 있으면 링크까지</a></em></h2>
            <a href="#" class="button">더 읽으쉴?!<br>[Read More Gibberish]</a>
        </header>
    </section>

    <!-- Highlights -->


    <!-- Gigantic Heading -->
    <section class="wrapper style2">
        <div class="container">
            <header class="major">
                <h2>A gigantic heading you can use for whatever</h2>
                <p>With a much smaller subtitle hanging out just below it</p>
            </header>
        </div>
    </section>
    <section id="cta2" class="wrapper style3">
        <div class="container">
            <header>
                <h2>Are you ready to continue your quest?</h2>
            </header>
        </div>
    </section>
    <!-- Posts -->
    <section class="wrapper style2">
        <div class="container">
            <div class="row" th:each="row : ${Posts}">
                <section class="col-6 col-12-narrower" th:each="post : ${row}">
                    <!--                    <span th:text="${cell}"></span>-->
                    <div class="box post" onclick="goToViewer(this)" th:id="${post.id}">
                        <a href="#" 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>
            </div>
        </div>
    </section>

    <section class="wrapper style1">
        <div class="container">
            <div class="row gtr-200">
                <section class="col-4 col-12-narrower">
                    <div class="box highlight">
                        <i class="icon solid major fa-paper-plane"></i>
                        <h3>This Is Important</h3>
                        <p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
                    </div>
                </section>
                <section class="col-4 col-12-narrower">
                    <div class="box highlight" sec:authorize="isAuthenticated()" onclick=gotoWrite()>
                        <i class="icon solid major fa-pencil-alt"></i>
                        <h3>글쓰기[Writing]</h3>
                        <p>오직 주인장 만의 권한 임요. 그냥 내가 쓰기 편하게 여기 놔둔 메뉴임. 님들은 못씀요.<br>[Only the owner has the authority. This is just a menu that I put here for my convenience. You can't use it.]</p>
                    </div>
                    <div class="box highlight"  sec:authorize="isAnonymous()" onclick="openLoginPopup('login')">
                        <i class="icon solid major fa-pencil-alt"></i>
                        <h3>글쓰기[Writing]</h3>
                        <p>오직 주인장 만의 권한 임요. 그냥 내가 쓰기 편하게 여기 놔둔 메뉴임. 님들은 못씀요.<br>[Only the owner has the authority. This is just a menu that I put here for my convenience. You can't use it.]</p>
                    </div>
                </section>
                <section class="col-4 col-12-narrower">
                    <div class="box highlight">
                        <i class="icon solid major fa-wrench"></i>
                        <h3>Probably Important</h3>
                        <p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
                    </div>
                </section>
            </div>
        </div>
    </section>
    <!-- CTA -->
    <section id="cta2" class="wrapper style3">
        <div class="container">
            <header>
                <h2>Are you ready to continue your quest?</h2>
            </header>
        </div>
    </section>
</th:block>
</html>
