<th:block th:fragment="equipment-page(equipmentPage,equipmentGroups,selectedTag)">

    <div class="blog_list equipments_page">
        <div class="blog_list_inner" uk-height-viewport="offset-top: true">

            <div class="friends_cat_nav equipments_cat_nav">
                <ul id="cat_nav_items">
                    <li>
                        <a th:attr="data-href=@{/qiyu}"
                            th:classappend="${#strings.isEmpty(selectedTag) ? 'active' : ''}"
                            class="cat-link">
                            <span>全部</span>
                        </a>
                    </li>
                    <li th:each="group : ${equipmentGroups}">
                        <a th:attr="data-href=@{/qiyu(tag=${group.spec.displayName})}"
                            th:classappend="${#strings.equals(selectedTag, group.spec.displayName) or #strings.equals(selectedTag, group.metadata.name) ? 'active' : ''}"
                            class="cat-link">
                            <span th:text="${group.spec.displayName}">分组</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div id="post_item" class="moment_list equipment_list">
                <article th:each="equipment : ${equipmentPage.items}"
                    class="loop_content p_item moment_item equipment_item uk-animation-slide-bottom-small"
                    th:if="${equipment.spec != null and not #strings.isEmpty(equipment.spec.cover)}">

                    <div class="p_item_inner equipment_card_inner">
                        <div class="equipment_visual">
                            <img loading="lazy" th:src="${equipment.spec.cover}"
                                th:alt="${equipment.spec.description}">
                            <span class="equipment_overlay"
                                th:if="${not #strings.isEmpty(equipment.spec.description)}">
                                <span class="equipment_description" th:text="${equipment.spec.description}">描述</span>
                            </span>
                        </div>
                    </div>
                </article>

                <th:block th:if="${#lists.isEmpty(equipmentPage.items)}">
                    <th:block th:replace="~{macro/tpl/content-none}" />
                </th:block>
            </div>

            <th:block th:if="${equipmentPage.totalPages > 1}">
                <div id="t_pagination">
                    <div class="post-paging" th:with="_page = ${equipmentPage.page + 1}">
                        <a th:if="${equipmentPage.hasNext() and #strings.isEmpty(selectedTag)}"
                            th:attr="data=@{/qiyu(page=${_page})}"
                            th:text="${theme.config.base_set.site_page}"></a>
                        <a th:if="${equipmentPage.hasNext() and not #strings.isEmpty(selectedTag)}"
                            th:attr="data=@{/qiyu(tag=${selectedTag},page=${_page})}"
                            th:text="${theme.config.base_set.site_page}"></a>
                        <form class="page-jump-form" method="get" action="/qiyu">
                            <span class="page-jump-label">转到</span>
                            <input th:if="${not #strings.isEmpty(selectedTag)}" type="hidden" name="tag"
                                th:value="${selectedTag}" />
                            <span class="page-jump-input-wrap">
                                <button class="page-jump-step page-jump-step-down" type="button"
                                    title="减少页码" aria-label="减少页码">
                                    <i class="ri-subtract-line" aria-hidden="true"></i>
                                </button>
                                <input class="page-jump-input" type="number" name="page" min="1"
                                    th:max="${equipmentPage.totalPages}" th:value="${equipmentPage.page}"
                                    inputmode="numeric" aria-label="页码" autocomplete="off" required />
                                <button class="page-jump-step page-jump-step-up" type="button"
                                    title="增加页码" aria-label="增加页码">
                                    <i class="ri-add-line" aria-hidden="true"></i>
                                </button>
                            </span>
                            <span class="page-jump-total">/ [[${equipmentPage.totalPages}]]</span>
                            <button class="page-jump-submit" type="submit" title="跳转到指定页"
                                aria-label="跳转到指定页">
                                <i class="ri-arrow-right-line" aria-hidden="true"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </th:block>

            <div id="comment_form_reset"></div>

        </div>
    </div>
</th:block>
