<form [formGroup]="form" (ngSubmit)="onSubmit()">
  
  <div class="section">
    @if (selectedFile()) {
      <div class="viewer-wrapper">
         <app-stl-viewer 
            [file]="selectedFile()"
            [color]="getSelectedFileColor()">
         </app-stl-viewer>
         <!-- Close button removed as requested -->
      </div>
    }
    
    <!-- Initial Dropzone (Visible only when no files) -->
    @if (items().length === 0) {
        <app-dropzone 
            [label]="'CALC.UPLOAD_LABEL' | translate" 
            [subtext]="'CALC.UPLOAD_SUB' | translate"
            [accept]="acceptedFormats"
            [multiple]="true"
            (filesDropped)="onFilesDropped($event)">
        </app-dropzone>
    }

    <!-- New File List with Details -->
    @if (items().length > 0) {
        <div class="items-grid">
            @for (item of items(); track item.file.name; let i = $index) {
                <div class="file-card" [class.active]="item.file === selectedFile()" (click)="selectFile(item.file)">
                    <div class="card-header">
                        <span class="file-name" [title]="item.file.name">{{ item.file.name }}</span>
                    </div>
                    
                    <div class="card-body">
                        <div class="card-controls">
                             <div class="qty-group">
                                <label>QTÀ</label>
                                <input 
                                    type="number" 
                                    min="1" 
                                    [value]="item.quantity"
                                    (change)="updateItemQuantity(i, $event)"
                                    class="qty-input"
                                    (click)="$event.stopPropagation()">
                            </div>

                            <div class="color-group">
                                <label>COLORE</label>
                                <app-color-selector 
                                    [selectedColor]="item.color" 
                                    [variants]="currentMaterialVariants()"
                                    (colorSelected)="updateItemColor(i, $event)">
                                </app-color-selector>
                            </div>
                        </div>
                        
                        <button type="button" class="btn-remove" (click)="removeItem(i); $event.stopPropagation()" title="Remove file">
                            X
                        </button>
                    </div>
                </div>
            }
        </div>
        
        <!-- "Add Files" Button (Visible only when files exist) -->
        <div class="add-more-container">
            <input #additionalInput type="file" [accept]="acceptedFormats" multiple hidden (change)="onAdditionalFilesSelected($event)">
            
            <button type="button" class="btn-add-more" (click)="additionalInput.click()">
                + {{ 'CALC.ADD_FILES' | translate }}
            </button>
        </div>
    }
    
    @if (items().length === 0 && form.get('itemsTouched')?.value) {
      <div class="error-msg">{{ 'CALC.ERR_FILE_REQUIRED' | translate }}</div>
    }
  </div>

  <div class="grid">
    <app-select
      formControlName="material"
      [label]="'CALC.MATERIAL' | translate"
      [options]="materials()"
    ></app-select>

    @if (mode() === 'easy') {
        <app-select
          formControlName="quality"
          [label]="'CALC.QUALITY' | translate"
          [options]="qualities()"
        ></app-select>
    } @else {
        <app-select
          formControlName="nozzleDiameter"
          [label]="'CALC.NOZZLE' | translate"
          [options]="nozzleDiameters()"
        ></app-select>
    }
  </div>
  
  <!-- Global quantity removed, now per item -->

  @if (mode() === 'advanced') {
    <div class="grid">
        <app-select
          formControlName="infillPattern"
          [label]="'CALC.PATTERN' | translate"
          [options]="infillPatterns()"
        ></app-select>

        <app-select
          formControlName="layerHeight"
          [label]="'CALC.LAYER_HEIGHT' | translate"
          [options]="layerHeights()"
        ></app-select>
    </div>

    <div class="grid">
        <app-input
          formControlName="infillDensity"
          type="number"
          [label]="'CALC.INFILL' | translate"
        ></app-input>
        
        <div class="checkbox-row">
            <input type="checkbox" formControlName="supportEnabled" id="support">
            <label for="support">{{ 'CALC.SUPPORT' | translate }}</label>
        </div>
    </div>

  }

  <app-input
    formControlName="notes"
    [label]="'CALC.NOTES' | translate"
    placeholder="Istruzioni specifiche..."
  ></app-input>

  <div class="actions">
    <!-- Progress Bar (Only when uploading i.e. progress < 100) -->
    @if (loading() && uploadProgress() < 100) {
        <div class="progress-container">
            <div class="progress-bar">
                <div class="progress-fill" [style.width.%]="uploadProgress()"></div>
            </div>
        </div>
    }

    <app-button 
      type="submit" 
      [disabled]="items().length === 0 || loading()" 
      [fullWidth]="true">
      {{ loading() ? (uploadProgress() < 100 ? 'Uploading...' : 'Processing...') : ('CALC.CALCULATE' | translate) }}
    </app-button>
  </div>
</form>
