<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
    th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title = ${title + ' - ' + site.title})}">

<th:block th:fragment="content">

    <div class="page_main uk-width-2-3@m">

        <th:block th:replace="~{modules/header}" />

        <div id="pjax-container" th:with="
            page = ${#lists.isEmpty(param.page) ? 1 : param.page[0]},
            tag = ${#lists.isEmpty(param.tag) ? null : param.tag[0]},
            friendPage = ${#strings.isEmpty(tag) ? (#lists.isEmpty(param.page) ? friends : friendFinder.list(page, friends.size)) : friendFinder.list({'page': page, 'size': friends.size, 'author': tag})}
        ">

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

                    <!-- 作者姓名导航栏（参照图库风格新增） -->
                    <div class="friends_cat_nav">
                        <ul id="cat_nav_items">
                            <li>
                                <!-- 全部按钮 -->
                                <a th:attr="data-href=@{/friends}"
                                    th:classappend="${#strings.isEmpty(tag) ? 'active' : ''}" class="cat-link">
                                    全部<span></span>
                                </a>
                            </li>
                            <!-- 遍历所有作者 -->
                            <th:block th:each="author : ${authors}">
                                <li>
                                    <a th:attr="data-href=@{/friends(tag=${author})}"
                                        th:classappend="${#strings.equals(tag, author) ? 'active' : ''}"
                                        th:text="${author}" class="cat-link">
                                        <span></span>
                                    </a>
                                </li>
                            </th:block>
                        </ul>
                    </div>

                    <div id="post_item" class="moment_list">

                        <div th:each="postInfo, iterstat: ${friendPage.items}" th:id="${'post-'+postInfo.metadata.name}"
                            class="loop_content p_item moment_item uk-animation-slide-bottom-small"
                            th:if="${postInfo.spec != null and not #strings.isEmpty(postInfo.spec.description)}"
                            th:with="spec = ${postInfo.spec}">

                            <div class="p_item_inner">

                                <div class="list_user_meta">
                                    <div class="avatar">
                                        <img th:src="@{${spec.logo}}">
                                    </div>

                                    <div class="name">
                                        <div class="avatar_title">
                                            <a target="_blank" th:href="${spec.authorUrl}">
                                                [[${spec.author}]]
                                            </a>
                                        </div>

                                        <time itemprop="datePublished"
                                            th:datetime="${#dates.format(spec.pubDate, 'yyyy-MM-dd HH:mm')}">
                                            <th:block th:replace="~{modules/widgets/time :: time(${spec.pubDate})}">
                                            </th:block>
                                        </time>
                                    </div>
                                </div>

                                <div class="blog_content">
                                    <div class="entry-content">
                                        <div class="p_title moment-collapse-container">
                                            <a target="_blank" th:href="${spec.postLink}">
                                                <div th:utext="${spec.description}"></div>
                                            </a>
                                        </div>
                                        <!-- 图片列表 -->
                                        <div class="img_list img-dynamic-container">
                                            <div class="list_inner"
                                                th:with="imgRaw=${spec.imageFiles},isImgList=${not #strings.isEmpty(imgRaw)}"
                                                th:attr="num=${isImgList ? #arrays.length(imgRaw.split(',')) : 0}">
                                                <!-- 仅使用 imageFiles；字段缺失或为空时不显示图片 -->
                                                <th:block th:if="${isImgList}">
                                                    <th:block th:with="imgArray=${imgRaw.split(',')}">
                                                        <th:block th:each="url : ${imgArray}"
                                                            th:with="cleanUrl=${#strings.trim(url)}">
                                                            <span class="fancybox mo_img"
                                                                th:if="${not #strings.isEmpty(cleanUrl)}"
                                                                th:href="|/upload/image-host/${cleanUrl}|"
                                                                th:data-fancybox="${'post-' + postInfo.metadata.name}">
                                                                <img class="lazy"
                                                                    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                                                    th:data-src="|/upload/image-host/${cleanUrl}|"
                                                                    alt="">
                                                            </span>
                                                        </th:block>
                                                    </th:block>
                                                </th:block>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 空数据 -->
                        <th:block th:if="${#lists.isEmpty(friendPage.items)}">
                            <th:block th:replace="~{macro/tpl/content-none}" />
                        </th:block>

                    </div>

                    <!-- 分页：必须保持在 blog_list_inner 里面 -->
                    <th:block th:if="${friendPage.totalPages>1}">
                        <div id="t_pagination">
                            <div class="post-paging" th:if="${friendPage.hasNext()}"
                                th:with="_page = ${friendPage.page+1}">
                                <a th:if="${#strings.isEmpty(tag)}"
                                    th:data="@{/friends(page=${_page})}"
                                    th:text="${theme.config.base_set.site_page}">
                                </a>
                                <a th:unless="${#strings.isEmpty(tag)}"
                                    th:data="@{/friends(tag=${tag},page=${_page})}"
                                    th:text="${theme.config.base_set.site_page}">
                                </a>
                            </div>
                        </div>
                    </th:block>

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

                </div>
            </div>

        </div>

        <th:block th:replace="~{modules/footer-main}" />

    </div>
</th:block>

</html>
