{% extends "base/module_base.html" %}
{% set active_page ='page' %}
{% block pagehead %}
<title>{{active_page.capitalize()}}</title>
<style>
    .hidden{
    display: none;
  }
  .show{
    display: inline-block;
  }
</style>
{% endblock %}
{% block sidebar %}
{%include 'page/blocks/sidebar.html'%}
{%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">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fa fa-calendar-day"></i></span>
                    </div>
                    {{ form.title }}
                    <span id="error" type="text" vissiblity='hidden'></span>
                </div>
                {{ form.slug.label }}
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fa fa-calendar-day"></i></span>
                    </div>
                    {{ 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 type="text/javascript" src="{{ url_for('static', filename='tinymce/tinymce.min.js') }}"></script>
<script type="text/javascript">
tinymce.init({
    selector: '#content',
    plugins: [
        'advlist autolink link image imagetools lists charmap print preview hr anchor pagebreak spellchecker',
        'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
        'save table contextmenu directionality template paste textcolor 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',
    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%",
});
</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 %}
