<!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>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-VQ2HWM6VCF"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-VQ2HWM6VCF');
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,  user-scalable = no, initial-scale=1.0"/>
    <title>Jinia's LOG</title>
    <!-- SEO -->
    <meta name="description" content="비전공 출신, 개발자 지망생의 공부 내용을 기록하는 블로그입니다."/>
    <meta name="keyword" content="개발, 테크, 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" content="비전공 출신, 개발자 지망생의 공부 내용을 기록하는 블로그입니다."/>
    <meta property="og:title" content="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" content="https://www.jiniaslog.co.kr/"/>
    <meta property="og:site_name" content="Jinia's LOG"/>

    <!-- twitter -->
    <meta property="twitter:card" content="비전공 출신, 개발자 지망생의 공부 내용을 기록하는 블로그입니다."/>
    <meta property="twitter:title" content="Jinia's LOG"/>
    <meta property="twitter:description" content="비전공 출신, 개발자 지망생의 공부 내용을 기록하는 블로그입니다."/>
    <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" content="https://www.jiniaslog.co.kr/"/>
    <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}"/>
    <link rel="stylesheet" th:href="@{/css/login.css}"/>
    <link rel="stylesheet" th:href="@{/node_modules/wow.js/css/libs/animate.css}"/>

</head>

<body>

<section>

    <div id="carouselForMain" class="carousel slide carousel-fade" data-bs-ride="carousel">

        <div class="carousel-inner">
            <div class="carousel-item mainItem" th:each="article,num : ${popularArticles}"
                 th:classappend="${num.index}==0? active">
                <a th:href="@{/article/view(articleId=${article.getId()})}">
                    <img th:src="${article.getThumbnailUrl()}"
                         class="w-100 vh-100 cover main-image" alt="...">
                    <div class="card-img-overlay text-white text-center row justify-content-center align-content-center text-shadow">
                        <h1 class="" th:text="${article.getTitle()}">첫번째 이미지</h1>
                    </div>
                </a>
            </div>
        </div>

        <button class="carousel-control-prev" type="button" data-bs-target="#carouselForMain"
                data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselForMain"
                data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>

    </div>


    <div class="mt-5 pt-2 popular-card-section ">
        <div class="cards-container container p-0 ">
            <div class=" row g-0 row-cols-2 row-cols-md-3">
                <div class="col g-1 g-md-4" th:each="article,num : ${popularArticles}">
                    <a th:href="@{/article/view(articleId=${article.getId()})}">
                        <div class=" card ratio ratio-1x1 popular-card "
                             th:style="|background-image: url(${article.getThumbnailUrl()}); background-position: center; background-size: cover;|">
                            <div class="card-description text-center">
                                <small><small th:text="|작성일 : ${#temporals.format(article.getCreatedDate(), 'yyyy-MM-dd')}|"></small></small>
                                <p class="text-truncate" th:text="${article.getTitle()}">타이틀</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <hr class="py-1 mt-5" style="color: rgb(212, 200, 184);">

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

        <div class="cards-container container p-0" id="infiniteScrollBox">
            <h1 class="text-center">최신 포스팅</h1>
            <hr>
            <!--     infinityScroll     -->
            <div id="nextPagination"></div>
        </div>
    </div>
        <!--  js  -->
    <script src="https://kit.fontawesome.com/233840a552.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js"></script>
    <script th:src="@{/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/node_modules/wow.js/dist/wow.js}"></script>
    <script>new WOW().init()</script>
    <script th:src="@{/js/infinityScroll.js?ver=1.1}"></script>
</section>

</body>
</html>