{% if app.request.pathinfo|slice(1,6) == 'author' %}
    {% set intro = 'false' %}
{% elseif  app.request.pathinfo|slice(1,6) == 'editor' %}
    {% set intro = 'true' %}
{% endif %}

    {% extends intro == 'false' ? "::author.html.twig" : "::layout.html.twig" %}

    {% block title %}::Comment 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>Comment
                        Article</h2>
                </div>
                <ol class="breadcrumb" style="margin: 0px 0 0 !important;">
                    <li>
                        {% if app.request.pathinfo|slice(1,6) == 'author' %}
                            <span>Author</span>
                        {% elseif app.request.pathinfo|slice(1,6) == 'editor' %}
                            <span>Editor</span>
                        {% endif %}
                    </li>
                    <li>
                        <span>Comment</span>
                    </li>
                    <li class="active">
                        <span>Article</span>
                    </li>
                </ol>
            </div>
        </section>

        <div class="container-fluid container-fullw ">

            <div class="row">
                <div class="col-md-12">
                    {% if app.request.pathinfo|slice(1,6) == 'author' %}
                        {{ include("PafcicOnlinePafcicBundle:Articles:form_comment_author.html.twig") }}
                    {% elseif app.request.pathinfo|slice(1,6) == 'editor' %}
                        {{ include("PafcicOnlinePafcicBundle:Articles:form_comment_editor.html.twig") }}
                    {% endif %}

                </div>
            </div>

        </div>


        {#<!-- Box End -->
        <div class="modal fade" id="CommentDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" style="background: white;">
                     <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="ajax"><i class="ti-comment-alt" style="color: #007aff !important;font-size: 24px;"></i> Private comment to the authors </h4>
                    </div>
                    <div class="modal-body" style="padding: 0px;">
                      <div class="form-group">
                        <div class="note-editor">
                                <textarea id="message" class="form-control"></textarea>

                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" Onclick="sendcommenteditor('{{ path('pafcic_online_pafcic_send_message')}}',{{articles.id}});" class="btn btn-wide  btn-primary pull-right" class="fa fa-check"></i>Send</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>#}

        <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>
            jQuery(document).ready(function () {
                $("#myTab5_example2 img").fancybox({});

            });

        </script>
        <script>
            function fancyBoxMe(e) {
                var numElemets = $("#myTab5_example2 img").size();

                var tarGet = $('#myTab5_example2 img').eq(e).data('href');
                $.fancybox({
                    href: tarGet,
                    helpers: {
                        title: {
                            type: 'inside'
                        }
                    }
                }); // fancybox
            } // fancyBoxMe

            jQuery(document).ready(function () {
                $("#myTab5_example2 img").each(function (i) {
                    $(this).bind('click', function () {
                        fancyBoxMe(i);
                    }); //bind
                });


            });

        </script>

    {% endblock %}