#include("/static/themes/default/inc/layout.html")
#@layout()
#define css()
    <link rel="stylesheet" href="/static/themes/default/static/css/categories.css">
    #include("/static/themes/default/inc/custom_bg.html")
#end
#define content()
    <div class="d-wrapper">
        <div class="d-banner">
            <div class="d-hero-box">
                <h1 class="d-hero-title wow fadeInUp" data-wow-duration="0.2s">分类</h1>
            </div>
        </div>
    </div>
    <section class="d-container">
        <div class="d-c-category-list">
            #categoriesPage(pageSize=20)
                #for(category: categoriesPage.data)
                    <a class="d-c-category" href="#(category.url)">
                        <div class="d-c-category-msg">
                            <span class="d-c-category-name">
                                <i class="fa-regular fa-folder-open"></i>
                                #(category.name)
                            </span>
                            <span class="d-c-category-count">共 #(category.count) 篇文章</span>
                        </div>
                        #if(category.desc != "")
                        <div class="d-c-category-desc">
                            #(category.desc)
                        </div>
                        #end
                    </a>
                #else
                    <span class="d-no-content">暂无分类</span>
                #end

                #if(categoriesPage.pageTotal > 1)
                    <nav class="m-pager-box wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;margin-top: 15px">
                        #if(categoriesPage.hasPrevious)
                        <a class="m-pager previous-page-btn" href="#(categoriesPage.previousUrl)">上一页</a>
                        #end
                        <span>#(categoriesPage.pageNo) / #(categoriesPage.pageTotal)</span>
                        #if(categoriesPage.hasNext)
                        <a class="m-pager next-page-btn" href="#(categoriesPage.nextUrl)">下一页</a>
                        #end
                    </nav>
                #end
            #end
        </div>

    </section>
#end