<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<div th:replace="include/header :: head(~{::title}, ~{}, ~{})">
    <title th:text="${globalConfig.websiteName}">开发者客栈</title>
</div>
<body id="body" th:data-toast-message="${toast}" th:data-token="${token}">
<div th:replace="include/navbar :: header"></div>

<div th:replace="include/container :: container_both(~{::left}, ~{::right})">
    <left>
        <!-- 轮播图 -->
        <div th:replace="include/carousel :: carousel('main_carousel', ${homeCarouselList})"></div>

        <!-- 类别筛选 -->
        <div th:replace="include/type-btns :: type_btns(${typeList})"></div>

        <!-- 帖子列表 -->
        <div th:replace="include/article-list :: article_list(${articleList}, false, ${pager})"></div>
    </left>
    <right>
        <!-- 操作按钮 -->
        <div class="card">
            <div class="card-body" style="display: flex;justify-content: space-around;">
                <a th:data-target="${isLogin ? '' : '#loginModal'}"
                   th:data-toggle="${isLogin ? '' : 'modal'}"
                   th:href="${'/article/editor'}"
                   target="_blank"
                   class="btn btn-primary">写文章</a>
                <a th:data-target="${isLogin ? '' : '#loginModal'}"
                   th:data-toggle="${isLogin ? '' : 'modal'}"
                   th:href="${'/faq/editor'}"
                   target="_blank"
                   class="btn btn-outline-primary">提问题</a>
            </div>
        </div>

        <!-- 轮播图 -->
        <div th:replace="include/carousel :: carousel('side_carousel', ${sideCarouselList})"></div>

        <!-- 公告 -->
        <div th:if="${!#lists.isEmpty(sideBarTypes)}"
             th:each="sideBarType : ${sideBarTypes}">
            <div th:replace="include/posts-card :: posts_card(${sideBarType.name}, ${'/?type=' + sideBarType.name}, '/article/', ${sideBarType.postsList})"></div>
        </div>

        <!-- 常见问题 -->
        <div th:replace="include/posts-card :: posts_card('常见问题', '/faq', '/faq/', ${hotFaqList})"></div>

        <!-- 联系我 -->
        <div th:replace="include/img-card :: img_card(${globalConfig.contactMeTitle}, ${globalConfig.contactMeWxQrCode}, '#')"></div>

        <!-- 常用标签 -->
        <div th:replace="include/used-tags :: used_tags('常用标签', ${usedTags})"></div>
    </right>
</div>

<div th:replace="include/footer :: footer"></div>
<script>
    if ($('#body')[0].dataset && $('#body')[0].dataset.toastMessage) {
        toastr.error($('#body')[0].dataset.toastMessage);
    }
    if ($('#body')[0].dataset && $('#body')[0].dataset.token) {
        localStorage.setItem('token', $('#body')[0].dataset.token);
    }
</script>
</body>
</html>