{% extends "propesqBundle::layout.html.twig" %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/propesq/css/edit.css') }}" type="text/css" media="all"/>
    <script src="{{ asset('bundles/propesq/js') }}/ckeditor/ckeditor.js"></script>
{% endblock %}

{% block content %}
    <div id="form-container">
        <div class="title">
            <h2><a name='editar' href='#edicao'>{{ 'cabecalho.alterar.informacaogerador'|trans }}</a></h2>
        </div>

        {{ form_errors(editForm) }}

        <form id="formulario" class="form-horizontal"
              action="{{ path('informacaogerador_update', { 'id': entity.id }) }}"
              method="post" {{ form_enctype(editForm) }}>
            <fieldset style="float: left; margin: 10px;">

                {{ form_widget(editForm._token) }}

                <div class="row-fluid conteudo_propesq_{{ editForm.descricao.vars.name }}">
                    <div class="span12">
                        <div class="control-group">
                            {{ form_label(editForm.descricao) }}
                            <div class="controls">
                                {{ form_widget(editForm.descricao,{ 'attr': {'class': 'input-xlarge'} }) }}
                            </div>
                        </div>
                    </div>
                </div>

                <br/>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="control-group">
                            <label>{{ 'entidade.informacaogerador.preview' | trans }}</label>
                            <div class="controls"
                                 style="min-height: 300px; background-color: white; padding: 10px">
                                <div id="textDescription"/>
                            </div>
                        </div>
                    </div>
                </div>

            </fieldset>
            <div class=" div-actions">
                <button type="submit" class="btn btn-primary">{{ 'acao.salvar'|trans }}</button>
            </div>
        </form>
    </div>
    <script>
        $(document).ready(function () {

            let editor = CKEDITOR.replace('{{ editForm.descricao.vars.full_name }}', {
                filebrowserImageWindowWidth: '640',
                filebrowserImageWindowHeight: '480',
                enterMode: CKEDITOR.ENTER_BR
            });

            let preview = document.getElementById('textDescription');

            // For the first time
            preview.innerHTML = editor.getData();

            editor.on("instanceReady", function () {
                this.document.on("keyup", function () {
                    preview.innerHTML = editor.getData();
                });
            });

            editor.on("afterCommandExec", function (){
                preview.innerHTML = editor.getData();
            });
        });
    </script>
{% endblock %}