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

{% block title %}
    {% if magazinePageNumber.id %}
        page {{magazinePageNumber.pageNumber}}
    {% else %}
        {{magazinePageNumber.magazineNumber}}
    {% endif %}
{% endblock %}

{% block body %}
    {% if magazinePageNumber.id %}
        <h1>{{magazinePageNumber.magazineNumber}} page {{magazinePageNumber.pageNumber}}</h1>
    {% else %}
        <h1>{{magazinePageNumber.magazineNumber}} nouvelle page</h1>
    {% endif %}

    <div>
        {{ form_start(form) }}

        {{form_row(form.pageNumber) }}

        <hr/>

        <fieldset>
            <legend>Meta Tags</legend>

            <div>
                <div class="metaGame"
                    data-index="{{ form.metaGame|length > 0 ? form.metaGame|last.vars.name + 1 : 0 }}"
                    data-prototype="{{ form_widget(form.metaGame.vars.prototype)|e('html_attr') }}"
                ></div>
                <button type="button" class="add_item_link" data-collection-holder-class="metaGame">Ajouter un jeu</button>
                <div class="tags row">
                    {% for entry in form.metaGame %}
                        <div class='col-4'> {{ form_row(entry.Game) }}</div>
                        <div class='col-4'> {{ form_row(entry.metaType) }}</div>
                        <div class='col-4'> {{ form_row(entry.Machine) }}</div>
                    {% endfor %}
                </div>
                {{form_row(form.metaPeople) }}
                {{form_row(form.metaCompany) }}
                {{form_row(form.metaConstructor) }}
                {{form_row(form.metaEditor) }}
                {{form_row(form.metaMachine) }}
                {{form_row(form.metaAccessory) }}
                {{form_row(form.metaSchool) }}
            </div>
        </fieldset>
        <hr/>


        <div class="form-group row">
            <label class="col-form-label col-sm-2">Image de référence</label>
            <div class="col-sm-5">
                {{ form_widget(form.imageFile) }}
            </div>
            <div class="col-sm-5">
                {% if magazinePageNumber.image %}
                    {% include 'admin/_print.uploadedfile.html.twig' with {file: magazinePageNumber.image} %}
                {% else %}
                    <p><em>Aucun fichier</em></p>
                {% endif %}
            </div>
        </div>

        {{ form_row(form.enregistrer) }}

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

    
{% endblock %}

{% block js %}
    <script>
        $(function() {

            tinymce.init({
                selector: 'textarea.tinymce',
                plugins: 'advlist autolink lists link',
                toolbar_mode: 'default',
            });
            $('select').select2();

            function activateMce(){
                $('.select-lone').select2({
                    maximumSelectionLength: 1
                });
            }

            const addFormToCollection = (e) => {
                const collectionHolder = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass);

                const item = document.createElement('div');

                item.innerHTML = collectionHolder
                    .dataset
                    .prototype
                    .replace(
                    /__name__/g,
                    collectionHolder.dataset.index
                    );

                collectionHolder.appendChild(item);

                collectionHolder.dataset.index++;

                activateMce()
            };

            document
            .querySelectorAll('.add_item_link')
            .forEach(btn => {
                btn.addEventListener("click", addFormToCollection)
            });

            activateMce();
        });
    </script>
{% endblock %}