<!DOCTYPE html>
<html lang="en" th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page')}"
      xmlns:th="http://www.thymeleaf.org">

<th:block th:fragment="content">

    <div class="page" id="body-wrap">

        <!-- 头部导航栏 -->
        <header class="not-top-img" id="page-header">
            <nav th:replace="~{modules/nav :: nav(title = null)}"></nav>
        </header>
        <main class="layout hide-aside" id="content-inner">
            <div id="page">
                <th:div  th:replace="~{macro/author-content :: author-content(background = ${theme.config.todo.backgroundImg},
                        smallTitle = ${theme.config.todo.smallTitle},
                        bigTitle = ${theme.config.todo.bigTitle},
                        detail = ${theme.config.todo.detail},
                        buttonUrl = '',
                        buttonTitle = '')}" />
                <div id="todolist-main" th:if="${not #lists.isEmpty(theme.config.todo.list)}"
                     th:with="todoList = ${theme.config.todo.list}">


                    <div id="todolist-left-container">
                        <th:block th:each="todo : ${todoList}">
                            <div id="todolist-left" th:if="${#strings.equals(todo.seat, 'left')}">
                                <div class="todolist-item">
                                    <h3 class="todolist-title">[[${todo.class_name}]]</h3>
                                    <ul class="todolist-ul">
                                        <th:block th:if="${not #lists.isEmpty(todo.todo_list)}"
                                                  th:each="data : ${todo.todo_list}">
                                            <li th:class="${data.completed ? 'achieve' : ''}">
                                                <i style="margin-right: 5px;"
                                                   th:class="${data.completed ? 'fa-regular fa-circle-check' : 'fa-regular fa-circle'}">
                                                </i>[[${data.content}]]
                                            </li>
                                        </th:block>
                                    </ul>
                                </div>
                            </div>
                        </th:block>
                    </div>
                    <div id="todolist-right-container">
                        <th:block th:each="todo : ${todoList}">
                            <div id="todolist-right" th:if="${#strings.equals(todo.seat, 'right')}">
                                <div class="todolist-item">
                                    <h3 class="todolist-title">[[${todo.class_name}]]</h3>
                                    <ul>
                                        <th:block th:if="${not #lists.isEmpty(todo.todo_list)}"
                                                  th:each="data : ${todo.todo_list}">
                                            <li th:class="${data.completed ? 'achieve' : ''}">
                                                <i style="margin-right: 5px;"
                                                   th:class="${data.completed ? 'fa-regular fa-circle-check' : 'fa-regular fa-circle'}">
                                                </i>[[${data.content}]]
                                            </li>
                                        </th:block>
                                    </ul>
                                </div>
                            </div>
                        </th:block>
                    </div>


                </div>


                <style>
                    :root {
                        --todo-border: 1px solid #f7a796;
                    }

                    [data-theme=dark] {
                        --todo-border: 1px solid #51908b;
                    }

                    #todolist-main {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        margin: 16px 0 10px
                    }

                    #todolist-main li {
                        list-style: none;
                        font-size: 17px
                    }

                    #todolist-main ul {
                        margin: 0;
                        padding: 0
                    }

                    #todolist-left-container, #todolist-right-container {
                        display: flex;
                        flex-direction: column;
                        justify-content: start;
                        align-items: center;
                        width: 50%;
                    }

                    #todolist-left {
                        width: 100%;
                        padding: 0 8px 0 0
                    }

                    #todolist-right {
                        width: 100%;
                        padding: 0 0 0 8px
                    }

                    .todolist-item {
                        position: relative;
                        background: #fae4df;
                        border-radius: 12px;
                        padding: 10px 1rem 1.2rem;
                        border: 2px dashed #f7a796;
                        margin-bottom: 1rem
                    }

                    @media screen and (max-width: 768px) {
                        #todolist-left-container, #todolist-right-container {
                            width: 100%;
                        }

                        #todolist-left, #todolist-right {
                            padding: 0 0 0 0
                        }
                    }

                    [data-theme=dark] .todolist-item {
                        background: #242424;
                        border: 2px dashed #51908b
                    }


                    h3.todolist-title {
                        margin: 0 !important;
                        border-bottom: var(--todo-border)
                    }

                    .todolist-item li {
                        margin: 0 !important;
                        border-bottom: var(--todo-border);
                    }

                    .todolist-item li::marker {
                        content: none;
                    }

                    li.achieve {
                        opacity: .8;
                        text-decoration: line-through;
                    }
                </style>

                <th:block
                        th:replace="~{modules/comment :: comment(group = 'content.halo.run',
                  kind = 'SinglePage',
                  name = ${singlePage.metadata.name},
                  allowComment = ${singlePage.spec.allowComment})}"/>
            </div>


        </main>
        <!-- 底部 -->
        <footer th:replace="~{modules/footer :: footer}"></footer>
        <!-- 卡片顶部气泡效果 -->
        <script th:if="${theme.config.other.bubbleEnable}" async data-pjax
                th:src="${assets_link + '/libs/canvas/bubble.js'}"></script>
    </div>

</th:block>

</html>