<?xml version="1.0"?>
<thlogic>
    <attr sel="#header" th:replace="header :: header" />
    <attr sel="#footer" th:replace="footer :: footer" />

    <attr sel="#article-main" th:object="${article}">
        <attr sel="#article-header/h1" th:text="*{title}" />
        <attr sel="#nickname" th:text="*{nickname}" />
        <attr sel="#email" th:text="*{email}" />
        <attr sel="#created-at" th:datetime="*{createdAt}" th:text="*{#temporals.format(createdAt, 'yyyy-MM-dd HH:mm:ss')}" />
        <attr sel="#hashtag" th:each="hashtag : ${article.hashtags}">
            <attr sel="a"
                  th:text="'#' + ${hashtag}"
                  th:href="@{/articles(searchType=${searchTypeHashtag},searchValue=${hashtag})}"
            />
        </attr>

        <attr sel="#article-content/pre" th:text="*{content}" />

        <attr sel="#article-buttons" th:if="${#authorization.expression('isAuthenticated()')} and *{userId} == ${#authentication.name}">
            <attr sel="#delete-article-form" th:action="'/articles/' + *{id} + '/delete'" th:method="post">
                <attr sel="#update-article" th:href="'/articles/' + *{id} + '/form'" />
            </attr>
        </attr>

        <attr sel=".article-id" th:name="articleId" th:value="*{id}" />
        <attr sel=".comment-form" th:action="@{/comments/new}" th:method="post">
            <attr sel=".comment-textbox" th:name="content" />
        </attr>

        <attr sel="#article-comments" th:remove="all-but-first">
            <attr sel=".parent-comment[0]" th:each="articleComment : ${articleComments}">
                <attr sel=".comment-delete-form" th:action="'/comments/' + ${articleComment.id} + '/delete'" th:method="post">
                    <attr sel="div/strong" th:text="${articleComment.nickname}" />
                    <attr sel="div/small/time" th:datetime="${articleComment.createdAt}" th:text="${#temporals.format(articleComment.createdAt, 'yyyy-MM-dd HH:mm:ss')}" />
                    <attr sel="div/p" th:text="${articleComment.content}" />
                    <attr sel="button" th:if="${#authorization.expression('isAuthenticated()')} and ${articleComment.userId} == ${#authentication.name}" />
                </attr>
                <attr sel="ul" th:if="${!articleComment.childComments.isEmpty}" th:remove="all-but-first">
                    <attr sel=".child-comment[0]" th:each="childComment : ${articleComment.childComments}">
                        <attr sel=".comment-delete-form" th:action="'/comments/' + ${childComment.id} + '/delete'" th:method="post">
                            <attr sel="div/strong" th:text="${childComment.nickname}" />
                            <attr sel="div/small/time" th:datetime="${childComment.createdAt}" th:text="${#temporals.format(childComment.createdAt, 'yyyy-MM-dd HH:mm:ss')}" />
                            <attr sel="div/p" th:text="${childComment.content}" />
                            <attr sel="button" th:if="${#authorization.expression('isAuthenticated()')} and ${childComment.userId} == ${#authentication.name}" />
                        </attr>
                    </attr>
                </attr>
            </attr>
            <attr sel=".parent-comment-id" th:name="parentCommentId" th:value="${articleComment.id}" />
        </attr>

        <attr sel="#pagination">
            <attr sel="ul">
                <attr sel="li[0]/a"
                      th:href="*{id} - 1 <= 0 ? '#' : |/articles/*{id - 1}|"
                      th:class="'page-link' + (*{id} - 1 <= 0 ? ' disabled' : '')"
                />
                <attr sel="li[1]/a"
                      th:href="*{id} + 1 > ${totalCount} ? '#' : |/articles/*{id + 1}|"
                      th:class="'page-link' + (*{id} + 1 > ${totalCount} ? ' disabled' : '')"
                />
            </attr>
        </attr>
    </attr>
</thlogic>