{% form_theme form '@KunstmaanAdmin/Form/fields.html.twig' %}
{% set context = pagepartadmin.context %}

<!-- Hidden Field - Deleted -->
<input type="checkbox" class="deletefield hidden" id="{{ id }}-is-deleted" name="{{ id }}_deleted" value="true">


<!-- Draggable Item -->
<div class="js-sortable-item sortable-item" id="{{ id }}-pp-container" data-scope="{{ pagepartadmin.getClassName(pagepart)|replace({'\\':""}) }}">

    <!-- Hidden fields - New, Type and Context -->
    {% if pagepart.id == 0 %}
        <input type="hidden" name="{{ context }}_new[]" data-suffix="_new[]" value="{{ id }}" class="pagepartadmin_field_updatecontextname">
        <input type="hidden" name="{{ context }}_type_{{ id }}" data-suffix="_type_{{ id }}" value="{{ pagepartadmin.getClassName(pagepart) }}" class="pagepartadmin_field_updatecontextname">
    {% endif %}
    <input type="hidden" name="{{ context }}_sequence[]" data-suffix="_sequence[]" value="{{ id }}" class="pagepartadmin_field_updatecontextname">


    <!-- PP -->
    {% if form_has_errors_recursive(form['pagepartadmin_'~id]) %}
        {% set editmode = true %}
    {% endif %}
    {% if form['pagepartadmin_'~id].count %}
        {% set editable = true %}
    {% else %}
        {% set editable = false %}
    {% endif %}

    <section id="pp-{{ id }}" class="pp">
        <!-- PP - Header -->
        <header class="js-sortable-item__handle pp__header {% if not form['pagepartadmin_'~id].count %}pp__header--no-edit{% endif %}">
            <i class="fa fa-arrows pp__header__move-icon"></i>
            <h5 class="pp__header__head">
                {{ pagepartadmin.getType(pagepart)|trans }}
            </h5>
        </header>

        <!-- PP - actions -->
        <div class="pp__actions">
            <button type="button" class="btn--raise-on-hover pp__actions__action pp__actions__action--del" data-keyboard="true" data-toggle="modal" title="{{ 'pagepart.buttons.delete'|trans }}" data-target="#delete-pagepart-modal-{{ id }}">
                <i class="fa fa-trash"></i>
            </button>
            {% if editable %}
                <button type="button" class="js-edit-pp-btn btn--raise-on-hover pp__actions__action pp__actions__action--edit" title="{{ 'pagepart.buttons.edit'|trans }}" data-target-id="{{ id }}">
                    <i class="fa fa-edit"></i>
                </button>
            {% endif %}
            <button type="button" class="js-move-up-pp-btn btn--raise-on-hover pp__actions__action pp__actions__action--up" title="{{ 'pagepart.buttons.move_up'|trans }}" data-target-id="{{ id }}">
                <i class="fa fa-chevron-up"></i>
            </button>
            <button type="button" class="js-move-down-pp-btn btn--raise-on-hover pp__actions__action pp__actions__action--down" title="{{ 'pagepart.buttons.move_down'|trans }}" data-target-id="{{ id }}">
                <i class="fa fa-chevron-down"></i>
            </button>
            <button type="button" class="js-resize-pp-view-btn btn--raise-on-hover pp__actions__action pp__actions__action--resize" data-keyboard="true" data-toggle="modal" title="{{ 'pagepart.buttons.resize'|trans }}" data-target-id="{{ id }}">
                <i class="fa fa-minus"></i>
            </button>
        </div>

        <div class="pp__view clearfix">
            <!-- PP - View - Preview -->
            <div id="{{ id }}-preview-view" class="pp__view__block{% if editmode %} pp__view__block--hidden{% endif %}">
                {% include pagepart.adminview with {'resource': pagepart, 'pagepartadmin': pagepartadmin} %}
            </div>

            <!-- PP - View - Edit -->
            <div id="{{ id }}-edit-view" class="pp__view__block{% if not editmode %} pp__view__block--hidden{% endif %}">
                {% set pagepartid = 'pagepart'~id %}
                {% if pagepart.editTemplate is defined %}
                    {% include pagepart.editTemplate with {'resource': pagepart, 'pagepartid': pagepartid, 'form': form['pagepartadmin_'~id]} %}
                {% else %}
                    {{ form_widget(form['pagepartadmin_'~id]) }}
                {% endif %}
            </div>
        </div>
    </section>


    {% if pagepartadmin.possiblePagePartTypes | length > 0 %}
        <!-- New PP select -->
        {% include '@KunstmaanPagePart/PagePartAdminTwigExtension/add_pagepart.html.twig' %}
    {% endif %}


    <!-- PP - Del modal -->
    <div id="delete-pagepart-modal-{{ id }}" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Head -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <i class="fa fa-times"></i>
                    </button>
                    <h3>
                        {{ 'kuma_pagepart.modal.delete.title.%type%'|trans({'%type%': (pagepartadmin.getType(pagepart)) | trans }) }}
                    </h3>
                </div>

                <!-- Body -->
                <div class="modal-body">
                    <p>
                        {{ 'kuma_pagepart.modal.delete.text.%type%'|trans({'%type%': (pagepartadmin.getType(pagepart)) | trans }) }}
                    </p>
                </div>

                <!-- Footer -->
                <div class="modal-footer">
                    <button type="button" class="js-delete-pp-btn btn btn-danger btn--raise-on-hover" data-target-id="{{ id }}">
                        {{ 'kuma_pagepart.modal.delete.button.delete'|trans }}
                    </button>
                    <button type="button" class="btn btn-default btn--raise-on-hover" data-dismiss="modal">
                        {{ 'kuma_pagepart.modal.delete.button.cancel'|trans }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>