<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title">
      <i class="fas fa-play-circle text-primary"></i>
      {{ data.title }}
    </h4>
    <button type="button" class="btn-close" (click)="onCancel()" aria-label="Fermer">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">
    <div class="alert alert-info" *ngIf="!data.showInputField">
      <i class="fas fa-info-circle"></i>
      <strong>Attention :</strong> Cette action va exécuter l'opération sur les éléments sélectionnés.
    </div>

    <p class="mb-3">{{ data.message }}</p>

    <!-- Champ de saisie optionnel -->
    <div class="form-group mb-3" *ngIf="data.showInputField">
      <label [for]="'inputField'" class="form-label">
        {{ data.inputFieldLabel || 'Valeur' }}
        <span class="text-danger" *ngIf="data.inputFieldRequired && !data.isOptional">*</span>
        <span class="text-muted" *ngIf="data.isOptional">(optionnel)</span>
      </label>

      <!-- Champ avec préfixe -->
      <div *ngIf="data.hasPrefix && data.prefix" class="input-group">
        <span class="input-group-text command-prefix">{{ data.prefix }}</span>
        <input
          type="text"
          class="form-control"
          [id]="'inputField'"
          [(ngModel)]="inputFieldValue"
          [placeholder]="data.inputFieldPlaceholder || 'Saisir une valeur'"
          [maxlength]="data.inputFieldMaxLength || 50"
          [required]="!!(data.inputFieldRequired && !data.isOptional)"
        >
      </div>

      <!-- Champ simple sans préfixe -->
      <input
        *ngIf="!data.hasPrefix"
        type="text"
        class="form-control"
        [id]="'inputField'"
        [(ngModel)]="inputFieldValue"
        [placeholder]="data.inputFieldPlaceholder || 'Saisir une valeur'"
        [maxlength]="data.inputFieldMaxLength || 50"
        [required]="!!(data.inputFieldRequired && !data.isOptional)"
      >

      <!-- Prévisualisation de la commande complète -->
      <div *ngIf="data.hasPrefix && data.prefix && inputFieldValue" class="mt-2">
        <small class="text-info">
          <i class="fas fa-eye me-1"></i>
          Commande finale: <strong>{{ getFullCommand() }}</strong>
        </small>
      </div>

      <!-- Texte d'aide -->
      <small class="text-muted d-block mt-1" *ngIf="data.helpText">
        <i class="fas fa-info-circle me-1"></i>
        {{ data.helpText }}
      </small>

      <!-- Compteur de caractères -->
      <small class="text-muted d-block mt-1" *ngIf="!data.helpText">
        Maximum {{ data.inputFieldMaxLength || 50 }} caractères
        <span *ngIf="inputFieldValue.length > 0">
          ({{ inputFieldValue.length }}/{{ data.inputFieldMaxLength || 50 }})
        </span>
      </small>
    </div>

    <div class="selected-items" *ngIf="data.records && data.records.length > 0">
      <h6>Éléments sélectionnés ({{ data.count }}) :</h6>
      <div class="items-list">
        <div class="item" *ngFor="let record of data.records.slice(0, 5)">
          <i class="fas fa-file-alt text-muted"></i>
          <span>{{ record.office_id || record.name || record.id || 'Élément sans nom' }}</span>
        </div>
        <div class="more-items" *ngIf="data.records.length > 5">
          <i class="fas fa-ellipsis-h"></i>
          <span>et {{ data.records.length - 5 }} autre(s) élément(s)...</span>
        </div>
      </div>
    </div>

    <div class="form-group mt-3" *ngIf="data.requiresConfirmation">
      <div class="form-check">
        <input 
          class="form-check-input" 
          type="checkbox" 
          id="confirmExecution" 
          [checked]="confirmationChecked"
          (change)="onCheckboxChange($event)"
        >
        <label class="form-check-label" for="confirmExecution">
          Je confirme vouloir exécuter cette opération
        </label>
      </div>
    </div>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="onCancel()">
      <i class="fas fa-times"></i>
      Annuler
    </button>
    <button 
      type="button" 
      class="btn btn-primary" 
      (click)="onConfirm()"
      [disabled]="isConfirmDisabled()"
    >
      <i class="fas fa-play"></i>
      {{ data.confirmButtonText }}
    </button>
  </div>
</div> 