<!-- Wrapper harmonisé avec design detailview -->
<div class="page-wrapper harmonized-create-view">

  <!-- Page Header harmonisé (identique à detailview) -->
  <div class="page-header">
    <div class="container-xl">
      <!-- Le contenu du header sera géré par le composant parent -->
    </div>
  </div>

  <!-- Page Body -->
  <div class="page-body">
    <div class="container-xl">

      <!-- Header Entity style adapté pour création -->
      <div class="entity-header" *ngIf="showEntityHeader">
        <div class="entity-content">
          <div class="entity-avatar">
            <mat-icon>add</mat-icon>
          </div>
          <div class="entity-info">
            <h1 class="entity-title">{{ entityTitle || 'Créer un nouvel élément' }}</h1>
            <p class="entity-subtitle">{{ entitySubtitle || 'Ajout d\'un nouvel élément • Statut: Brouillon' }}</p>

            <div class="entity-badges" *ngIf="entityBadges?.length">
              <div class="entity-badge" *ngFor="let badge of entityBadges">
                <mat-icon *ngIf="badge.icon">{{ badge.icon }}</mat-icon>
                {{ badge.label }}
              </div>
            </div>

            <div class="entity-actions">
              <button class="entity-action primary"
                      (click)="onSave()"
                      [disabled]="!canSave">
                <mat-icon>save</mat-icon>
                {{ saveLabel || 'Enregistrer' }}
              </button>
              <button class="entity-action"
                      (click)="onSaveAndContinue()"
                      [disabled]="!canSave"
                      *ngIf="showSaveAndContinue">
                <mat-icon>save</mat-icon>
                {{ saveAndContinueLabel || 'Enregistrer & Continuer' }}
              </button>
              <button class="entity-action danger"
                      (click)="onCancel()">
                <mat-icon>close</mat-icon>
                {{ cancelLabel || 'Annuler' }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Formulaire avec design harmonisé -->
      <div class="harmonized-form-container">

        <!-- Section principale avec accordéons harmonisés -->
        <ng-container *ngIf="formSections?.length; else simpleForm">
          <mat-accordion class="accordion-harmonized" multi>
            <mat-expansion-panel *ngFor="let section of formSections; let isFirst = first"
                                 [expanded]="isFirst || section.expanded">
              <mat-expansion-panel-header>
                <mat-panel-title>
                  <mat-icon class="panel-icon me-2" *ngIf="section.icon">{{ section.icon }}</mat-icon>
                  {{ section.title }}
                </mat-panel-title>
                <mat-panel-description *ngIf="section.description">
                  {{ section.description }}
                </mat-panel-description>
              </mat-expansion-panel-header>

              <div class="panel-content-harmonized">
                <!-- Actions de section -->
                <div class="section-actions" *ngIf="section.actions?.length">
                  <button class="btn btn-outline-primary btn-sm"
                          *ngFor="let action of section.actions"
                          (click)="onSectionAction(action, section)">
                    <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
                    {{ action.label }}
                  </button>
                </div>

                <!-- Formulaire dynamique avec grid harmonisé -->
                <div class="form-grid" [ngClass]="'form-grid-' + (section.columns || 'auto')">
                  <form [formGroup]="form" class="form-dynamic">
                    <div class="form-grid-item" *ngFor="let input of getSectionFields(section)">
                      <!-- ✨ Nouveau composant field-renderer - Plus de duplication ! -->
                      <app-field-renderer [field]="input" [form]="form"></app-field-renderer>
                    </div>
                  </form>
                </div>
              </div>
            </mat-expansion-panel>
          </mat-accordion>
        </ng-container>

        <!-- Formulaire simple sans sections -->
        <ng-template #simpleForm>
          <mat-accordion class="accordion-harmonized" multi>
            <mat-expansion-panel [expanded]="true">
              <mat-expansion-panel-header>
                <mat-panel-title>
                  <mat-icon class="panel-icon me-2">edit</mat-icon>
                  {{ formTitle || 'Informations' }}
                </mat-panel-title>
              </mat-expansion-panel-header>

              <div class="panel-content-harmonized">
                <div class="form-grid form-grid-auto">
                  <form [formGroup]="form" class="form-dynamic">
                    <div class="form-grid-item" *ngFor="let input of formData">
                      <!-- ✨ Même composant field-renderer - Code réutilisé ! -->
                      <app-field-renderer [field]="input" [form]="form"></app-field-renderer>
                    </div>
                  </form>
                </div>
              </div>
            </mat-expansion-panel>
          </mat-accordion>
        </ng-template>

      </div>

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