<!DOCTYPE html>
<html th:replace="~{layout/layout.html :: layout(~{::head}, ~{::section})}"
      lang="ko" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,  user-scalable = no, initial-scale=1.0"/>
    <title th:text="|${param.category} 카테고리 글 목록 - Jinia's LOG'|"></title>
    <!-- SEO -->
    <meta name="description" th:content="|${param.category} 카테고리 글 목록|"/>
    <meta name="keyword" th:content="|${param.category}, 카테고리, 개발, 테크, IT, 코딩, 알고리즘, 쥬니어, 개발자, 포트폴리오, 블로그, CS, 컴공지식, 컴공, 프로그래밍, 프로그래밍 언어, 비전공, 코딩 테스트, 취업, 취준|"/>
    <meta name="author" content="jinia"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <!-- OPEN GRAPH(FACEBOOK, LINKEDIN) -->
    <meta property="og:type" content="website"/>
    <meta property="og:description" th:content="|${param.category} 카테고리 글 목록|"/>
    <meta property="og:title" th:content="|${param.category} 카테고리 글 목록 - Jinia's LOG'|"/>
    <meta property="og:image" content="https://github.com/jinia91/blogTest/blob/main/img/a341399c-494f-4a1b-9c03-8d566a3a4097.png?raw=true"/>
    <meta property="og:url" th:content="|https://www.jiniaslog.co.kr/article/list?category=${param.category}&tier=${param.tier}&page=${param.page}|"/>
    <meta property="og:site_name" content="|${param.category} 카테고리 글 목록 - Jinia's LOG'|"/>

    <!-- twitter -->
    <meta property="twitter:card" th:content="|${param.category} 카테고리 글 목록|"/>
    <meta property="twitter:title" th:content="|${param.category} 카테고리 글 목록 - Jinia's LOG'|"/>
    <meta property="twitter:description" th:content="|${param.category} 카테고리 글 목록|"/>
    <meta property="twitter:image" content="https://github.com/jinia91/blogTest/blob/main/img/a341399c-494f-4a1b-9c03-8d566a3a4097.png?raw=true"/>
    <meta property="twitter:url" th:content="|https://www.jiniaslog.co.kr/article/list?category=${param.category}&tier=${param.tier}&page=${param.page}|"/>
    <meta property="twitter:creator" content="Jinia"/>

    <link rel="icon" href="/img/favicon-16x16.png"/>
    <link rel="apple-touch-icon" href="/img/favicon-16x16.png"/>
    <link rel="icon" type="image/png" sizes="16x16"  href="/img/favicon-16x16.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
    <!-- CSS RESET -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"/>
    <link rel="stylesheet" th:href="@{/node_modules/bootstrap/dist/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/mainCss.css?ver=1.1}"/>

    <script src="https://kit.fontawesome.com/233840a552.js" crossorigin="anonymous"></script>
</head>

<body>

<section>

    <div style="margin-bottom: 100px"></div>

    <div class="recent-cards mt-5 ms-4 me-4">

        <div class="cards-container container p-0" id="infiniteScrollBox">
            <h1 class="text-center" th:text="${param.category}">카테고리 명</h1>
            <hr>
            <div id="articlePage-0">
                <div class="card mb-3 recent-card wow fadeInUp" th:each="article :${articleList.getContent()}">
                    <a th:href="@{/article/view(articleId=${article.getId()})}">
                        <div class="row g-0">
                            <div class="col-3">
                                <div class="ratio ratio-1x1"
                                     th:style="|background-image: url(${article.getThumbnailUrl()}); background-position: center; background-size: cover;|"></div>
                            </div>
                            <div class="col-9 row row-cols-1 align-self-center">
                                <h3 class="card-title col mb-3 text-truncate" th:text="${article.getTitle()}">글 제목</h3>
                                <p class="d-none d-md-block col recent-card-text" th:text="${article.getContent()}"></p>
                                <p class="col mb-0">
                                    <small class="text-muted"
                                           th:text="|작성일 : ${#temporals.format(article.getCreatedDate(), 'yyyy-MM-dd')}|"></small>
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <!--     infinityScroll     -->
            <div id="nextPagination"></div>

        </div>
    </div>

    <!-- page s -->
    <div class="pagination-section mt-4">
        <nav class="pagination-outer" aria-label="Page navigation">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" aria-label="First"
                       th:href="@{/article/list(category=(${param.category}),tier=(${param.tier}),page=(1))}"
                       th:if="${pagingBox.getCurPageNum()}>5">
                        <span>«</span>
                    </a>
                </li>

                <li class="page-item">
                    <a class="page-link" aria-label="Previous"
                       th:href="@{/article/list(category=(${param.category}),tier=(${param.tier}),page=(${pagingBox.getCurPageNum()}-5))}"
                       th:if="${pagingBox.getCurPageNum()}>5">
                <span>
                  < </span>
                    </a>
                </li>

                <th:block th:each="page : ${#numbers.sequence(pagingBox.getBoxStartNum(), pagingBox.getBoxEndNum())}">
                    <li th:if="${pagingBox.getCurPageNum()==page}" class="page-item active">
                        <a th:text="${page}" class="page-link"
                           th:href="@{/article/list(category=(${param.category}),tier=(${param.tier}),page=(${page}))}"></a>
                    </li>
                    <li th:unless="${pagingBox.getCurPageNum()==page}" class="page-item">
                        <a th:text="${page}" class="page-link"
                           th:href="@{/article/list(category=(${param.category}),tier=(${param.tier}),page=(${page}))}"></a>
                    </li>
                </th:block>
                <li class="page-item">
                    <a class="page-link" aria-label="Next"
                       th:href="@{/article/list(category=(${param.category}),tier=(${param.tier}),page=(${pagingBox.getCurPageNum()}+5))}"
                       th:if="${pagingBox.getBoxEndNum()<pagingBox.getLastPageNum()}"
                    >
                        <span aria-hidden="true">></span>
                    </a>
                </li>

                <li class="page-item">
                    <a class="page-link" aria-label="Last"
                       th:href="@{/article/list(category=(${param.category}),tier=(${param.tier}),page=(${pagingBox.getLastPageNum()}))}"
                       th:if="${pagingBox.getBoxEndNum()<pagingBox.getLastPageNum()}"
                    >
                        <span aria-hidden="true">»</span>
                    </a>
                </li>


            </ul>
        </nav>
    </div>
    <!--page e-->

    <script th:src="@{/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js}"></script>

</section>

</body>
</html>