{% extends "::author.html.twig"%}
{% block title %}:: Edit Article::{% endblock %}

{% block body %}
<section id="page-title" style="padding: 16px 0;">
  <div class="row">
    <div class="col-sm-8">
      <h2 class="mainTitle"><i class="ti-pin-alt" style="color: #007aff !important;font-size: 24px;"></i> Edit  Article</h2>
    </div>
  </div>
</section>
<div class="container-fluid container-fullw ">
     <div class="row">
         <div class="col-md-12"> 
                {% if comments | length > 0 %}
                <button type="button" style=" margin-bottom: 10px" class="btn btn-wide btn-primary btn-squared btn-o" data-toggle="modal" data-target=".bs-example-modal-right">
                                <span><i class="ti-comment-alt"></i> Comments ({{comments | length }})</span>
                </button>
               {% endif %}
         <br/>
         
         </div>
     </div>
    <div class="row">
        <div class="col-md-12"> 
            
            {{ include("PafcicOnlinePafcicBundle:Articles:form_create_author.html.twig") }}
        </div>
    </div>
</div>

{{ include("PafcicOnlinePafcicBundle:Media:widget_upload_file.html.twig") }}



<div class="modal fade modal-aside horizontal right bs-example-modal-right"  tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog modal-sm">
                <div class="modal-content" style="background: white;">
                        <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">Comments</h4>
                        </div>
                  
                        <div class="modal-body" style="background: white;">
                            <ol class="discussion">
												
												
				{% for comment in comments %}								
                    
                            <li class="other">
                                <div class="message">
                                        <div class="message-name">Editor</div>
                                        <div class="message-text" style="background: #00d449; color: #fff;">{{comment.message }}</div>
                                        <div class="message-avatar"><img src="{{asset('assets/images/default-user.png')}}" alt=""></div>
                                </div>
                            </li>
                            <li class="messages-date">{{ comment.date |date('D,M,H:s') }}</li>
                                  {% endfor %}
                            </ol>
                            
                       
                         
                        </div>
                        <div class="modal-footer">
                                <button type="button" class="btn btn-primary btn-o" data-dismiss="modal">
                                        Close
                                </button>
                             
                        </div>
                      
                 
                </div>
        </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        function insertImg(container,webPath) {

            $('#'+container).summernote('insertImage', webPath);
            $('#mymodalmedia').modal('hide');

        }
        /***
         * This function allow to paginate media video
         * @param path
         * @constructor
         */
        function media_paginator(path,search,content,abstract){
            $.ajax({
                url: path,
                dataType: 'HTML',
                data: {search:  $('#'+search).val(),date:$('#'+search+'-date').val(),abstract:abstract},
                success: function (data) {
                    if(data.length > 0){
                        $('#'+content).html(data);
                    }
                }
            })
        }


        function insertVideo(container,webPath) {
            $('#'+container).summernote('createTagV', {
                text: "<video height='120px' controls><source src="+webPath+" ></video>",
                url: '',
                newWindow: true
            });
            $('#'+container).summernote('insertImage', webPath);
            $('#mymodalmedia').modal('hide');

        }
        jQuery(document).ready(function() {

            $('#pafciconline_pafcicbundle_articles_Add_abstract').summernote({
                minHeight: 300,
                maxHeight: null,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ["fontname", ["fontname"]],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['view', ['fullscreen']],
                    ['insert', ['mymodal','link','table','hr','mymodal2']],
                ]

            });

            $('#pafciconline_pafcicbundle_articles_Add_content').summernote({


                fontNamesIgnoreCheck: ['Merriweather'],
                minHeight: 300,
                maxHeight: null,
                toolbar: [

                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ["fontname", ["fontname"]],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['view', ['fullscreen']],
                    ['insert', ['mymodalcontent','link','table','hr','mymodal2content']],
                ]
            });

            $('button[data-event="showImageDialog"]').attr('data-toggle', 'image').removeAttr('data-event');
        });

        /**
         * This Function allow auto-complete search fields
         * @param path
         * @param element
         * @param subpath
         * @param content
         * @param flag
         */
        function dynanmic_opt( path ,element , subpath,content,flag) {
            var option = {

                url: function(phrase) {
                    return path;
                },

                getValue: function(element) {
                    return element.name;
                },

                ajaxSettings: {
                    dataType: "json",
                    method: "POST",
                    data: {
                        dataType: "json"
                    }
                },
                adjustWidth:false,

                preparePostData: function(data) {
                    data.phrase = $('#'+element).val();
                    return data;
                },

                list: {
                    onClickEvent: function() {
                        media_paginator(subpath,element,content,flag);
                    }
                },

                requestDelay: 400,

            };
            $('#'+element).easyAutocomplete(option);
        }
        /**
         * This section allow to initialise auto-complete
         */
        dynanmic_opt( "{{ path('media_list_video')}}" ,"search-media-video" ,'{{ path('media_list_popup_video') }}','container-media-video','3');
        dynanmic_opt( "{{ path('media_list_video')}}" ,"search-media-video-content" ,'{{ path('media_list_popup_video')}}','container-media-video-content','2');
        dynanmic_opt( "{{ path('media_list_image')}}" ,"search-media" ,'{{ path('media_list_popup')}}','container-media-image','3');
        dynanmic_opt( "{{ path('media_list_image')}}" ,"search-media-content" ,'{{ path('media_list_popup')}}','container-media-image-content','2');
        /**
         * This section allow to initialise filter and pagination
         */
        media_paginator('{{ path('media_list_popup_video') }}','search-media-video','container-media-video','3');
        media_paginator('{{ path('media_list_popup_video')}}','search-media-video-content','container-media-video-content','2');
        media_paginator('{{ path('media_list_popup') }}','search-media','container-media-image','3');
        media_paginator('{{ path('media_list_popup') }}','search-media-content','container-media-image-content','2');
    </script>
{% endblock %}