Merge

Controller/Admin/AbstractCrudController.php

 use EasyCorp\Bundle\EasyAdminBundle\Config\KeyValueStore;
 use EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext;
 use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController as EaAbstractCrudController;
+use EasyCorp\Bundle\EasyAdminBundle\Field\FormField;
+use EasyCorp\Bundle\EasyAdminBundle\Field\TextareaField;
+use EasyCorp\Bundle\EasyAdminBundle\Field\TextField;
 use EasyCorp\Bundle\EasyAdminBundle\Router\AdminUrlGenerator;
 use Lc\SovBundle\Doctrine\EntityManager;
+use Lc\SovBundle\Doctrine\Extension\DevAliasInterface;
+use Lc\SovBundle\Doctrine\Extension\SeoInterface;
 use Lc\SovBundle\Doctrine\Extension\TranslatableInterface;
-use Symfony\Component\HttpFoundation\JsonResponse;
+use Lc\SovBundle\Field\CollectionField;
+use Lc\SovBundle\Field\GalleryManagerField;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\HttpFoundation\RequestStack;
 use Symfony\Component\HttpFoundation\Session\SessionInterface;
-use Symfony\Component\Validator\Constraints\Json;
 use Twig\Environment;
 
 abstract class AbstractCrudController extends EaAbstractCrudController
 {
     protected $session;
     protected $request;
-    protected $em;
-    protected $twig;
 
     public function __construct(SessionInterface $session, RequestStack $request, EntityManager $em, Environment $twig)
     {
         $actionsArray[Crud::PAGE_INDEX] = [
                 Action::NEW => [
                         'icon' => 'plus',
-                        'label' => 'Créer'
+                        'label' => 'Créer',
                 ],
                 Action::EDIT => [
                         'class' => 'btn btn-sm btn-primary',
                         'class' => 'btn btn-outline-danger action-delete',
                 ],
                 Action::SAVE_AND_RETURN => $actionSaveAndReturn,
-                Action::INDEX => $actionIndex
+                Action::INDEX => $actionIndex,
         ];
 
         $actionsArray[Crud::PAGE_NEW] = [
                         'class' => 'btn btn-info float-right',
                 ],
                 Action::SAVE_AND_RETURN => $actionSaveAndReturn,
-                Action::INDEX => $actionIndex
+                Action::INDEX => $actionIndex,
         ];
 
         $actions->add(Crud::PAGE_EDIT, Action::INDEX);
         $crud->setPaginatorPageSize($maxResults);
     }
 
+    public function configureFields(string $pageName): iterable
+    {
+        if (in_array(SeoInterface::class, class_implements($this->getEntityFqcn()))) {
+            $seoPanel = [
+                    FormField::addPanel('Seo'),
+                    TextField::new('metaTitle')->setLabel('Meta Title')->setHelp(
+                            'Affiché dans les résultats de recherche Google'
+                    )->hideOnIndex(),
+                    TextareaField::new('metaDescription')->setLabel('Meta description')->setHelp(
+                            'Affiché dans les résultats de recherche Google'
+                    )->hideOnIndex(),
+                    CollectionField::new('oldUrls')
+                            ->setFormTypeOption('entry_type', TextType::class)->setLabel(
+                                    'Anciennes urls du document'
+                            )->hideOnIndex()
+            ];
+        }
+
+        if (in_array(DevAliasInterface::class, class_implements($this->getEntityFqcn()))) {
+            $confPanel = [
+                    FormField::addPanel('Conf'),
+                    TextField::new('devAlias')->hideOnIndex(),
+            ];
+        }
+
+        return array_merge($seoPanel, $confPanel);
+    }
+
 }
+

Controller/Admin/DashboardController.php

 
         $assets->addWebpackEncoreEntry('adminlte-common');
         $assets->addWebpackEncoreEntry('adminlte-index');
+        $assets->addWebpackEncoreEntry('adminlte-form');
 
         return $assets;
     }

Field/BooleanField.php

 use EasyCorp\Bundle\EasyAdminBundle\Contracts\Field\FieldInterface;
 use EasyCorp\Bundle\EasyAdminBundle\Field\FieldTrait;
 use Lc\SovBundle\Form\Type\FileManagerType;
+use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
 use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 
                         ->setProperty($propertyName)
                         ->setLabel($label)
                         ->setTemplatePath('@LcSov/adminlte/crud/field/toggle.html.twig')
-                        ->setFormType(ChoiceType::class)
-                        ->setFormTypeOption('expanded', false)
-                        ->setFormTypeOption('multiple', false)
-                        ->setFormTypeOption('choices', ['En ligne' => 1, 'Hors ligne' => 0]);
+                        ->setFormType(CheckboxType::class);
         }
 
 }

Field/CollectionField.php

                         ->setLabel($label)
                         ->setTemplatePath('@LcSov/tabler/crud/field/collection.html.twig')
                         ->setFormType(CollectionType::class)
-                        ->addCssClass('field-collection')
-                        ->addJsFiles('bundles/lcsov/js/form-type-collection-array.js')
+                        ->addWebpackEncoreEntries('adminlte-field-collection')
                         ->setFormTypeOption('allow_add', true)
                         ->setFormTypeOption('allow_delete', true)
                         ->setFormTypeOption('entry_options', array('label' => false))
+                        ->addCssClass('field-collection')
                         ->setFormTypeOption('attr', array('class' => 'field-collection-group'))
 
                         //Fixe le bug easyadmin lors de la gestion d'un champ de type array, laisser a false pour une entité

Field/GalleryManagerField.php

                 return (new self())
                         ->setProperty($propertyName)
                         ->setLabel($label)
-                        ->setTemplatePath('@LcSov/tabler/crud/field/collection.html.twig')
+                        ->setTemplatePath('@LcSov/adminlte/crud/field/collection.html.twig')
                         ->setFormType(CollectionType::class)
                         ->addCssClass('field-collection')
                         ->addWebpackEncoreEntries('adminlte-field-collection')

Field/StatusField.php

                         ->setProperty($propertyName)
                         ->setLabel($label)
                         ->setFormType(ChoiceType::class)
-                        ->setFormTypeOption('expanded', false)
+                        ->setFormTypeOption('expanded', true)
                         ->setFormTypeOption('multiple', false)
                         ->setFormTypeOption('choices', ['En ligne' => 1, 'Hors ligne' => 0])
                         ->setCustomOption('toggle_label', 'En ligne');

Form/Type/CrudFormType.php

+<?php
+
+namespace Lc\SovBundle\Form\Type;
+
+use ArrayObject;
+use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;
+use EasyCorp\Bundle\EasyAdminBundle\Dto\AssetsDto;
+use EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto;
+use EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto;
+use EasyCorp\Bundle\EasyAdminBundle\Field\FormField;
+use EasyCorp\Bundle\EasyAdminBundle\Form\EventListener\EasyAdminTabSubscriber;
+use EasyCorp\Bundle\EasyAdminBundle\Form\Type\EaFormPanelType;
+use Symfony\Bridge\Doctrine\Form\DoctrineOrmTypeGuesser;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\Options;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+/**
+ * Custom form type that deals with some of the logic used to render the
+ * forms used to create and edit EasyAdmin entities.
+ *
+ * @author Maxime Steinhausser <maxime.steinhausser@gmail.com>
+ */
+class CrudFormType extends AbstractType
+{
+
+    protected $parent;
+    protected $doctrineOrmTypeGuesser;
+    public function __construct(DoctrineOrmTypeGuesser $doctrineOrmTypeGuesser, \EasyCorp\Bundle\EasyAdminBundle\Form\Type\CrudFormType $crudFormType)
+    {
+        $this->parent = $crudFormType;
+        $this->doctrineOrmTypeGuesser = $doctrineOrmTypeGuesser;
+
+    }
+
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $this->parent->buildForm($builder, $options);
+        $entityDto = $options['entityDto'];
+        $currentFormPanel = 0;
+        foreach ($entityDto->getFields() as $fieldDto) {
+            if (null === $formFieldType = $fieldDto->getFormType()) {
+                $guessType = $this->doctrineOrmTypeGuesser->guessType($entityDto->getFqcn(), $fieldDto->getProperty());
+                $formFieldType = $guessType->getType();
+                $formFieldOptions = array_merge($guessType->getOptions(), $formFieldOptions);
+            }
+
+            if (EaFormPanelType::class === $formFieldType) {
+                ++$currentFormPanel;
+                $formPanels[$currentFormPanel] = [
+                        'form_tab' => $currentFormTab ?? null,
+                        'label' => $fieldDto->getLabel(),
+                        'help' => $fieldDto->getHelp(),
+                        'css_class' => $fieldDto->getCssClass(),
+                ];
+                foreach($fieldDto->getCustomOptions()->all() as $customOptionKey=> $customOption){
+                    $formPanels[$currentFormPanel][$customOptionKey] = $customOption;
+                }
+                continue;
+            }
+        }
+        $builder->setAttribute('ea_form_panels', $formPanels);
+        //$this->niche->buildForm($builder, $options);
+    }
+
+    public function finishView(FormView $view, FormInterface $form, array $options){
+        $this->parent->finishView($view, $form, $options);
+    }
+    public function configureOptions(OptionsResolver $resolver){
+        $this->parent->configureOptions($resolver);
+
+    }
+    public function getBlockPrefix(){
+        return $this->parent->getBlockPrefix();
+    }
+
+
+
+}

Resources/assets/app/adminlte/common/common.js

         }
     });
 
-    $('form .form-inline>select.form-control').each(function (i, elm) {
+    $('form select.form-control').each(function (i, elm) {
         if (!$(this).hasClass('disable-select2')) {
             setSelect2($(elm));
         }
             deleteForm.submit();
         });
 });
+

Resources/assets/app/adminlte/common/scss/form/_checkboxradio.scss

-/*CUSTOM Checkbox
- /* Customize the label (the container) */
-.form-check-label {display: block; position: relative; padding-left: 26px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none;  -ms-user-select: none;  user-select: none;}
-/* Hide the browser's default checkbox */
-.form-check-label input { position: absolute;  opacity: 0; cursor: pointer;  height: 0; width: 0;}
-/* Create a custom checkbox */
-
-.form-check{padding-left: 0px;}
-
-.form-sent .form-check-label input:invalid ~ .checkmark { border-color: #dc3545;}
-.form-check-label input:disabled ~ .checkmark {display: none}
-.form-check-label input ~ .checkmark { position: absolute; top: 0; left: 0; height: 18px;  width: 18px; background-color: #eee;border: 1px solid var(--primary);}
-.form-check-label.big input ~ .checkmark { height: 21px;  width: 21px; }
-.form-check-label input[type="checkbox"] ~ .checkmark {top: 2px;}
-.form-check-label input[type="radio"] ~ .checkmark { top:3px; border-radius: 50%;}
-.form-check-label:hover input ~ .checkmark { background-color: #ccc;}
-/* When the checkbox is checked, add a blue background */
-.form-check-label input:checked ~ .checkmark {background-color: var(--primary);}
-/* Create the checkmark/indicator (hidden when not checked) */
-.form-check-label .checkmark:after { content: ""; position: absolute; display: none;}
-/* Show the checkmark when checked */
-.form-check-label input:checked ~ .checkmark:after {display: block;}
-/* Style the checkmark/indicator */
-.form-check-label .checkmark:after {left: 7px; top: 3px; width: 6px; height: 11px; border: solid white;  border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
-.form-check-label input[type="checkbox"] ~ .checkmark:after {left: 6px; top: 2px; width: 6px; height: 10px; border: solid white;  border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
-.form-check-label input[type="radio"] ~ .checkmark:after {top: 4px; left: 4px; width: 8px;  height: 8px;  border-radius: 50%;  background: white;}
-
-.form-check-label.big input[type="checkbox"] ~ .checkmark:after {left: 7px; top: 3px; width: 6px; height: 11px;}
+/*CUSTOM Checkbox */
+
+.form-check {
+  padding-left: 0px;
+}
+
+.form-check-label {
+  display: block;
+  position: relative;
+  padding-left: 26px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  /* Hide the browser's default checkbox */
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  /* Create a custom checkbox */
+
+  input:disabled ~ .checkmark {
+    display: none
+  }
+
+  input ~ .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 18px;
+    width: 18px;
+    background-color: #eee;
+    border: 1px solid var(--primary);
+  }
+
+  input[type="checkbox"] ~ .checkmark {
+    top: 2px;
+  }
+
+  input[type="radio"] ~ .checkmark {
+    top: 3px;
+    border-radius: 50%;
+  }
+
+
+  /* When the checkbox is checked, add a blue background */
+  input:checked ~ .checkmark {
+    background-color: var(--primary);
+  }
+
+  /* Create the checkmark/indicator (hidden when not checked) */
+  .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+
+  /* Show the checkmark when checked */
+  input:checked ~ .checkmark:after {
+    display: block;
+  }
+
+  /* Style the checkmark/indicator */
+  .checkmark:after {
+    left: 7px;
+    top: 3px;
+    width: 6px;
+    height: 11px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+
+  input[type="checkbox"] ~ .checkmark:after {
+    left: 6px;
+    top: 2px;
+    width: 6px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+
+  input[type="radio"] ~ .checkmark:after {
+    top: 4px;
+    left: 4px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: white;
+  }
+
+}
+
+.form-check-label  :hover input ~ .checkmark {
+  background-color: #ccc;
+}
+
+
+.form-check-label.big input ~ .checkmark {
+  height: 21px;
+  width: 21px;
+}
+
+.form-check-label.big input[type="checkbox"] ~ .checkmark:after {
+  left: 7px;
+  top: 3px;
+  width: 6px;
+  height: 11px;
+}
+
 /* Create a custom radio button */
 

Resources/assets/app/adminlte/field/collection/app.collection.js

 
 
 function initCollectionWidget() {
+    Tools.log('czefe');
+
     $('.field-collection[data-prototype]').each(function (i, collectionWidget) {
         setCollectionWidgetSortable($(collectionWidget));
         reindexKeyCollectionWidget($(collectionWidget));
 
     if ($collectionWidget.data('allow-add')) {
         $collectionWidget.find('.field-collection-add').on('click', function (e) {
-
             // grab the prototype template
             var newWidget = $collectionWidget.attr('data-prototype');
             // replace the "__name__" used in the id and name of the prototype
 }
 
 function reindexKeyCollectionWidget($collectionWidget) {
+    Tools.log('ncncnc');
     if ($collectionWidget.data('reindex-key')) {
+        Tools.log('ncncnc');
         $collectionWidget.find('.field-collection-item').each(function (i, item) {
-            $(item).find('.input[type="text"]').each(function (y, field) {
+            $(item).find('input,textarea').each(function (y, field) {
                 let $field = $(field);
                 //Chanegment ID
-                let posId = indexOfLastDigit($field.prop('id'));
+                let posId = Tools.indexOfLastDigit($field.prop('id'));
                 let idPrefix = $field.prop('id').substr(0, posId);
                 let idSuffix = $field.prop('id').substr(posId + 1);
                 $field.prop('id', idPrefix + i + idSuffix);
 
                 //Chanegment Name
-                let posName = indexOfLastDigit($field.prop('name'));
+                let posName = Tools.indexOfLastDigit($field.prop('name'));
                 let namePrefix = $field.prop('name').substr(0, posName);
                 let nameSuffix = $field.prop('name').substr(posName + 1);
                 $field.prop('name', namePrefix + i + nameSuffix);

Resources/assets/app/adminlte/form/app.form.js

+
+import './form.js'
+import './form.scss'

Resources/assets/app/adminlte/form/form.js

+
+
+function checkForm() {
+    $('form').addClass('form-sent');
+    //Panel vues js
+    if ($('form').find('.tab-pane').length) {
+        $('form').find('.tab-pane').each(function (i, panel) {
+            if ($(panel).find(':invalid').length) {
+                $('#nav-params').find('.nav-item:eq(' + i + ')').addClass('has-invalid');
+            } else {
+                $('#nav-params').find('.nav-item:eq(' + i + ')').removeClass('has-invalid');
+            }
+        })
+    }
+}
+
+$('button[type="submit"]').on('click', function (e) {
+
+    checkForm();
+})

Resources/assets/app/adminlte/form/form.scss

+
+.form-sent {
+  .form-control:invalid {
+    border-color: #dc3545;
+    padding-right: 2.25rem;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center right calc(.375em + .1875rem);
+    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
+  }
+
+  select.form-control:invalid + .select2 .select2-selection {
+    border-color: #dc3545;
+  }
+
+  select.form-control:invalid + .select2 .select2-selection b {
+    border-color: #dc3545 transparent transparent transparent;
+  }
+
+  .form-check-label input:invalid ~ .checkmark {
+    border-color: #dc3545;
+  }
+}
+
+.nav-item .nav-link {
+  position: relative;
+
+  .invalid-form {
+    display: none;
+    position: absolute;
+    top: -7px;
+    right: -6px;
+    color: #dc3545;
+    background: #fff;
+    border-radius: 10px;
+    font-size: 1.2rem;
+  }
+}
+
+.nav-item.has-invalid .nav-link .invalid-form {
+  display: inline-block;
+  z-index: 2;
+}
+
+

Resources/config/services.yaml

+
+services:
+  _defaults:
+    autowire: true      # Automatically injects dependencies in your services.
+    autoconfigure: true # Automatically registers your services as commands, event subscribers, etc.
+
+  Lc\SovBundle\:
+    resource: '../../'
+    exclude:
+      - '../../DependencyInjection/'
+      - '../../Entity/'
+      - '../../Kernel.php'
+      - '../../Tests/'
+
+  Lc\SovBundle\Controller\:
+    resource: '../../Controller/'
+    tags: [ 'controller.service_arguments' ]
+
+  Lc\SovBundle\Form\Type\CrudFormType:
+    decorates: EasyCorp\Bundle\EasyAdminBundle\Form\Type\CrudFormType
+    arguments: ['@form.type_guesser.doctrine', '@.inner']
+
+  #   EasyCorp\Bundle\EasyAdminBundle\Form\Type\CrudFormType:
+  #       class: Lc\SovBundle\Form\Type\CrudFormType

Resources/views/adminlte/crud/_form.html.twig

 {% block page_actions_wrapper %}
 {% endblock page_actions_wrapper %}
 
+
 {% block main %}
 
     <div class="col-8">
-        <div class="card">
-            <div class="card-status-top bg-primary"></div>
-            <div class="card-header ">
-                {% set default_title = ea.crud.defaultPageTitle('new')|trans(ea.i18n.translationParameters, 'EasyAdminBundle') %}
-
-                <h2 class="card-title">{{ ea.crud.customPageTitle is null ? default_title|raw : ea.crud.customPageTitle('new')|trans(ea.i18n.translationParameters)|raw }}</h2>
-            </div>
-            <div class="card-body">
-                {% block form %}
-                    {{ form(form) }}
-                {% endblock form %}
-            </div>
-        </div>
-        <div class="clearfix"></div>
+    {% block form %}
+        {{ form(form) }}
+    {% endblock form %}
     </div>
 
     {% block form_footer %}

Resources/views/adminlte/crud/_test.html.twig

+
+MON GARS c'est de la balle !!!
+NICHE
+{{form_row(form.title)}}
+{{form_row(form.description)}}

Resources/views/adminlte/crud/form_theme.html.twig

             <div class="input-group">
                 <div class="input-group-prepend">
                     {% if form.parent.vars['row_attr']['data-sortable'] is defined %}
-                        <button type="button" class="btn btn-success lc-btn-sortable" data-toggle="tooltip" title="Trier les images">
+                        <button type="button" class="btn btn-success lc-btn-sortable" data-toggle="tooltip"
+                                title="Trier les images">
                             <i class="fa fa-arrows-alt"></i>
                         </button>
                     {% endif %}
-                    <button type="button" class="btn btn-primary lc-filemanager-open" data-id="{{ form.path.vars.id }}" data-toggle="tooltip" title="Sélectionner un fichier"
+                    <button type="button" class="btn btn-primary lc-filemanager-open" data-id="{{ form.path.vars.id }}"
+                            data-toggle="tooltip" title="Sélectionner un fichier"
                             data-target="{{ path('file_manager', {module:1, conf:'default'})|raw }}">
                         <i class="fa fa-folder-open"></i>
                     </button>
                 </div>
                 {{ form_widget(form.legend) }}
                 <div class="input-group-append">
-                    <button type="button" class="btn btn-danger lc-filemanager-delete" data-toggle="tooltip" title="Supprimer l'image"
+                    <button type="button" class="btn btn-danger lc-filemanager-delete" data-toggle="tooltip"
+                            title="Supprimer l'image"
                             data-id="{{ form.path.vars.id }}">
                         <i class="fa fa-trash"></i>
                     </button>
 {% endblock file_manager_widget %}
 
 {% block checkbox_radio_label -%}
-    {#- Do not display the label if widget is not defined in order to prevent double label rendering -#}
+    {#- Do not display the label if widget is not defined in order to prevent double label rendering         -#}
     {%- if widget is defined -%}
         {% set is_parent_custom = parent_label_class is defined and ('checkbox-custom' in parent_label_class or 'radio-custom' in parent_label_class or 'switch-custom' in parent_label_class) %}
         {% set is_custom = label_attr.class is defined and ('checkbox-custom' in label_attr.class or 'radio-custom' in label_attr.class or 'switch-custom' in label_attr.class) %}
             {{ widget|raw }}
             <span class="checkmark"></span>
 
-            {#  {% if translation_domain == 'lcshop' %}
+            {# {% if translation_domain == 'lcshop' %}
                   {{ name|lc_trad(easyadmin['entity']['name'], 'field') }}
-              {% else %}#}
+              {% else %} #}
             {{- label is not same as(false) ? (translation_domain is same as(false) ? label : label|trans(label_translation_parameters, translation_domain))|raw -}}
-            {#{% endif %}#}
+            {# {% endif %} #}
             {{- form_errors(form) -}}
         </label>
     {%- endif -%}
 {%- endblock checkbox_radio_label %}
+
+{% block form_start %}
+
+    {{ parent() }}
+
+    <div class="card card-outline">
+        <div class="card-header p-0 border-bottom-0">
+            <ul id="nav-params" class="nav nav-pills" role="navigation">
+                {% for panel_name, panel_config in ea_crud_form.form_panels|filter(panel_config => not panel_config.form_tab or panel_config.form_tab == tab_name) %}
+                    {% set panel_has_header = panel_config.label|default(false) or panel_config.icon|default(false) %}
+                    <li class="nav-item">
+                        <a href="#panel-{{ panel_name }} " class="nav-link {{ panel_name == 1 ? 'active' }}" data-toggle="tab" role="tab"
+                           aria-controls="panel-{{ panel_name }}">
+                            {{ panel_config.label|raw }}
+                           <i class="fa fa-exclamation-circle invalid-form"></i>
+                        </a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
+{% endblock form_start %}
+
+{% block ea_crud_widget_panels %}
+    <div class="tab-content">
+        {% for panel_name, panel_config in ea_crud_form.form_panels|filter(panel_config => not panel_config.form_tab or panel_config.form_tab == tab_name) %}
+            {% set panel_has_header = panel_config.label|default(false) or panel_config.icon|default(false) %}
+
+            {% set collapsible = panel_config.collapsible %}
+            {% set collapsed = panel_config.collapsed %}
+
+            <div class="tab-pane {{ panel_name == 1 ? 'active' }}" id="panel-{{ panel_name }}"
+                 aria-labelledby="{{ panel_name }}-tab">
+                {% if panel_config.template is defined and panel_config.template is not null %}
+                    {% include panel_config.template %}
+                {% else %}
+
+                    <div class="card {{ panel_config.css_class ?? '' }}">
+                        <div class="card-status-top bg-primary"></div>
+                        <div class="card-header ">
+                            {% if panel_has_header %}
+                                {# <div class="content-panel-header {{ collapsible ? 'collapsible' }} {{ panel_config.help|default(false) is not empty ? 'with-help' }}"> #}
+                                {% if collapsible %}
+                                    <a href="#content-{{ panel_name }}" data-toggle="collapse" class="content-panel-collapse {{ collapsed ? 'collapsed' }}" aria-expanded="{{ collapsed ? 'false' : 'true' }}" aria-controls="content-{{ panel_name }}">
+                                    <i class="fas fw fa-chevron-right collapse-icon"></i>
+                                {% endif %}
+
+                                {% if panel_config.icon|default(false) %}
+                                    <i class="{{ panel_config.icon }}"></i>
+                                {% endif %}
+                                {{ panel_config.label|raw }}
+
+                                {% if collapsible %}
+                                    </a>
+                                {% endif %}
+
+                                {% if panel_config.help|default(false) %}
+                                    <div class="content-panel-header-help">{{ panel_config.help|raw }}</div>
+                                {% endif %}
+
+                            {% endif %}
+                        </div>
+                        <div class="card-body  {{ collapsible ? 'collapse' }} {{ not collapsed ? 'show' }}">
+                            {% for field in form|filter(field => 'hidden' not in field.vars.block_prefixes and field.vars.ea_crud_form.form_panel == panel_name) %}
+                                {% if not field.vars.ea_crud_form.form_tab or field.vars.ea_crud_form.form_tab == tab_name %}
+                                    {{ form_row(field) }}
+                                {% endif %}
+                            {% endfor %}
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+
+        {% else %}
+            <div class="card">
+                <div class="card-status-top bg-primary"></div>
+                <div class="card-header "></div>
+                <div class="card-body">
+
+                    {% for field in form|filter(field => 'hidden' not in field.vars.block_prefixes and (not field.vars.ea_crud_form.form_tab or field.vars.ea_crud_form.form_tab == tab_name)) %}
+                        {{ form_row(field) }}
+                    {% endfor %}
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+
+{% endblock ea_crud_widget_panels %}