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

{% block title %}Debate{% endblock %}

{% block body %}

    <h3>Advocacy team forum - New topic</h3>

    {% include 'dashboard/advocacydebate/template_parts/advocacyNotice.html.twig' %}

    <br>
    {{ form_start(form) }}
    {{ form_row(form.isViewableForAlternativeManager) }}
    {{ form_row(form.headline) }}
    {{ form_row(form.subjectDate) }}
    {{ form_row(form.subject) }}
    {{ form_row(form.content) }}


    <hr>
    <h2>Attachment</h2>

    <ul class="attachments" data-prototype="{{ form_widget(form.attachments.vars.prototype)|e('html_attr') }}">
        {% for attachment in form.attachments %}

            <li><p>{{ attachment.vars.value.attachmentName }}</p>{{ form_row(attachment.attachmentFile ) }}</li>
        {% endfor %}
    </ul>
    {{ form_widget(form) }}
    <button type="submit" class="btn btn-primary">Save</button>
    {{ form_end(form) }}

{% endblock %}

{% block datatable %}{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/fr.js"></script>
    <script>

        $("input.datetime").flatpickr({
            altInput: true,
            altFormat: "D j F Y",
            time_24hr: true,
            enableTime: false,
            noCalendar: false,
            dateFormat: "Y-m-d H:i:s",
            minuteIncrement: 15
            //minDate: "today",
        });

    </script>

    <script>

        CKEDITOR.replaceClass = 'wysiwyg' ;

        var $collectionHolder;

        var $addAttachmentButton = $('<button type="button" class=" btn btn-info add_attachment_link">Add an attachment</button>');
        var $newLinkLi = $('<div><br/></div>').append($addAttachmentButton);

        $(document).ready(function () {
            bsCustomFileInput.init();


            $collectionHolder = $('ul.attachments');
            $collectionHolder.append($newLinkLi);
            $collectionHolder.data('index', $collectionHolder.find('input').length);

            $collectionHolder.find('li').each(function () {
                addTagFormDeleteLink($(this));
            });

            $addAttachmentButton.on('click', function (e) {
                addAttachmentForm($collectionHolder, $newLinkLi);
                bsCustomFileInput.init();
            });

            function addAttachmentForm($collectionHolder, $newLinkLi) {
                var prototype = $collectionHolder.data('prototype');
                var index = $collectionHolder.data('index');

                var newForm = prototype;
                newForm = newForm.replace(/__name__/g, index);
                $collectionHolder.data('index', index + 1);

                var $newFormLi = $('<li class="my-3"></li>').append(newForm);
                $newLinkLi.before($newFormLi);

                bsCustomFileInput.init();
                addTagFormDeleteLink($newFormLi);
            }

            function addTagFormDeleteLink($attachmentFormLi) {
                var $removeFormButton = $('<button class="btn btn-danger" type="button">Delete this attachment</button>');
                $attachmentFormLi.append($removeFormButton);

                $removeFormButton.on('click', function (e) {
                    $attachmentFormLi.remove();
                });
            }
        });


    </script>
{% endblock %}