{% extends 'base.html.twig' %}
{% block title %}{{ 'help.header'|trans({}, 'HelpBundle') }}{% endblock %}
{% block body %}

    {% block css %}
        {# {{ parent() }} #}
        <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndexhelp/css/register.css') }}" />

    {% endblock %}

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-10" style="margin-left:10px;margin-right:10px;">
                <div class="page-header">
                    <h2 style="color:#00a550;">{{ 'help.header'|trans({}, 'HelpBundle') }}</h2>
                </div>
                {% for flashMessage in app.session.flashbag.get('notice') %}
                    <div class="alert alert-success" role="alert">
                        <div align="right" style="font-weight: bold;">{{ flashMessage }}</div>
                    </div>
                {% endfor %}
                <div style="padding-left: 10%;padding-right: 10%">
                    {% if app.request.attributes.get('_route') == 'syndex_help_addFaqTopic' %}
                        {{ form_start(form, {'action': path('syndex_help_addFaqTopic'), 'method': 'POST', 'attr': {'novalidate': 'novalidate','id': 'academia_new_faq'} }) }}
                    {% else %}
                       {{ form_start(form, {'action': path('syndex_help_editFaqTopic',{id : id} ), 'method': 'POST', 'attr': {'novalidate': 'novalidate','id': 'academia_new_faq'} }) }}
                    {% endif %}
                    <div class="form-group">
                        {{ form_row(form.priority,
                            {'attr': {'class': 'form-control', 'title':'form.priority'|trans({}, 'HelpBundle'),
                            'placeholder': 'form.priority_pholder'|trans({}, 'HelpBundle')
                        }}) }}
                    </div>

                    <div class="form-group">
                        {{ form_row(form.faqShortQuestion,
                            {'attr': {'class': 'form-control', 'data-toggle':'tooltip',
                            'data-placement':'left', 'title':'form.faqShortQuestion'|trans({}, 'HelpBundle'),
                            'placeholder':'form.faqShortQuestion_pholder'|trans({}, 'HelpBundle')
                        }}) }}
                    </div>

                    <div class="form-group">
                        {{ form_row(form.shamraAnswer,
                            {
                                'attr': {'style': 'display:none'}
                            }
                        )}}
                        <div id="q-editor" style="min-height:250px; padding-bottom:33px;"></div>
                    </div>

                    <input type="submit" value="{{ 'form.send'|trans({}, 'HelpBundle') }}" class="btn" style="margin-right: 16%;color: white;background-color: #00a550;" />

                    {{ form_end(form) }}
                </div>
                <br>

            </div>
            <div class="col-md-1"></div>
        </div>
    </div>


{% endblock %}
{% block javascripts %}

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script>
        $(document).ready(function () {
            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': 'rtl' }],                         // text direction
                        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                        [{ 'align': [] }],
                        ['clean'],
                    ]
                },
            });
            editor.format('direction', 'ltr');
            editor.format('align', 'left');
            $("#q-editor .ql-editor").html(
                $('#faq_topics_shamraAnswer').val()
            );
            $('#academia_new_faq').submit(function (e) {
                $('#faq_topics_shamraAnswer').val(
                    $("#q-editor .ql-editor").html()
                );
                return true;
            });
        });
    </script>

{% endblock %}