{% macro list_sortable(data, array_url) %}
    {% import _self as macros %}
    {% for row in data %}
        {% if row.section is defined %}
            <li data-sid="{{ row.section.id }}"
                data-pid="{% if row.section.parent %}{{ row.section.parent.id }}{% endif %}"
                {# cpurl => change_parent _url#}
                data-cpurl= "{{ array_url.cpurl }}"
                {# vurl => view_parent _url#}
                data-vurl= "{{ array_url.vurl|replace({'__itemId__': row.section.id }) }}"
                {# turl => toggle_parent _url#}
                data-turl= "{{ array_url.turl|replace({'__itemId__': row.section.id }) }}"
            >
                <div data-cid="{{ row.section.id }}" class="item_list edit_item {% if not row.section.isActive %}disabled{% endif %}">
                    <span class="item_label_sortable">
                        {{ row.section }}
{#                        {{ row.section.code|upper }} - {{ row.section.libelle }}#}
                    </span>
                </div>
                {% if row.children is defined and row.children|length > 0 %}
                    <ul>
                        {{ macros.list_sortable(row.children, array_url) }}
                    </ul>
                {% endif %}
            </li>
        {% endif %}
    {% endfor %}
{% endmacro %}

{% macro create_sortable_list(tree, array_url, array_trad) %}
    <div class="grid-x grid-padding-x">
        <div id="sortable_part" class="cell small-12 medium-6">
            <div class="sortable_display">
                {% for row in tree %}
                    <ul class="root">
                        <li data-cid="{{ row.section.id }}">
                            <div class="root_label">{{ row.section.code }} - {{ row.section.libelle }}</div>
                            {% if row.children|length > 0 %}
                                <ul class="sortableLists">
                                    {{ _self.list_sortable(row.children, array_url) }}
                                </ul>
                            {% endif %}
                        </li>
                    </ul>
                {% endfor %}
            </div>
        </div>
        <div class="small-12 medium-6">
            <div class="grid-x hide" id="view_section">
                <div class="cell small-12 mt-0-5 text-center">
                    <h4>{{ 'section.edit.title'|trans }}</h4>
                </div>
                <div class="cell small-12" id="form_content">
                </div>
                <div class="cell small-12 text-right mb-0-5">
                    <button type="button" class="button small delete no-mb" data-open="modalDeleteItem"><i class="fa fa-trash"></i>&nbsp;{{ 'delete'|trans }}</button>
                    <button type="button" class="button small update no-mb" id="btn_submit_edit_item"><i class="fa fa-pencil"></i>&nbsp;{{ 'save'|trans }}</button>
                </div>
            </div>
        </div>
    </div>

    {# Modal Disable / Enable #}
    <div class="reveal" id="modalDeleteItem" data-reveal>
        <div class="reveal-title" id="modalDeleteItemTitle">{{ array_trad.item_title_disable }}</div>
        <div class="reveal-body" id="modalDeleteItemBody">
            {{ array_trad.item_body_disable }}
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small delete" id="btn_submit_delete_item">{{ 'delete'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="reveal" id="modalConfirmDeleteItem" data-reveal>
        <div class="reveal-title">{{ array_trad.item_title_disable_confirm }}</div>
        <div class="reveal-body" id="modalConfirmDeleteItemBody"></div>
        <div class="reveal-footer">
            <button data-close class="button small cancel">{{ 'cancel'|trans }}</button>
            <button class="button small delete" id="btn_submit_confirm_delete_item">{{ 'delete'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
{% endmacro %}


{% macro child_sortable(data) %}
    {% import _self as macros %}
    {% for row in data %}
        {% if row.section is defined %}
            <li data-sid="{{ row.section.id }}"{% if row.children is defined and row.children|length > 0 %} class="sortableListsOpen"{% endif %}>
                <div class="item_list edit_item">
                    <span class="item_label_sortable">
                        {{ row.section }}
{#                        {{ row.section.code|upper }} - {{ row.section.libelle }}#}
                    </span>
                </div>
                {% if row.children is defined and row.children|length > 0 %}
                    <ul>
                        {{ macros.child_sortable(row.children) }}
                    </ul>
                {% endif %}
            </li>
        {% endif %}
    {% endfor %}
{% endmacro %}

{% macro child_sortable_articleFamille(data) %}
    {% import _self as macros %}
    {% for row in data %}
        {% if row.famille is defined %}
            <li data-afid="{{ row.famille.id }}"{% if row.children is defined and row.children|length > 0 %} class="sortableListsOpen"{% endif %}>
                <div class="item_list edit_item">
                    <span class="item_label_sortable">
                        {{ row.famille.code }} - {{ row.famille.libelle }}
                    </span>
                </div>
                {% if row.children is defined and row.children|length > 0 %}
                    <ul>
                        {{ macros.child_sortable_articleFamille(row.children) }}
                    </ul>
                {% endif %}
            </li>
        {% endif %}
    {% endfor %}
{% endmacro %}