{% 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" style="margin-bottom: 30px">
        <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>
            <!-- Here is your new checkbox field -->
            <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"> 이 글을 외부 공개합니다</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></textarea>
                </div>
            </div>
            <div class="uk-margin">
                <a href="{{ url_for('index') }}" class="uk-button uk-button-default">목록</a>
                <button style="float: right" type="submit" class="uk-button uk-button-primary">글 작성</button>
            </div>
        </form>
    </div>
    <script>
        window.onload = function () {
            $('#contents').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 %}