<!doctype html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(content = ~{::content}, showAside = true, pageTitle = '追番', head = ~{::head})}"
>
  <th:block th:fragment="head">
    <th:block th:replace="~{modules/head :: bangumis-head}" />
  </th:block>
  <div th:fragment="content">
    <div class="page-header">
      <div class="page-title">
        <span class="icon-[ph--television-bold]"></span>
        <h1 class="text-creative">追番</h1>
      </div>
    </div>

    <nav class="bangumi-tags scrollcheck-x" th:with="allBangumis=${bangumiFinder.list({size: 1})}">
      <a
        th:href="@{/bangumis(status=0)}"
        class="tag-item"
        th:classappend="${#lists.isEmpty(param.status) or #lists.contains(param.status, '0') ? 'active' : ''}"
      >
        <span>全部</span>
        <span class="tag-count" th:if="${allBangumis != null && allBangumis.total > 0}" th:text="${allBangumis.total}"
          >0</span
        >
      </a>
      <a
        th:href="@{/bangumis(status=1)}"
        class="tag-item"
        th:classappend="${param.status != null and #lists.contains(param.status, '1') ? 'active' : ''}"
        th:with="wantWatch=${bangumiFinder.list({status: 1, size: 1})}"
      >
        <span>想看</span>
        <span class="tag-count" th:if="${wantWatch != null && wantWatch.total > 0}" th:text="${wantWatch.total}"
          >0</span
        >
      </a>
      <a
        th:href="@{/bangumis(status=2)}"
        class="tag-item"
        th:classappend="${param.status != null and #lists.contains(param.status, '2') ? 'active' : ''}"
        th:with="watching=${bangumiFinder.list({status: 2, size: 1})}"
      >
        <span>在看</span>
        <span class="tag-count" th:if="${watching != null && watching.total > 0}" th:text="${watching.total}">0</span>
      </a>
      <a
        th:href="@{/bangumis(status=3)}"
        class="tag-item"
        th:classappend="${param.status != null and #lists.contains(param.status, '3') ? 'active' : ''}"
        th:with="watched=${bangumiFinder.list({status: 3, size: 1})}"
      >
        <span>已看</span>
        <span class="tag-count" th:if="${watched != null && watched.total > 0}" th:text="${watched.total}">0</span>
      </a>
    </nav>

    <div class="bangumi-tabs-content">
      <div class="bangumi-tab-pane active">
        <div class="bangumi-list">
          <div th:each="bangumi : ${bangumis.items}" class="bangumi-item">
            <img
              th:src="${#strings.replace(bangumi.spec.cover, 'http://', '//')}"
              th:alt="${bangumi.spec.title}"
              class="bangumi-cover"
              loading="lazy"
              referrerpolicy="no-referrer"
            />

            <div class="bangumi-info">
              <h2 th:text="${bangumi.spec.title}">番剧标题</h2>
              <div class="bangumi-meta">
                <span th:text="'类型: ' + ${bangumi.spec.type}">类型</span>
                <span th:text="'地区: ' + ${bangumi.spec.area}">地区</span>
                <span th:text="'集数: ' + ${bangumi.spec.totalCount}">集数</span>
              </div>

              <div class="bangumi-stats">
                <span th:text="'关注: ' + ${bangumi.spec.follow}">关注</span>
                <span th:text="'观看: ' + ${bangumi.spec.view}">观看</span>
                <span th:text="'弹幕: ' + ${bangumi.spec.danmaku}">弹幕</span>
                <span th:text="'投币: ' + ${bangumi.spec.coin}">投币</span>
                <span th:text="'评分: ' + ${bangumi.spec.score}">评分</span>
              </div>

              <p class="bangumi-des" th:text="${bangumi.spec.des}">简介</p>

              <a th:if="${bangumi.spec.url}" th:href="${bangumi.spec.url}" target="_blank" class="bangumi-link">
                查看详情
              </a>
            </div>
          </div>

          <th:block th:replace="~{modules/pagination :: pagination(data=${bangumis})}" />
        </div>
      </div>
    </div>
  </div>
</html>
