<!DOCTYPE html>
<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
        layout:decorate="~{layout/default_layout}">
<head>
    <title>Bookmarks</title>
    <style>
        /* --- [수정] 북마크 이미지 영역 스크롤 및 카드 크기 고정 --- */

        /* 1. 각 북마크 카드의 전체 높이를 720px로 고정합니다. */
        .swiper-slide .box.feature {
            height: 720px;
            padding-bottom: 50px;
        }

        /* 2. 여러 이미지를 담는 컨테이너의 스타일을 정의합니다. */
        .image-flick-container {
            height: 450px;             /* 이미지 영역의 높이를 450px로 고정합니다. (값 조절 가능) */
            overflow-y: auto;          /* 이 높이를 넘어가는 이미지는 세로 스크롤됩니다. */
            border: 1px solid #eee;
            border-radius: 5px;
            background-color: #f0f0f0; /* 스크롤 영역 배경색을 살짝 추가 */
            margin-bottom: 1em;        /* 이미지 영역과 텍스트 영역 사이의 간격 */
        }

        /* 3. 스크롤 영역 내부의 이미지 스타일을 지정합니다. */
        .image-flick-container img {
            width: 100%;              /* 이미지를 컨테이너 너비에 맞춥니다. */
            height: auto;             /* 이미지 비율을 유지합니다. */
            display: block;
            margin-bottom: 10px;      /* 이미지들 사이에 약간의 간격을 줍니다. */
        }

        .image-flick-container img:last-child {
            margin-bottom: 0;
        }

        /* 4. (선택) 스크롤바 디자인을 개선합니다. */
        .image-flick-container::-webkit-scrollbar {
            width: 8px;
        }

        .image-flick-container::-webkit-scrollbar-track {
            background: #e9e9e9;
        }

        .image-flick-container::-webkit-scrollbar-thumb {
            background: #bbb;
            border-radius: 10px;
        }

        .image-flick-container::-webkit-scrollbar-thumb:hover {
            background: #999;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const swiper = new Swiper('.bookmark-swiper', {
                loop: false,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        });
    </script>
</head>
<th:block layout:fragment="content">
    <section class="wrapper style2">
        <div class="container">
            <header class="major">
                <h2>Bookmarks</h2>
                <p>다른 사용자들이 저장한 유용한 페이지들을 둘러보세요.</p>
                <div class="filter-controls" style="margin-bottom: 2em; text-align: center;">
                    <div style="margin-bottom: 1em;">
                        <strong>카테고리:</strong>
                        <a th:href="@{/bookmarks}" th:classappend="${currentCategory == null && currentTag == null} ? 'button small' : 'button alt small'">전체</a>
                        <a th:each="cat : ${allCategories}"
                           th:href="@{/bookmarks(category=${cat})}"
                           th:text="${cat}"
                           th:classappend="${currentCategory == cat} ? 'button small' : 'button alt small'"></a>
                    </div>
                    <div>
                        <strong>태그:</strong>
                        <a th:each="tg : ${allTags}"
                           th:href="@{/bookmarks(tag=${tg})}"
                           th:text="'#' + ${tg}"
                           th:classappend="${currentTag == tg} ? 'button small' : 'button alt small'"></a>
                    </div>
                </div>
            </header>
        </div>
    </section>

    <section class="wrapper style1">
        <div class="container">
            <div class="swiper bookmark-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" th:each="bookmark : ${bookmarksPage.content}">
                        <section class="box feature" style="margin: 0; height: 100%; display: flex; flex-direction: column;">

                            <div th:switch="${bookmark.bookmarkType}">
                                <div th:case="'IMAGE'" class="image-flick-container">
                                    <th:block th:each="image : ${bookmark.images}" th:if="${image.isVisible}">
                                        <img th:src="${apiBaseUrl + image.url}" alt="Bookmark Image" />
                                    </th:block>
                                </div>
                                <div th:case="'VIDEO'" class="video-container bookmark-image-container">
                                    <th:block th:each="image : ${bookmark.images}" th:if="${image.isVisible and #lists.size(bookmark.images) > 0}">
                                        <video controls style="width: 100%;">
                                            <source th:src="${apiBaseUrl + image.url}" type="video/mp4">
                                        </video>
                                    </th:block>
                                </div>
                                <a th:case="'URL'"
                                   href="javascript:void(0);"
                                   th:data-url="${bookmark.url}"
                                   th:data-title="${bookmark.title}"
                                   onclick="showBookmarkOptions(this)" class="bookmark-image-container">
                                    <th:block th:each="image : ${bookmark.images}" th:if="${image.isVisible}">
                                        <img th:src="${apiBaseUrl + mage.url}" alt="Bookmark Image" />
                                    </th:block>
                                </a>
                            </div>

                            <div class="inner" style="flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;">
                                <div>
                                    <header>
                                        <h3 th:text="${bookmark.title}">북마크 제목</h3>
                                        <p th:if="${bookmark.userComment}" th:text="${bookmark.userComment}"></p>
                                    </header>
                                    <div class="bookmark-meta-container" style="margin: 1em 0;">
                                        <div th:if="${bookmark.category != null and !#strings.isEmpty(bookmark.category)}">
                                            <span class="tag-item" th:text="${bookmark.category}"></span>
                                        </div>
                                        <div th:if="${bookmark.tags != null and !#lists.isEmpty(bookmark.tags)}">
                                            <span th:each="tag : ${bookmark.tags}" class="tag-item" th:text="'#' + ${tag}"></span>
                                        </div>
                                    </div>
                                    <p th:text="${#strings.abbreviate(bookmark.description, 100)}"></p>
                                </div>

                                <div>
                                    <div class="vote-controls" style="margin-top: 1em; text-align: center;" th:data-bookmark-id="${bookmark.id}">
                                        <button class="button small" onclick="handleBookmarkVote(this, 'like')">
                                            👍 Like (<span class="like-count" th:text="${bookmark.voteCount}">0</span>)
                                        </button>
                                        <button class="button small" onclick="handleBookmarkVote(this, 'unlike')">
                                            👎 Unlike (<span class="unlike-count" th:text="${bookmark.unlikeCount}">0</span>)
                                        </button>
                                        <button class="button alt small" th:onclick="toggleCommentSection([[${bookmark.id}]])">
                                            💬 Comments
                                        </button>
                                        <button class="button alt small"
                                                th:if="${#authentication.principal != null && #authentication.principal instanceof T(org.springframework.security.core.userdetails.UserDetails) && #authentication.principal.username == bookmark.userId}"
                                                th:data-bookmark-id="${bookmark.id}"
                                                onclick="openBookmarkEditPopup(this)">
                                            ✏️ 수정
                                        </button>
                                    </div>

                                    <section class="comment-section" th:id="|comment-section-${bookmark.id}|" style="display: none; margin-top: 1em; text-align: left;">

                                        <th:block sec:authorize="isAuthenticated()">
                                            <div class="comment-form-container">
                                                <textarea th:id="|comment-input-${bookmark.id}|" placeholder="댓글을 입력하세요..." style="width: 100%;"></textarea>
                                                <button th:onclick="submitBookmarkComment([[${bookmark.id}]])" class="button small" style="margin-top: 0.5em;">등록</button>
                                            </div>
                                        </th:block>

                                        <div sec:authorize="isAnonymous()" style="padding: 1em; text-align: center; border: 1px dashed #ccc; margin-bottom: 1em;">
                                            <p style="margin:0;">댓글을 작성하려면 <a href="javascript:void(0);" class="open-login-popup" to="#loginPopup">로그인</a>이 필요합니다.</p>
                                        </div>

                                        <div th:id="|comments-list-${bookmark.id}|" style="margin-top: 1em;">
                                        </div>
                                    </section>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>

            <div th:if="${bookmarksPage.empty}">
                <p style="text-align: center;">아직 저장된 페이지가 없습니다.</p>
            </div>
        </div>
    </section>
    <div class="container" style="text-align:center;">
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-9504446465764716" data-ad-slot="1234567890" data-ad-format="auto"
             data-full-width-responsive="true"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>
</th:block>
</html>