{% extends 'base.html' %}

{% block staticfiles %}
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
{% endblock %}

{% block content %}
    <style>
    label, .uk-button
    {
        font-size: 16px !important;
    }
    </style>
    <div class="uk-container uk-margin-top post__container" style="margin-bottom: 30px">
        <h2 class="uk-text-center"><span>포스트 수정</span></h2>
        <form action="/edit_post/{{ post.id }}" method="post" class="uk-form-stacked">
            <div class="uk-margin">
                <label class="uk-form-label" for="title">제목</label>
                <div class="uk-form-controls">
                    <input class="uk-input" id="title" type="text" name="title" value="{{ post.title }}"
                           placeholder="제목을 입력하세요..." required>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="category">카테고리</label>
                <div class="uk-form-controls">
                    <select class="uk-select" id="category" name="category" required>
                        <option value="">카테고리를 선택하세요...</option>
                        <option value="IT" {% if post.category == 'IT' %} selected {% endif %}>IT</option>
                        <option value="NEWS" {% if post.category == 'NEWS' %} selected {% endif %}>NEWS</option>
                        <option value="ETC" {% if post.category == 'ETC' %} selected {% endif %}>ETC</option>
                    </select>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="public">공개 여부</label>
                <div class="uk-form-controls">
                    <label><input class="uk-checkbox" id="public" type="checkbox" name="public" {% if post.is_public %}
                                  checked {% endif %}> 이 글을 외부 공개합니다</label>
                </div>
            </div>
            <div class="uk-margin">
                <label class="uk-form-label" for="contents">내용</label>
                <div class="uk-form-controls">
                    <textarea class="summernote" id="contents" name="contents" required>{{ post.contents }}</textarea>
                </div>
            </div>
            <div class="uk-margin">
                <a style="float: left;" href="{{ url_for('post', post_id=post.id) }}"
                   class="uk-button uk-button-default">뒤로가기</a>
                <button style="float: right;" type="submit" class="uk-button uk-button-primary">글 수정</button>
            </div>
        </form>
    </div>
    <script>
        $(document).ready(function () {
            $('.summernote').summernote({
                height: 300,
                callbacks: {
                    onImageUpload: function (files) {
                        var $editor = $(this);
                        var data = new FormData();
                        data.append("file", files[0]);
                        $.ajax({
                            url: "/upload_image",
                            method: "POST",
                            data: data,
                            processData: false,
                            contentType: false,
                            success: function (response) {
                                if (response.success) {
                                    var imageUrl = response.fileUrl;
                                    $editor.summernote("insertImage", imageUrl);
                                } else {
                                    alert(response.message);
                                }
                            }
                        });
                    }
                }
            });

            $(".nav__div").hide();
        });
    </script>
{% endblock %}