<!doctype html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{kr/iotdoor/comn/site/layout/cmmnSiteLayout.html}">

<th:block layout:fragment="content">
    <div class="container-xxl py-5">
        <div class="container">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 720px">
                <h6 class="text-primary">Portfolio</h6>
                <h1 class="mb-4">시공 사례 및 제품 포트폴리오</h1>
                <p class="mb-0">대표 이미지, 상세 내용, 등록일시, 조회수까지 포함한 포트폴리오를 관리자 화면에서 직접 관리할 수 있습니다.</p>
            </div>

            <div th:if="${#lists.isEmpty(portfolioItems)}" class="text-center text-secondary py-5">
                아직 등록된 포트폴리오가 없습니다.
            </div>

            <div th:unless="${#lists.isEmpty(portfolioItems)}" class="row g-4">
                <div class="col-md-6 col-lg-4 wow fadeInUp"
                     data-wow-delay="0.1s"
                     th:each="item : ${portfolioItems}">
                    <div class="service-item rounded overflow-hidden h-100">
                        <a th:href="@{/portfolio/{portfolioId}(portfolioId=${item.portfolioIdntfNo})}">
                            <img class="img-fluid" th:src="${item.imageUrl}" th:alt="${item.title}">
                        </a>
                        <div class="position-relative p-4 pt-0">
                            <div class="service-icon">
                                <i class="fa fa-tools fa-3x"></i>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-2 small text-secondary">
                                <span th:text="${#temporals.format(item.registeredAt, 'yyyy-MM-dd')}">2026-04-16</span>
                                <span>조회 <span th:text="${item.viewCount}">0</span></span>
                            </div>
                            <h4 class="mb-3">
                                <a class="text-dark" th:href="@{/portfolio/{portfolioId}(portfolioId=${item.portfolioIdntfNo})}" th:text="${item.title}">제목</a>
                            </h4>
                            <p class="mb-3" th:text="${item.summary}">설명</p>
                            <a class="btn btn-sm btn-outline-primary rounded-pill"
                               th:href="@{/portfolio/{portfolioId}(portfolioId=${item.portfolioIdntfNo})}">
                                자세히 보기
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center mt-5 wow fadeInUp" data-wow-delay="0.2s">
                <a class="btn btn-primary rounded-pill py-3 px-5" th:href="@{/contact.do}">시공 문의하기</a>
            </div>
        </div>
    </div>
</th:block>
</html>
