{% extends "@AutoAdminAdmin/base_layout.html.twig" %}

{% import "@AutoAdminMenu/admin/menu_item/_macro/tree.html.twig" as menu_macros %}

{% block page_heading %}
  <div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">{{ entityName|capitalize }}</h1>
    <div class="heading-actions"></div>
  </div>
{% endblock %}

{% block page_inner %}
  <!-- Content Row -->
  <div class="row menu-tree-wrap">
    <div class="col-6">
      <div class="menu-tree-outer card border-left-primary">
        <div class="d-flex">
          <div class="flex-grow-1">
            <button class="btn btn-sm btn-primary menu-expand-all"><i class="fa fa-expand"></i></button>
            <button class="btn btn-sm btn-primary menu-compress-all"><i class="fa fa-compress"></i></button>
          </div>
          <div>
            <div class="flex-grow-1">
              <button class="btn btn-sm btn-primary menu-expand-all"
                      data-global-action="create"
              ><i class="fa fa-plus"></i> Nouvel élément de menu</button>
            </div>
          </div>
        </div>

        {% if root is not empty %}
          {{ menu_macros.tree(root) }}
        {% else %}
          <strong>Menu corrompu, veuillez contacter un administrateur.</strong>
        {% endif %}

        <div class="d-flex">
          <div>

          </div>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card border-left-primary h-100 p-3">
        {% set data_default_html %}
          <div class="m-auto"><i class="fa fa-arrow-left"></i> Cliquer sur un bouton d'édition pour modifier un item</div>
        {% endset %}
        <div class="menu-item-form" data-default-html="{{ data_default_html|e }}">
          {{ data_default_html }}
        </div>
      </div>
    </div>
    <div class="main-loader align-items-center" style="display: none;">
      <div class="align-self-center">
        <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
      </div>
    </div>
  </div>
{% endblock %}