<!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="|${article.getTitle()} - Jinia's LOG'|"></title>
    <!-- SEO -->
    <meta name="description" th:content="${metaContents}"/>
    <meta name="keyword" th:content="|${metaTags}개발, 테크, 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="${metaContents}"/>
    <meta property="og:title" th:content="|${article.getTitle()} - Jinia's LOG'|"/>
    <meta property="og:image" th:content="${article.getThumbnailUrl()}"/>
    <meta property="og:url" th:content="|https://www.jiniaslog.co.kr/article/view?articleId=${article.getId()}|"/>
    <meta property="og:site_name" content="Jinia's LOG"/>

    <!-- twitter -->
    <meta property="twitter:card" th:content="${metaContents}"/>
    <meta property="twitter:title" th:content="|${article.getTitle()} - Jinia's LOG'|"/>
    <meta property="twitter:description" th:content="${metaContents}"/>
    <meta property="twitter:image" th:content="${article.getThumbnailUrl()}"/>
    <meta property="twitter:url" th:content="|https://www.jiniaslog.co.kr/article/view?articleId=${article.getId()}|"/>
    <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="@{/node_modules/@yaireo/tagify/dist/tagify.css}"/>
    <link rel="stylesheet" th:href="@{/css/mainCss.css?ver=1.1}"/>
    <link rel="stylesheet" th:href="@{/css/articleView.css}"/>

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

<body>

<section>

    <div class="main ">
        <div class="carousel-inner ">
            <div class="carousel-item active" style="cursor: default">
                <img th:src="${article.getThumbnailUrl()}" class="w-100 vh-100 cover main-image"
                     alt="...">
                <div class="card-img-overlay text-shadow text-white text-center row justify-content-center align-content-center p-0">
                    <h1 style="font-size: 2.5rem;" th:text="${article.getTitle()}">아티클 제목</h1>
                    <h5 th:text="|작성일 : ${#temporals.format(article.getCreatedDate(), 'yyyy-MM-dd')}|">글쓴 날짜</h5>
                </div>
            </div>
        </div>

        <div class="mt-5 ms-2 me-2 ms-sm-5 me-sm-5 mt-sm-5 d-flex justify-content-center">

            <div class="paper">

                <div class="container p-3 p-sm-5">
                    <div class="toastui-editor-contents" th:utext="${article.getContent()}"></div>
                </div>

                <div class="ms-2 me-2 mb-3 p-sm-4 p-2">
                    <div class="toolbox container pt-4 pb-4">
                        <div class=" ms-5 me-5 d-flex justify-content-end">

                            <a sec:authorize="hasRole('ADMIN')" class="btn btn-secondary" style="color: white"
                               th:href="@{/article/edit(articleId=${article.getId()})}"
                               type="button">수 정
                            </a>
                            <form th:action="@{/article/delete(articleId=${article.getId()})}" id="deleteArticle"
                                  method="post">
                            </form>
                            <button sec:authorize="hasRole('ADMIN')" class="btn btn-secondary ms-2"
                                    onclick="deleteArticle()">삭 제
                            </button>

                            <button class="btn btn-secondary ms-2" data-bs-toggle="modal"
                                    data-bs-target="#shareContent">
                                <i class="fas fa-share-alt"></i></button>

                            <div class="modal fade " id="shareContent" tabindex="-1" aria-labelledby="shareContent"
                                 aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="shareContentModalLabel">공유하기</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="list-unstyled social-icon-wrap d-flex justify-content-around">
                                                <a href="javascript:shareFaceBook()" class="social-icon link-icon-facebook">
                                                    <i class=" fa fa-facebook"></i>
                                                </a>
                                                <a href="javascript:shareKakao()" class="social-icon link-icon-kakao">
                                                    <i class="fa fa-comment"></i>
                                                </a>
                                                <a href="javascript:shareNaver()" class="social-icon link-icon-naver">
                                                </a>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div></div>
                        <div class="toolbox-head mt-3 ms-5 me-5">
                            <a th:href="@{/article/list(category=${article.getCategory()},tier=2,page=1)}"
                               th:text="|'${article.getCategory()}'|"></a>
                            <span>카테고리의 다른글</span></div>
                        <ul class="row row-cols-1 row-cols-sm-2 mt-2 ms-5 me-5 toolList">

                           <th:block th:each="list:${articlesSortBycategory}">
                               <li class="col text-block otherArticle" th:if="${list.getTitle()} != ${article.getTitle()}">
                                   <a th:href="@{/article/view(articleId=${list.getId()})}" th:text="${list.getTitle()}">글목록</a>
                               </li>
                               <li class="col text-block fw-bold curArticle" th:if="${list.getTitle()} == ${article.getTitle()}">
                                   <a th:text="${list.getTitle()}">글목록</a>
                               </li>
                           </th:block>

                        </ul>
                        <div class="mt-2 ms-5 me-5">
                            <a class="me-2" th:each="tag: ${article.tags}"
                               th:href="@{/article/list/tag/(tagName=${tag},page=1)}">
                                <button class="badge rounded-pill bg-secondary" th:text="${tag}">태그</button>
                            </a>
                        </div>
                    </div>
                </div>

            </div>


        </div>


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

        <div class="container mt-2 mb-5" style="max-width: 1200px;">

            <div sec:authorize="isAuthenticated()" class="ms-2 me-2 mt-3 d-flex align-items-center">
                <div>
                    <img th:src="${member.getPicUrl()}" width="50"
                         height="50"
                         class="rounded-circle me-2">
                </div>
                <textarea type="text" id="commentContent" name="commentContent"
                          class="form-control" placeholder="댓글을 작성해주세요..."></textarea>
            </div>

            <div sec:authorize="!isAuthenticated()" class="ms-2 me-2 mt-3 d-flex align-items-center">
                <div>
                    <img src="/img/guest.png" width="50"
                         height="50"
                         class="rounded-circle me-2">
                </div>
                <textarea readonly type="text" name="commentContent"
                          class="form-control" placeholder="로그인이 필요합니다"></textarea>
            </div>

            <div class="d-flex">

                <div class="ms-1 mt-2 secretBox">
                    <label class="lock">
                        <input type="checkbox" id="isCommentSecret" value="secret"/>
                        <span></span>
                    </label>
                </div>

                <div class="ms-auto mt-2 me-2">
                    <button class="btn btn-secondary btn-sm" onclick="commentWrite()">등 록</button>
                </div>
            </div>

            <div class="row justify-content-center align-items-center g-0 wow fadeInUp p-2">
                <div class="col">
                    <div id="commentContainer">

                        <!-- comment 자바스크립트로 작성 -->
                        <div class="mt-2 comment-box" id="commentBox">
                        </div>

                        <!--  -->

                    </div>
                </div>
            </div>


        </div>


        <!-- comment e -->
        <script th:src="@{/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js}"></script>
        <script th:src="@{https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js}"></script>
        <script th:src="@{/js/getCsrf.js}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js"></script>
        <script th:replace="layout/fragments.html :: comment"></script>
        <script th:replace="layout/fragments.html :: view"></script>
        <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
        <script th:inline="javascript">

            Kakao.init('d54eaaa9b048d0af953ea821a1e55769');

                function shareKakao() {
                Kakao.Link.sendDefault({
                    objectType: 'feed',
                    content: {
                        title: `[[${article.getTitle()}]] - Jinia's LOG`,
                        description: [[${metaContents}]],
                        imageUrl:
                        [[${article.getThumbnailUrl()}]],
                        link: {
                            mobileWebUrl: window.location.href,
                            webUrl: window.location.href,
                        },
                    },

                    buttons: [
                        {
                            title: '웹으로 보기',
                            link: {
                                mobileWebUrl: window.location.href ,
                                webUrl: window.location.href,
                            },
                        }
                    ],
                })
            }

            function shareNaver() {
                    let url = encodeURIComponent(window.location.href);
                    let title = encodeURIComponent(`[[${article.getTitle()}]] - Jinia's LOG`);
                    let link = "https://share.naver.com/web/shareView.nhn?url=" + url + "&title=" + title;
                    window.open( link, 'share', 'width=500, height=500' );
            }

            function shareFaceBook(){
                window.open( 'http://www.facebook.com/sharer.php?u=' + encodeURIComponent(window.location.href));
            }

        </script>
    </div>
</section>

</body>
</html>