{% extends 'base.html' %}

{% block content %}
    <div class="uk-container uk-margin-top">
        <h1 class="uk-text-center"><span>포스트 작성</span></h1>
        <form action="/write" 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" 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">IT</option>
                        <option value="NEWS">NEWS</option>
                        <option value="ETC">ETC</option>
                    </select>
                </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></textarea>
                </div>
            </div>
            <div class="uk-margin">
                <button type="submit" class="uk-button uk-button-default">글 작성</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);
                                }
                            }
                        });
                    }
                }
            });
        });
    </script>

{% endblock %}