{% extends 'base.html.twig' %}

{% trans_default_domain "community" %}

{% block title %}
 {{ 'title.edit_question'|trans ~ " " }} {{ communityQuestion.question }} 
{% endblock %} 


{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndextrack/css/new.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/user/css/community.css?v2.6') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/academia.min.css') }}" />
     <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/style.css?v.3.2 ') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexacademic/css/tagmanager.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets/css/academia-section.css') }}" />
    <link rel="stylesheet" href="{{ asset('bundles/syndexacademic/css/new-research.css') }}"/>

{% endblock %}

 {% block body %}
     <div class="container p-5">
        <div class="row">
            <div class="col-md-3"></div>
            <div id="research-new"  class="col-xs-12 col-md-6 shadow">
                <div id="page-header" class="new-research-header">
                    <span> {{ 'title.edit_question'|trans ~ " " }} {{ communityQuestion.question }}  </span>
                </div>
                <br>
                <form id="community-question-form" class="form-horizontal"  action="{{ path('edit_community_question',{'alias':communityQuestion.community.alias,'slug':communityQuestion.slug}) }}"   name="edit_community_question" method="POST" novalidate  enctype="multipart/form-data">
                    {{form_row(form.community_token)}}

                        <div style="padding:10px;">
                            <label class="control-label">{{ 'form.question.title'|trans }}</label>
                            {{ form_errors(form.question) }}
                            {{ form_widget(form.question) }}
                        </div>
                        
                        <div style="padding:10px;">
                            <label class="control-label">{{ 'form.question.content'|trans }}</label>
                            {{ form_errors(form.content) }}
                            <div class="editor-container">
                                <div id="q-editor" dir="ltr"></div>
                            </div>
                            {{ form_widget(form.content,{'attr':{'style':'display:none'}}) }}
                        </div>
                            
                        <div style="padding:10px;margin:10px;">
                            <div id="tags-div" class="form-group">
                                <label class="control-label">{{ 'form.keywords.name'|trans }}</label>
                                {{ form_errors(form.keywords) }}
                                {{ form_widget(form.keywords) }}
                                <div class="row">
                                    <div class="col-md-4">
                                        <input id="tag-value" type="text" name="keywords" size="35" class="tm-input form-control scroller"/>
                                    </div>
                                    <div class="col-md-4">
                                        <input id="push-tag" type="button" value="{{ 'form.keywords.add'|trans }}" class="btn btn-secondary"/>
                                    </div>
                                </div>

                            </div>
                        </div>
            </form>
        </div>
    </div>
</div>
 {% endblock %}


{% block javascripts %}
    {{ parent() }}
    <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
     <script src="{{ asset('js/jquery-ui.min.js') }}"></script>
     <script src="{{ asset('bundles/syndexacademic/js/tagmanager.js') }}" ></script>

     <script>
          $(document).ready(function () {
               try{
                    const editor = new Quill('#q-editor', {
                         theme: 'snow',
                         modules: {
                         toolbar: [
                              [{ header: [1, 2, 3, 4] }],                       // custom button values
                              ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                              ['link','blockquote', 'code-block', 'image'],
                              [{ 'direction': ['ltr','rtl'] }],                         // text direction
                              [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                              [{ 'align': ['','center','right','justify']}],
                              ['clean'],
                         ]
                         },
                         placeholder: "{{ 'form.question.placeholder'|trans }}",
                    });

                    editor.format('align', 'right');

                    var customButton = document.createElement("button");
                    customButton.className = "btn btn-success";
                    customButton.innerHTML = '<i class="fa fa-paper-plane" aria-hidden="true"></i>';
                    customButton.title = '{{ "form.post"|trans }}';
     
     
                    customButton.addEventListener('click', function() {
                              $('#community-question-form').submit(function (e) {
                              $('#community_question_form_content').val(
                                   $("#q-editor .ql-editor").html()
                              );
                              return true;
                         });
                    });

                    $('.ql-editor').html($('#community_question_form_content').val())

                    var customButtonContainer = document.createElement("span");
                    customButtonContainer.className = "ql-formats";
                    customButtonContainer.appendChild(customButton)
     
                    var toolbar = document.querySelector('.ql-toolbar')
                    toolbar.appendChild(customButtonContainer)
     
                    $('.ql-align-right').attr('dir','rtl')
                    $('.ql-direction-rtl').attr('dir','rtl')
               }catch(e){

               }
        
          });
               $(document).ready(function () {
                    // Processing and rendering tags.

                    jQuery(".tm-input").tagsManager();
                    $("input[name=hiddenTagListA]").change(function () {
                         $("#community_question_form_keywords").val($("input[name=hiddenTagListA]").val());
                    });
                    // Applying jQuery plugin - Autocomplete
                    function processTags(tags){
                         var r=[];
                         //var t = JSON.parse(tags)
                         for(var i in tags){
                              r.push(tags[i].context)
                         }
                         return r
                    }
                    $(".tm-input").autocomplete({
                         source: function (request, response) {
                              $.ajax({
                              url: Routing.generate('shamra_academia_get_tag_suggestions'),
                              data: {
                                   term: request.term
                              },
                              success: function( data ) {
                                   response( processTags(data) );
                              }
                              });
                         },
                              //data :: JSON list defined
                              //processTags(Routing.generate('shamra_academia_get_tag_suggestions')),
                         minLength: 1
                    });
                    $('#push-tag').click(function () {
                         jQuery(".tm-input").tagsManager('pushTag', $('#tag-value').val());
                    });
               });
     </script>
{% endblock %}