<!DOCTYPE html>
<html lang="en" th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'bangumis')}"
      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">
                <h1 class="page-title" style="display: inline;">追番列表</h1>
                <div id="article-container">
                    <blockquote>
                        <p>生命不息，追番不止！</p>
                    </blockquote>
                    <style>
                        .bangumi-tabs {
                            margin-bottom: 15px;
                            margin-top: 15px
                        }

                        .bangumi-tab {
                            padding: 5px
                        }

                        a.bangumi-tab {
                            text-decoration: none
                        }

                        .bangumi-active {
                            background: #657b83;
                            color: #fff
                        }

                        .bangumi-item {
                            position: relative;
                            clear: both;
                            padding: 10px 0;
                            border-bottom: 1px solid #ddd;
                            min-height: 180px
                        }

                        @media screen and (max-width: 600px) {
                            .bangumi-item {
                                width: 100%
                            }
                        }

                        .bangumi-picture {
                            position: absolute;
                            left: 0;
                            top: 10px;
                            width: 110px
                        }

                        .bangumi-picture img {
                            margin: 10px 0
                        }

                        .bangumi-info {
                            padding-left: 120px;
                            margin-top: 10px
                        }

                        .bangumi-meta {
                            font-size: 12px;
                            padding-right: 10px;
                            height: 45px
                        }

                        .bangumi-comments {
                            font-size: 12px;
                            margin-top: 10px
                        }

                        .bangumi-comments > p {
                            word-break: break-all;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: normal;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 3
                        }

                        .bangumi-pagination {
                            margin-top: 15px;
                            text-align: center;
                            margin-bottom: 10px
                        }

                        .bangumi-button {
                            padding: 5px
                        }

                        .bangumi-button:hover {
                            background: #657b83;
                            color: #fff
                        }

                        .bangumi-hide {
                            display: none
                        }

                        .bangumi-show {
                            display: block
                        }

                        .bangumi-title {
                            font-size: 18px
                        }

                        .bangumi-title a {
                            line-height: 1;
                            text-decoration: none
                        }

                        .bangumi-info-items {
                            font-size: 12px;
                            color: #2fd8d8;
                            padding-top: 10px;
                            line-height: 1;
                            float: left;
                            width: 100%
                        }

                        .bangumi-info-item {
                            display: inline-block;
                            width: 13%;
                            border-right: 1px solid #2fd8d8;
                            text-align: center;
                            height: 34px
                        }

                        .bangumi-info-label {
                            display: block;
                            line-height: 12px
                        }

                        .bangumi-info-item em {
                            display: block;
                            padding-top: 6px;
                            line-height: 17px;
                            font-style: normal;
                            font-weight: 700
                        }

                        .bangumi-info-total {
                            padding-top: 11px;
                            display: block;
                            line-height: 12px;
                            font-weight: 700
                        }

                        .bangumi-info-item-score {
                            border-right: 1px solid #0000;
                            width: 50px
                        }

                        .bangumi-info-label-em {
                            color: transparent;
                            opacity: 0;
                            visibility: hidden;
                            line-height: 6px !important;
                            padding: 0 !important
                        }

                        @media (max-width: 650px) {

                            .bangumi-coin,
                            .bangumi-type {
                                display: none
                            }

                            .bangumi-info-item {
                                width: 16%
                            }
                        }

                        @media (max-width: 590px) {

                            .bangumi-danmaku,
                            .bangumi-wish {
                                display: none
                            }

                            .bangumi-info-item {
                                width: 19%
                            }
                        }

                        @media (max-width: 520px) {

                            .bangumi-doing,
                            .bangumi-play {
                                display: none
                            }

                            .bangumi-info-item {
                                width: 24%
                            }
                        }

                        @media (max-width: 480px) {

                            .bangumi-collect,
                            .bangumi-follow {
                                display: none
                            }

                            .bangumi-info-item {
                                width: 30%
                            }
                        }

                        @media (max-width: 400px) {
                            .bangumi-area {
                                display: none
                            }

                            .bangumi-info-item {
                                width: 45%
                            }
                        }

                        .bangumi-my-comments {
                            border: 1px dashed #8f8f8f;
                            padding: 3px;
                            border-radius: 5px;
                            margin-left: -120px
                        }

                        .bangumi-starstop {
                            background: url(https://cdn.jsdelivr.net/npm/hexo-bilibili-bangumi@1.7.9/lib/img/rate_star_2x.png) 100% 100%/10px 19.5px repeat-x;
                            height: 10px;
                            width: 50px;
                            display: inline-block;
                            float: none
                        }

                        .bangumi-starlight {
                            background: url(https://cdn.jsdelivr.net/npm/hexo-bilibili-bangumi@1.7.9/lib/img/rate_star_2x.png) 0 0/10px 19.5px repeat-x;
                            height: 10px;
                            display: block;
                            width: 100%
                        }

                        .bangumi-starlight.stars1 {
                            width: 5px
                        }

                        .bangumi-starlight.stars2 {
                            width: 10px
                        }

                        .bangumi-starlight.stars3 {
                            width: 15px
                        }

                        .bangumi-starlight.stars4 {
                            width: 20px
                        }

                        .bangumi-starlight.stars5 {
                            width: 25px
                        }

                        .bangumi-starlight.stars6 {
                            width: 30px
                        }

                        .bangumi-starlight.stars7 {
                            width: 35px
                        }

                        .bangumi-starlight.stars8 {
                            width: 40px
                        }

                        .bangumi-starlight.stars9 {
                            width: 45px
                        }

                        .bangumi-starlight.stars10 {
                            width: 50px
                        }

                        #article-container .bangumi-picture a {
                            padding-left: 0px;
                            padding-right: 0px;
                            border-bottom-width: 0px;
                        }

                        #page #article-container .bangumi-tab.bangumi-active {
                            background: var(--heo-theme);
                            color: var(--heo-ahoverbg);
                            border-radius: 10px;
                        }

                        #page #article-container .bangumi-tabs .bangumi-tab {
                            border-bottom: none;
                            border-radius: 10px;
                        }

                        #page #article-container .bangumi-tabs a.bangumi-tab:hover {
                            text-decoration: none !important;
                            border-radius: 10px;
                            column-gap: var(--heo-ahoverbg);
                        }

                        #page #article-container .bangumi-pagination a.bangumi-button {
                            border-bottom: none;
                            border-radius: 10px;
                        }

                        .bangumi-button:hover {
                            background: var(--heo-theme) !important;
                            border-radius: 10px !important;
                            color: var(--heo-ahoverbg) !important;
                        }

                        a.bangumi-button.bangumi-nextpage:hover {
                            text-decoration: none !important;
                        }

                        .bangumi-button {
                            padding: 5px 10px !important;
                        }

                        a.bangumi-tab {
                            padding: 5px 10px !important;
                        }

                        svg.icon.faa-tada {
                            font-size: 1.1em;
                        }

                        .bangumi-info-item {
                            border-right: 1px solid #f2b94b;
                        }

                        .bangumi-info-item span {
                            color: #f2b94b;
                        }

                        .bangumi-info-item em {
                            color: #f2b94b;
                        }
                    </style>

                    <div class="bangumi-tabs">
                        <a class="bangumi-tab" id="bangumi-tab1" href="javascript:;" rel="external" target="_self"
                           onclick="return false" data-pjax-state="">
                            想看
                            ([[${bangumiFinder.getDataTotal(1,1)}]])</a>
                        <a class="bangumi-tab bangumi-active" id="bangumi-tab2" href="javascript:;" rel="external"
                           target="_self" onclick="return false" data-pjax-state="">
                            在看
                            ([[${bangumiFinder.getDataTotal(1,2)}]])</a>
                        <a class="bangumi-tab" id="bangumi-tab3" href="javascript:;" rel="external" target="_self"
                           onclick="return false" data-pjax-state="">
                            已看
                            ([[${bangumiFinder.getDataTotal(1,3)}]])</a>
                    </div>
                    <div>
                        <div id="bangumi-item1" class="bangumi-hide">
                            <th:block th:each="bangumi : ${bangumiFinder.getBiliDataAll(1,1)}">
                                <th:block th:replace="~{macro/bangumi-item :: bangumi-item(${bangumi.spec})}"/>
                            </th:block>
                            <div class="bangumi-pagination">
                                <a class="bangumi-button bangumi-firstpage" href="javascript:;" target="_self"
                                   onclick="return false" data-pjax-state=""> 首页</a>
                                <a class="bangumi-button bangumi-previouspage" href="javascript:;" target="_self"
                                   onclick="return false" data-pjax-state="">上一页</a>
                                <span class="bangumi-pagenum">1 / 1</span>
                                <a class="bangumi-button bangumi-nextpage" href="javascript:;" target="_self"
                                   onclick="return false" data-pjax-state="">下一页</a>
                                <a class="bangumi-button bangumi-lastpage" href="javascript:;" target="_self"
                                   onclick="return false" data-pjax-state="">尾页</a>
                            </div>
                        </div>
                        <div id="bangumi-item2" class="bangumi-show">
                            <th:block th:each="bangumi : ${bangumiFinder.getBiliDataAll(1,2)}">
                                <th:block th:replace="~{macro/bangumi-item :: bangumi-item(${bangumi.spec})}"/>
                            </th:block>
                            <div class="bangumi-pagination">
                                <a class="bangumi-button bangumi-firstpage" href="javascript:;" target="_self"
                                   onclick="return false" data-pjax-state=""> 首页</a>
                                <a class="bangumi-button bangumi-previouspage" href="javascript:;" target="_self"
                                   onclick="return false" data-pjax-state="">上一页</a>
                                <span class="bangumi-pagenum">1 / 1</span>
                                <a class="bangumi-button bangumi-nextpage" href="javascript:;" target="_self"
                                   onclick="return false" data-pjax-state="">下一页</a>
                                <a class="bangumi-button bangumi-lastpage" href="javascript:;" target="_self"
                                   onclick="return false" data-pjax-state="">尾页</a>
                            </div>
                        </div>
                        <div id="bangumi-item3" class="bangumi-hide">
                            <th:block th:each="bangumi : ${bangumiFinder.getBiliDataAll(1,3)}">
                                <th:block th:replace="~{macro/bangumi-item :: bangumi-item(${bangumi.spec})}"/>
                            </th:block>
                            <div class="bangumi-pagination">
                                <a class="bangumi-button bangumi-firstpage" href="javascript:;" target="_self"
                                   onclick="return false" data-pjax-state=""> 首页</a>
                                <a class="bangumi-button bangumi-previouspage" href="javascript:;" target="_self"
                                   onclick="return false" data-pjax-state="">上一页</a>
                                <span class="bangumi-pagenum">1 / 1</span>
                                <a class="bangumi-button bangumi-nextpage" href="javascript:;" target="_self"
                                   onclick="return false" data-pjax-state="">下一页</a>
                                <a class="bangumi-button bangumi-lastpage" href="javascript:;" target="_self"
                                   onclick="return false" data-pjax-state="">尾页</a>
                            </div>
                        </div>
                    </div>
                    <script>
                        (function () {
                            const bangumiLazyload = false;
                            "use strict";/* eslint-disable no-plusplus */
                            (function () {// eslint-disable-next-line func-style
                                function a() {
                                    this.classList.add("bangumi-active");
                                    for (var a = this.siblings(), b = 0; b < a.length; b++) a[b].classList.remove("bangumi-active");// 显示对应板块
                                    var c = this.id.replace("tab", "item"), d = document.getElementById(c);
                                    d.classList.remove("bangumi-hide"), d.classList.add("bangumi-show"), a = document.getElementById(c).siblings();
                                    for (var e = 0; e < a.length; e++) a[e].classList.remove("bangumi-show"), a[e].classList.add("bangumi-hide")
                                }

                                Element.prototype.siblings = function () {
                                    for (var a = [], b = this.parentNode.children, c = 0; c < b.length; c++) b[c] !== this && a.push(b[c]);
                                    return a
                                };
                                for (var b = document.getElementsByClassName("bangumi-tab"), c = 0; c < b.length; c++) b[c].onclick = a, b[c].onclick.apply(b[c]);
                                "undefined" != typeof pagenumsPre && axios.get(new URL("../bangumis.json", window.location.href)).then(function (a) {
                                    if (a.data) {
                                        var b = {
                                            wantWatch: a.data.wantWatch.slice(10).map(function (a) {
                                                return ejs.render(ejsTemplate, {
                                                    item: a,
                                                    loading: loading,
                                                    metaColor: metaColor,
                                                    type: type
                                                })
                                            }).join("\n"), watching: a.data.watching.slice(10).map(function (a) {
                                                return ejs.render(ejsTemplate, {
                                                    item: a,
                                                    loading: loading,
                                                    metaColor: metaColor,
                                                    type: type
                                                })
                                            }).join("\n"), watched: a.data.watched.slice(10).map(function (a) {
                                                return ejs.render(ejsTemplate, {
                                                    item: a,
                                                    loading: loading,
                                                    metaColor: metaColor,
                                                    type: type
                                                })
                                            }).join("\n")
                                        };
                                        document.querySelectorAll("#bangumi-item1>.bangumi-pagination")[0].insertAdjacentHTML("beforeBegin", b.wantWatch), document.querySelectorAll("#bangumi-item2>.bangumi-pagination")[0].insertAdjacentHTML("beforeBegin", b.watching), document.querySelectorAll("#bangumi-item3>.bangumi-pagination")[0].insertAdjacentHTML("beforeBegin", b.watched)
                                    }
                                })
                            })();
                            document.getElementsByClassName('bangumi-tab')[1].click();
                            /* eslint-disable no-plusplus, func-style */
                            (function () {
                                var a = Math.ceil;

                                function b(b, c) {
                                    return `${b + 1} / ${a(0 == c.length / 10 ? 1 : a(c.length / 10))}`
                                }

                                function c() {
                                    const a = this.parentNode.siblings();
                                    g(a, 0), this.parentNode.getElementsByClassName("bangumi-pagenum")[0].innerText = b(0, a)
                                }

                                function d() {
                                    const a = this.parentNode.siblings();
                                    let c = this.parentNode.getElementsByClassName("bangumi-pagenum")[0].innerText;
                                    c = c.substr(0, c.indexOf("/") - 1), c = parseInt(c, 10) - 1, 0 < c && c--, g(a, c), this.parentNode.getElementsByClassName("bangumi-pagenum")[0].innerText = b(c, a)
                                }

                                function e() {
                                    const c = this.parentNode.siblings();
                                    let d = this.parentNode.getElementsByClassName("bangumi-pagenum")[0].innerText;
                                    d = d.substr(0, d.indexOf("/") - 1), d = parseInt(d, 10) - 1, d < a(c.length / 10) - 1 && d++, g(c, d), this.parentNode.getElementsByClassName("bangumi-pagenum")[0].innerText = b(d, c)
                                }

                                function f() {
                                    const c = this.parentNode.siblings();
                                    g(c, a(c.length / 10) - 1), this.parentNode.getElementsByClassName("bangumi-pagenum")[0].innerText = b(-1 == a(c.length / 10) - 1 ? 0 : a(c.length / 10) - 1, c)
                                }

                                function g(a, b) {
                                    for (let c = 0; c < a.length; c++) if (Math.floor(c / 10) === b) {
                                        a[c].classList.remove("bangumi-hide");
                                        const [b] = a[c].getElementsByTagName("img");
                                        bangumiLazyload && (b.src = b.getAttribute("data-src"))
                                    } else a[c].classList.add("bangumi-hide")
                                }

                                const h = document.getElementsByClassName("bangumi-firstpage"),
                                    j = document.getElementsByClassName("bangumi-previouspage"),
                                    k = document.getElementsByClassName("bangumi-nextpage"),
                                    l = document.getElementsByClassName("bangumi-lastpage"),
                                    m = document.getElementsByClassName("bangumi-pagenum");
                                for (let b = 0; b < h.length; b++) {
                                    h[b].onclick = c, j[b].onclick = d, k[b].onclick = e, l[b].onclick = f;// set page num
                                    const g = "undefined" == typeof pagenumsPre ? m[b].parentNode.siblings().length : pagenumsPre[b] ?? m[b].parentNode.siblings().length;
                                    h[b].click(), m[b].innerText = `1 / ${0 === a(g / 10) ? 1 : a(g / 10)}`
                                }
                            })();
                        })();
                    </script>
                </div>
                <hr>
                <!--/* 评论组件 */-->
                <th:block
                        th:replace="~{modules/comment :: comment(group = 'content.halo.run',
                  kind = 'SinglePage',
                  name = 'bangumis',
                  allowComment = true)}"/>
            </div>


        </main>
        <!-- 底部 -->
        <footer th:replace="~{modules/footer :: footer}"></footer>
    </div>

</th:block>

</html>