{% trans_default_domain 'brick' %}

<div class="brick-add">
  <button class="btn btn-sm brick-action d-block text-center w-100"
          data-url="{{ path('aa_admin_content_builder_create', {
            parentBrickId: parent.id|default(null),
            _admin_locale: app.request.get('_admin_locale'),
          }) }}"><i class="fa fa-plus"></i></button>

  {% set hierarchy = aa_brick_get_allowed_children(brick) %}
  {% set categories = aa_brick_get_categories(brick) %}
{#  {{ dump(hierarchy) }} #}
{#  {{ dump(categories) }} #}

  <div class="add-brick-widget">
    <div class="close-overlay"></div>
    <div class="inner flex-column">
{#    <div class="search">#}
{#      <div class="btn-group">#}
{#        <input type="text">#}
{#        <button type="submit" class="btn btn-secondary"><i class="fa fa-search"></i></button>#}
{#      </div>#}
{#    </div>#}
{#    <div class="close">#}

      {#    </div> #}
      <div class="pb-3">
        <div class="brick-cat-tabs">
          <div class="btn-group d-flex">
            {% for cat, config in categories %}
              <button title="{{ config.label|trans }}"
                      class="btn {% if loop.index0 == 0 %}selected{% endif %}">{{ config.icon|trans|raw }}</button>
            {% endfor %}
          </div>
        </div>
        <div class="brick-cat-contents">
          {#        <ul class="list-unstyled"> #}
          {% for cat, config in categories %}
            <div class="brick-cat-content {% if loop.index0 == 0 %}selected{% endif %}"
                 data-brick-cat="{{ cat }}"
            >
              <div class="cat-title">{{ config.label|trans }}</div>
              <div class="brick-types">
                {% for brickType in config.types %}
                  <button class="brick-type btn" data-brick-type="{{ brickType }}"
                  >{{ brickType|trans }}</button>
                {% endfor %}
              </div>
            </div>
          {% endfor %}
          {#        </ul> #}
        </div>
      </div>
      <div class="validate d-flex justify-content-between">
        <button class="btn btn-close w-25">Fermer</button>
        <button class="btn btn-validate w-75">Ajouter</button>
      </div>
    </div>
  </div>
</div>