{%extends get_active_back_theme()+'/base.html'%}

{%block head%}
    <script src="{{url_for('static', filename='jquery_3.2.1.min.js')}}"></script>

{%endblock%}
{% block content %}
<br>
<div class="container">
    <div class="card">
        <div class="card-body">
            <h3>New page</h3>
            <form action="{{url_for('{}.check_pagecontent'.format(module_name))}}" method="POST">
                {{ form.title.label }}
                <div class="input-group mb-3">
                    {{ form.title }}
                    <span id="error" type="text" vissiblity='hidden'></span>
                </div>
                {{ form.slug.label }}
                <div class="input-group mb-3">
                    {{ form.slug }}
                    <span id="error" type="text" vissiblity='hidden'></span>
                </div>
                <div class="field">
                    {{ form.lang.label }} <br>
                    <div class="input-group mb-3">
                        {{ form.lang }}
                    </div>
                </div>
                <div class="field">
                    {{ form.content.label }} <br>
                    <div class="input-group mb-3">
                        {{ form.content }}
                    </div>
                </div>


                <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
                <input type="submit" class="btn btn-info" value="submit">
            </form>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.3.1/tinymce.min.js" integrity="sha512-eV68QXP3t5Jbsf18jfqT8xclEJSGvSK5uClUuqayUbF5IRK8e2/VSXIFHzEoBnNcvLBkHngnnd3CY7AFpUhF7w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
tinymce.init({
    selector: '#content',
    plugins: `advlist autolink link image imagetools lists
                charmap print preview hr anchor pagebreak
        searchreplace wordcount visualblocks visualchars code
        fullscreen insertdatetime media nonbreaking
        save table directionality template paste
        codesample`
    ,
    imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions",
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | codesample | table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol',
    relative_urls: false,
    images_upload_url: "",
    image_title: true,
    automatic_uploads: true,
    images_reuse_filename: false,
    images_upload_base_path: '/static/uploads/images',
    codesample_languages: [
        { text: 'HTML/XML', value: 'markup' },
        { text: 'JavaScript', value: 'javascript' },
        { text: 'CSS', value: 'css' },
        { text: 'Processing', value: 'processing' },
        { text: 'Python', value: 'python' }
    ],
    width: "100%",
    promotion: false
});
</script>
<script type="text/javascript">
$(document).ready(function() {
    $("#title").change(function() {
        var title = $('#title').val();
        title = title.trim();
        title = title.replace(/[\W_]+/g, " ");
        title = title.replaceAll(" ", "-");
        $('#slug').val(title);
    });
});
</script>
{% endblock %}
