<!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, initial-scale=1">
    <title>글 수정 - Jinia's Log</title>
    <meta name="viewport" content="width=device-width,  user-scalable = no, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <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" th:href="@{/node_modules/@toast-ui/editor/dist/toastui-editor.css}"/>
    <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/articleWrite.css}"/>

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

<body>

<section>

    <div id="thumbBox">
        <div class="card d-flex align-items-center justify-content-center thumbBox">
            <img th:src="${articleDto.getThumbnailUrl()}" id="thumbnailPreView" class="card-img-top w-100 vh-100 cover thumbImg" alt="">
            <button id="thumbDelBtn" class="thumbDelBtn"><i class="far fa-trash-alt "></i></button>
        </div>
    </div>


    <div class="d-xxl-none p-0" style="margin-bottom: 100px"></div>

    <div class="container">
        <div class="row justify-content-center mt-5 mb-3 g-0">

            <div class="d-flex flex-row-reverse">

                <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#thumbnailModal">
                    썸네일 등록
                </button>

                <div class="modal fade" id="thumbnailModal" tabindex="-1" aria-labelledby="thumbnailModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="thumbnailModalLabel">썸네일 등록</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-footer">

                                <input type="text" id="thumbnail-url-upload-input" class="form-control">
                                <button class="btn btn-secondary" id="thumbnail-url-upload-btn">URL 업로드</button>
                                <label class="btn btn-secondary" for="thumbnail">파일 업로드</label>
                                <input type="file" id="thumbnail" name="thumbnail" accept="image/*" class="d-none">
                            </div>
                        </div>
                    </div>
                </div>

            </div>




            <form class="" method="post" enctype="multipart/form-data" th:object="${articleDto}"
                  th:action="|@{/article/edit(articleId=${articleDto.getId()})}|" id="writeArticleForm">

                <textarea type="text" name="thumbnailUrl" id="thumbnailUrl" th:text="${articleDto.getThumbnailUrl()}" hidden></textarea>

                <div class="mt-3 mb-3">
                    <select id="category" name="category" class="form-select ps-3" aria-label="Select category">
                        <option selected
                                th:text="${articleDto.getCategory().getTitle()}"
                                th:value="${articleDto.getCategory().getTitle()}"></option>
                        <option th:each="categoryOption : ${categoryInput}"
                                th:if="${categoryOption.getTitle() != articleDto.getCategory().getTitle()}"
                                th:value="${categoryOption.getTitle()}" th:text="${categoryOption.getTitle()}" >Java</option>
                    </select>
                </div>

                <div class="form-group">
                    <input id="title" name="title" type="text" class="form-control ps-3" placeholder="제목을 입력해주세요" required max="30"
                    th:value="${articleDto.getTitle()}">
                </div>
                <div class="form-group">
                    <textarea type="text" name="content" id="content" hidden
                    ></textarea>
                </div>

                <div class="row justify-content-center mt-4 mb-3 g-0">
                    <label for="editor"></label>
                    <div class=""><div style="background: white" id="editor"></div></div>
                </div>

                <div class="mt-3">
                    <input id="tags" type="text" name="tags" placeholder="태그"
                           class="form-control tagify-outside ps-3" aria-describedby="tagHelp"
                           th:value="${#strings.listJoin(articleDto.getArticleTagList(),',')}"
                    />
                </div>
            </form>
        </div>
        <!--        -->


        <div class="row justify-content-evenly mt-4 mb-5 g-0">
            <button class="btn btn-secondary col-4" onclick="post()">수 정</button>
            <button class="btn btn-secondary col-4" onclick="javascript:history.back()">취 소</button>
        </div>
    </div>

    <!--scripts-->
    <script th:src="@{/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/node_modules/@yaireo/tagify/dist/tagify.min.js}"></script>
    <script th:replace="layout/fragments.html :: tag"></script>
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
    <script th:src="@{/js/getCsrf.js}"></script>
    <script th:src="@{/js/thumbnail.js}"></script>
    <script th:replace="layout/fragments.html :: articleEdit"></script>

</section>

</body>
</html>