<!-- Wrapper harmonisé avec design detailview -->
<div class="page-wrapper harmonized-create-view">
  <!-- Loading bar harmonisé -->
  <mat-progress-bar mode="indeterminate" *ngIf="isLoadingDetails === true" class="progress-bar-harmonized"></mat-progress-bar>

  <!-- Header Entity style harmonisé avec detailview -->
  <div class="entity-header">
    <div class="entity-content">
      <div class="entity-avatar">
        <mat-icon>{{ !isEdit ? 'add' : 'edit' }}</mat-icon>
      </div>
      <div class="entity-info">
        <h1 class="entity-title" *ngIf="!isEditMultiple">
          {{ !isEdit ? 'Créer ' + moduleLabel : 'Modifier ' + moduleLabel }}
        </h1>
        <h1 class="entity-title" *ngIf="isEditMultiple">
          Modification multiple
        </h1>
        <p class="entity-subtitle" *ngIf="!isEditMultiple">
          {{ !isEdit ? 'Ajout d\'un nouvel élément • Statut: Brouillon' : 'Modification des informations • En cours' }}
        </p>
        <p class="entity-subtitle" *ngIf="isEditMultiple">
          {{ data.length }} {{ moduleLabel }}(s) sélectionné(s) • Modification en masse
        </p>

        <!-- Badges harmonisés -->
        <div class="entity-badges">
          <div class="entity-badge" *ngIf="!isEdit">
            <mat-icon>add</mat-icon>
            Nouvel élément
          </div>
          <div class="entity-badge" *ngIf="isEdit && !isEditMultiple">
            <mat-icon>edit</mat-icon>
            Modification unitaire
          </div>
          <div class="entity-badge entity-badge--info" *ngIf="isEditMultiple">
            <mat-icon>edit</mat-icon>
            Edition en masse
          </div>
        </div>

        <!-- Actions CTA harmonisées -->
        <div class="entity-actions">
          <button class="entity-action primary"
                  type="button"
                  (click)="addProject(); $event.stopPropagation()"
                  [disabled]="isLoading || (form && form.invalid)"
                  [class.disabled]="isLoading || (form && form.invalid)">
            <mat-icon>{{ isLoading ? 'hourglass_empty' : 'save' }}</mat-icon>
            {{ isLoading ? labelLoading : labelButton }}
            <!-- Debug info -->
            <span style="font-size: 10px; display: block;" *ngIf="form">
              (Valid: {{ form.valid }})
            </span>
          </button>
          <button class="entity-action danger" type="button" mat-dialog-close>
            <mat-icon>close</mat-icon>
            Annuler
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Page Body harmonisé -->
  <div class="page-body">
    <div class="container-xl">
      <!-- Formulaire avec accordéons harmonisés -->
      <div class="harmonized-form-container">
        <!-- Form wrapper autour de tout le contenu -->
        <form [formGroup]="form" class="form-dynamic" (keydown.enter)="$event.preventDefault()">
          <!-- Accordéons pour chaque section de métadatas -->
          <mat-accordion class="accordion-harmonized" multi="true">
            <mat-expansion-panel *ngFor="let section of metadatasSections; let sectionIndex = index"
                               [expanded]="true"
                               hideToggle="false"
                               class="expansion-panel-harmonized">
              <mat-expansion-panel-header class="expansion-header-harmonized">
                <mat-panel-title class="panel-title-harmonized">
                  <mat-icon class="panel-icon">{{ section.icon }}</mat-icon>
                  {{ section.title }}
                </mat-panel-title>
                <mat-panel-description class="panel-description-harmonized">
                  {{ section.fields.length }} champ(s)
                </mat-panel-description>
              </mat-expansion-panel-header>

              <!-- Contenu de la section avec grid harmonisé -->
              <div class="form-grid form-grid-auto panel-content-harmonized">
                <!-- Rendu harmonisé des champs métadata via field-renderer -->
                <ng-container *ngFor="let metadata of section.fields; let i = index">
                  <div class="form-grid-item">
                    <!-- ✨ Utilisation du field-renderer au lieu du code dupliqué -->
                    <app-field-renderer
                      [field]="metadata"
                      [form]="form"
                      [submitted]="submitted"
                      [isEditMultiple]="isEditMultiple"
                      [autocompleteData]="dataObjects"
                      [isLoadingAutocomplete]="isLoadingSearchObject"
                      [displayFn]="displayFn"
                      (autocompleteInput)="getServerResponseObject($event.value, $event.module)"
                      (autocompleteSelected)="selectEvent($event.event, $event.fieldName)"
                      (autocompleteFocused)="onFocused($event.event, $event.displayName)"
                      (autocompleteCleared)="clearInput()">
                    </app-field-renderer>
                  </div>
                </ng-container>
              </div>

            </mat-expansion-panel>
          </mat-accordion>

        </form>
      </div>
    </div>
  </div>
</div>