<div class="tab-form-container">
  
  <!-- Layout principal com card lateral -->
  <div class="main-layout" [class.with-side-card]="sideCardEnabled">
    
    <!-- Formulário principal -->
    <div class="form-section">
      <form [formGroup]="form" class="tab-form">
    
        <!-- 🚀 SISTEMA DE SUB-ABAS DINÂMICO -->
        <div class="sub-tab-system" *ngIf="getAvailableSubTabs().length > 1; else singleTabTemplate">
          <!-- Sub-tab Headers -->
          <div class="sub-tab-headers">
            <button 
              *ngFor="let subTab of getAvailableSubTabs()"
              type="button"
              class="sub-tab-header"
              [class.active]="selectedSubTab === subTab.id"
              (click)="selectSubTab(subTab.id)">
              <i class="fas {{ subTab.icon }}"></i>
              {{ subTab.label }}
            </button>
          </div>

          <!-- 🎯 SUB-TAB CONTENT DINÂMICO -->
          <div class="sub-tab-content-container">
            <!-- 🚀 CONTAINER DINÂMICO SEMPRE PRESENTE -->
            <ng-container #dynamicComponentOutlet></ng-container>
            
            <!-- Renderização dinâmica baseada na configuração -->
            <div 
              *ngFor="let subTab of getAvailableSubTabs()" 
              class="sub-tab-content" 
              [class.active]="selectedSubTab === subTab.id"
            >
              
              <!-- 🎯 TEMPLATE TYPE: FIELDS - Renderiza campos específicos -->
              <div *ngIf="subTab.templateType === 'fields'" class="form-fields">
                <div
                  *ngFor="let field of subTab.fields"
                  class="form-field"
                  [class.full-width]="
                    field.type === 'send-image' || 
                    field.type === 'send-pdf' ||
                    field.type === 'checkbox' || 
                    field.type === 'textarea'
                  "
                  [style.display]="shouldShowField(field) ? 'block' : 'none'"
                >
                  <!-- Campos de texto/number/email/tel/password padrão -->
                  <div
                    *ngIf="
                      field.type !== 'select' &&
                      field.type !== 'select-api' &&
                      field.type !== 'send-image' &&
                      field.type !== 'send-pdf' &&
                      field.type !== 'checkbox' &&
                      field.type !== 'checkbox-grouped' &&
                      field.type !== 'multi-select' &&
                      field.type !== 'slide-toggle' &&
                      field.type !== 'remote-select' &&
                      field.type !== 'kilometer-input' &&
                      field.type !== 'color-input' &&
                      field.type !== 'currency-input' &&
                      field.type !== 'textarea-input' &&
                      field.type !== 'password-input'
                    "
                    class="custom-field"
                  >
                    <app-custom-input [formControlName]="field.key" [field]="field">
                    </app-custom-input>
                  </div>

                  <!-- Kilometer Input -->
                  <div *ngIf="field.type === 'kilometer-input'" class="kilometer-input-field">
                    <app-kilometer-input
                      [formControlName]="field.key"
                      [field]="field"
                    ></app-kilometer-input>
                  </div>

                  <!-- Color Input -->
                  <div *ngIf="field.type === 'color-input'" class="color-input-field">
                    <app-color-input
                      [formControlName]="field.key"
                      [field]="field"
                    ></app-color-input>
                  </div>

                  <!-- Currency Input -->
                  <div *ngIf="field.type === 'currency-input'" class="currency-input-field">
                    <app-currency-input
                      [formControlName]="field.key"
                      [field]="field"
                    ></app-currency-input>
                  </div>

                  <!-- Textarea Input -->
                  <div *ngIf="field.type === 'textarea-input'" class="textarea-input-field">
                    <app-textarea-input
                      [formControlName]="field.key"
                      [field]="field"
                    ></app-textarea-input>
                  </div>

                  <!-- Password Input -->
                  <div *ngIf="field.type === 'password-input'" class="password-input-field">
                    <app-password-input
                      [formControlName]="field.key"
                      [field]="field"
                    ></app-password-input>
                  </div>

                  <!-- Select básico nativo -->
                  <div *ngIf="field.type === 'select'" class="native-select-field">
                  
                    <label [for]="field.key">
                      {{ field.label }}
                      <span *ngIf="field.required" class="required-indicator">*</span>
                    </label>
                    
                    <!-- Select para campos com returnObjectSelected (usando ngValue) -->
                    <select 
                      *ngIf="field.returnObjectSelected"
                      [id]="field.key"
                      [formControlName]="field.key"
                      [required]="field.required || false"
                      class="native-select"
                    >
                      <option [ngValue]="null" disabled>Selecione {{ field.label }}</option>
                      <option 
                        *ngFor="let option of field.options" 
                        [ngValue]="option.value"
                      >
                        {{ option.label }}
                      </option>
                    </select>
                    
                    <!-- Select padrão para campos sem returnObjectSelected -->
                    <select 
                      *ngIf="!field.returnObjectSelected"
                      [id]="field.key"
                      [formControlName]="field.key"
                      [required]="field.required || false"
                      class="native-select"
                    >
                      <option value="" disabled>Selecione {{ field.label }}</option>
                      <option 
                        *ngFor="let option of field.options" 
                        [value]="option.value"
                      >
                        {{ option.label }}
                      </option>
                    </select>
                  </div>

                  <!-- Select com API -->
                  <div *ngIf="field.type === 'select-api'" class="native-select-field">
                    <label [for]="field.key">
                      {{ field.label }}
                      <span *ngIf="field.required" class="required-indicator">*</span>
                    </label>
                    <select 
                      [id]="field.key"
                      [formControlName]="field.key"
                      [required]="field.required || false"
                      class="native-select"
                      (focus)="loadApiOptions(field)"
                    >
                      <option value="" disabled>Carregando...</option>
                      <option 
                        *ngFor="let option of apiOptionsMap[field.key] || []" 
                        [value]="option.value"
                      >
                        {{ option.label }}
                      </option>
                    </select>
                  </div>

                  <!-- Upload de imagens -->
                  <div *ngIf="field.type === 'send-image'">
                    <app-image-uploader
                      [previewImages]="(imagePreviewsMap[field.key] | async) || []"
                      [maxImages]="field.imageConfiguration?.maxImages ?? 3"
                      [maxSizeMb]="field.imageConfiguration?.maxSizeMb ?? 1.5"
                      [allowedTypes]="
                        field.imageConfiguration?.allowedTypes ??
                        ['image/jpeg', 'image/png']
                      "
                      (imagesChange)="handleImageChange(field.key, $event)"
                      (previewImagesChange)="handlePreviewImagesChange(field.key, $event)"
                      (error)="handleImageError($event)"
                    ></app-image-uploader>
                  </div>

                  <!-- Upload de PDFs -->
                  <div *ngIf="field.type === 'send-pdf'">
                    <app-pdf-uploader
                      [title]="field.label || 'Upload de Documentos'"
                      [subtitle]="'Faça o upload dos documentos necessários'"
                      [attachments]="(pdfAttachmentsMap[field.key] | async) || []"
                      [pendingDocuments]="field.pdfConfiguration?.pendingDocuments || []"
                      [maxDocuments]="field.pdfConfiguration?.maxDocuments ?? 5"
                      [maxSizeMb]="field.pdfConfiguration?.maxSizeMb ?? 10"
                      [allowedTypes]="
                        field.pdfConfiguration?.allowedTypes ??
                        ['application/pdf']
                      "
                      [showPendingList]="true"
                      [acceptMultiple]="true"
                      (attachmentsChange)="handlePdfAttachmentChange(field.key, $event)"
                      (filesChange)="handlePdfFilesChange(field.key, $event)"
                      (error)="handlePdfError($event)"
                      (documentUploaded)="handlePdfDocumentUploaded(field.key, $event)"
                    ></app-pdf-uploader>
                  </div>

                  <!-- Checkboxes -->
                  <div *ngIf="field.type === 'checkbox'">
                    <app-checkbox-list
                      [formControl]="getCheckboxControl(field.key)"
                      [items]="field.checkBoxList || []"
                    ></app-checkbox-list>
                  </div>

                  <!-- Checkboxes Agrupados -->
                  <div *ngIf="field.type === 'checkbox-grouped'">
                    <app-checkbox-grouped
                      [formControl]="getCheckboxControl(field.key)"
                      [groups]="field.groups || []"
                      [hideLabel]="field.hideLabel || false"
                    ></app-checkbox-grouped>
                  </div>

                  <!-- Multi-Select -->
                  <div *ngIf="field.type === 'multi-select'">
                    <app-multi-select
                      [formControl]="getFormControl(field.key)"
                      [options]="field.options || []"
                      [label]="field.label"
                      [placeholder]="field.placeholder || 'Selecione...'"
                      [required]="field.required || false"
                      [disabled]="field.disabled || false"
                      [maxSelections]="field.max"
                    ></app-multi-select>
                  </div>

                  <!-- Slide Toggle -->
                  <div *ngIf="field.type === 'slide-toggle'" class="slide-toggle-field">
                    <app-slide-toggle
                      [formControlName]="field.key"
                      [label]="field.label"
                      [disabled]="field.disabled || false"
                      [color]="'primary'"
                      [labelPosition]="'after'"
                    ></app-slide-toggle>
                  </div>

                  <!-- Remote Select -->
                  <div *ngIf="field.type === 'remote-select' && field.remoteConfig" class="remote-select-field">
                    <label *ngIf="!field.hideLabel" [for]="field.key">
                      {{ field.label }}
                      <span *ngIf="field.required" class="required-indicator">*</span>
                    </label>
                    <app-remote-select
                      [formControlName]="field.key"
                      [config]="getProcessedRemoteConfig(field)"
                      [required]="field.required || false"
                      [disabled]="field.disabled || false"
                    ></app-remote-select>
                  </div>
                

                  <!-- Mensagens de erro -->
                  <div
                    class="error-message"
                    *ngIf="form.get(field.key)?.invalid && form.get(field.key)?.touched"
                  >
                    <span *ngIf="form.get(field.key)?.errors?.['pattern']">
                      Formato inválido.
                    </span>
                    <span *ngIf="form.get(field.key)?.errors?.['required']">
                      Este campo é obrigatório.
                    </span>
                    <span *ngIf="form.get(field.key)?.errors?.['email']">
                      Email inválido.
                    </span>
                    <span *ngIf="form.get(field.key)?.errors?.['invalidOption']">
                      Opção inválida.
                    </span>
                    <span *ngIf="form.get(field.key)?.errors?.['minlength']">
                      Mínimo de {{ form.get(field.key)?.errors?.['minlength']?.requiredLength }} caracteres.
                    </span>
                    <span *ngIf="form.get(field.key)?.errors?.['passwordStrength']">
                      <div *ngIf="form.get(field.key)?.errors?.['passwordStrength']?.minLength">
                        A senha deve ter pelo menos 8 caracteres.
                      </div>
                      <div *ngIf="form.get(field.key)?.errors?.['passwordStrength']?.requiresNumber">
                        A senha deve conter pelo menos 1 número.
                      </div>
                      <div *ngIf="form.get(field.key)?.errors?.['passwordStrength']?.requiresUppercase">
                        A senha deve conter pelo menos 1 letra maiúscula.
                      </div>
                      <div *ngIf="form.get(field.key)?.errors?.['passwordStrength']?.requiresLowercase">
                        A senha deve conter pelo menos 1 letra minúscula.
                      </div>
                      <div *ngIf="form.get(field.key)?.errors?.['passwordStrength']?.requiresSpecial">
                        A senha deve conter pelo menos 1 caractere especial (&#64;$!%*?&amp;).
                      </div>
                    </span>
                    <span *ngIf="form.get(field.key)?.errors?.['passwordMatch']">
                      As senhas não coincidem.
                    </span>
                  </div>
                </div>
              </div>

              <!-- 🎯 TEMPLATE TYPE: COMPONENT - Sistema de componentes dinâmicos -->
              <!-- <div *ngIf="subTab.templateType === 'component'" class="dynamic-component"> -->
                <!-- Componentes dinâmicos são criados no container acima -->
              <!-- </div> -->

              <!-- 🎯 TEMPLATE TYPE: CUSTOM - Templates customizados -->
              <!-- <div *ngIf="subTab.templateType === 'custom'" class="custom-template"> -->
                <!-- 📋 TEMPLATE PROJECTION VIA NG-CONTENT -->
                <!-- <div class="ng-content-projection"> -->
                  <!-- <ng-content [select]="'[slot=' + subTab.id + ']'"></ng-content> -->
                <!-- </div> -->
                
                <!-- ⚠️ FALLBACK: Coming Soon -->
                <div *ngIf="subTab.comingSoon" class="coming-soon">
                  <i class="fas {{ subTab.icon }} fa-3x"></i>
                  <h3>{{ subTab.label }}</h3>
                  <p>Funcionalidade em desenvolvimento...</p>
                </div>
              </div>
              
            <!-- </div> -->
            
          </div>
        </div>

        <!-- 🎯 TEMPLATE: Aba única -->
        <ng-template #singleTabTemplate>
          <div class="single-tab-content">
          <ng-container *ngFor="let subTab of getAvailableSubTabs()">
            
            <!-- Renderização de campos para aba única -->
            <div *ngIf="subTab.templateType === 'fields'" class="form-fields">
              <div
                *ngFor="let field of subTab.fields"
                class="form-field"
                [class.full-width]="
                  field.type === 'send-image' || 
                  field.type === 'send-pdf' ||
                  field.type === 'checkbox' || 
                  field.type === 'textarea'
                "
                [style.display]="shouldShowField(field) ? 'block' : 'none'"
              >
                <!-- Mesmo sistema de renderização de campos -->
                <div
                  *ngIf="
                    field.type !== 'select' &&
                    field.type !== 'select-api' &&
                    field.type !== 'send-image' &&
                    field.type !== 'send-pdf' &&
                    field.type !== 'checkbox' &&
                    field.type !== 'multi-select' &&
                    field.type !== 'slide-toggle' &&
                    field.type !== 'remote-select' &&
                    field.type !== 'kilometer-input' &&
                    field.type !== 'color-input' &&
                    field.type !== 'currency-input' &&
                    field.type !== 'textarea-input' &&
                    field.type !== 'password-input'
                  "
                  class="custom-field"
                >
                  <app-custom-input [formControlName]="field.key" [field]="field">
                  </app-custom-input>
                </div>

                <!-- Kilometer Input -->
                <div *ngIf="field.type === 'kilometer-input'" class="kilometer-input-field">
                  <app-kilometer-input
                    [formControlName]="field.key"
                    [field]="field"
                  ></app-kilometer-input>
                </div>

                <!-- Color Input -->
                <div *ngIf="field.type === 'color-input'" class="color-input-field">
                  <app-color-input
                    [formControlName]="field.key"
                    [field]="field"
                  ></app-color-input>
                </div>

                <!-- Currency Input -->
                <div *ngIf="field.type === 'currency-input'" class="currency-input-field">
                  <app-currency-input
                    [formControlName]="field.key"
                    [field]="field"
                  ></app-currency-input>
                </div>

                <!-- Textarea Input -->
                <div *ngIf="field.type === 'textarea-input'" class="textarea-input-field">
                  <app-textarea-input
                    [formControlName]="field.key"
                    [field]="field"
                  ></app-textarea-input>
                </div>

                <!-- Password Input -->
                <div *ngIf="field.type === 'password-input'" class="password-input-field">
                  <app-password-input
                    [formControlName]="field.key"
                    [field]="field"
                  ></app-password-input>
                </div>

                <div *ngIf="field.type === 'select'" class="native-select-field">
                  <label [for]="field.key">{{ field.label }}</label>
                  
                  <!-- Select para campos com returnObjectSelected (usando ngValue) -->
                  <select 
                    *ngIf="field.returnObjectSelected"
                    [id]="field.key"
                    [formControlName]="field.key"
                    [required]="field.required || false"
                    class="native-select"
                  >
                    <option [ngValue]="null" disabled>Selecione {{ field.label }}</option>
                    <option 
                      *ngFor="let option of field.options" 
                      [ngValue]="option.value"
                    >
                      {{ option.label }}
                    </option>
                  </select>
                  
                  <!-- Select padrão para campos sem returnObjectSelected -->
                  <select 
                    *ngIf="!field.returnObjectSelected"
                    [id]="field.key"
                    [formControlName]="field.key"
                    [required]="field.required || false"
                    class="native-select"
                  >
                    <option value="" disabled>Selecione {{ field.label }}</option>
                    <option 
                      *ngFor="let option of field.options" 
                      [value]="option.value"
                    >
                      {{ option.label }}
                    </option>
                  </select>
                </div>

                <div *ngIf="field.type === 'select-api'" class="native-select-field">
                  <label [for]="field.key">{{ field.label }}</label>
                  <select 
                    [id]="field.key"
                    [formControlName]="field.key"
                    [required]="field.required || false"
                    class="native-select"
                    (focus)="loadApiOptions(field)"
                  >
                    <option value="" disabled>Carregando...</option>
                    <option 
                      *ngFor="let option of apiOptionsMap[field.key] || []" 
                      [value]="option.value"
                    >
                      {{ option.label }}
                    </option>
                  </select>
                </div>

                <div *ngIf="field.type === 'send-image'">
                  <app-image-uploader
                    [previewImages]="(imagePreviewsMap[field.key] | async) || []"
                    [maxImages]="field.imageConfiguration?.maxImages ?? 3"
                    [maxSizeMb]="field.imageConfiguration?.maxSizeMb ?? 1.5"
                    [allowedTypes]="
                      field.imageConfiguration?.allowedTypes ??
                      ['image/jpeg', 'image/png']
                    "
                    (imagesChange)="handleImageChange(field.key, $event)"
                    (previewImagesChange)="handlePreviewImagesChange(field.key, $event)"
                    (error)="handleImageError($event)"
                  ></app-image-uploader>
                </div>

                <!-- Upload de PDFs -->
                <div *ngIf="field.type === 'send-pdf'">
                  <app-pdf-uploader
                    [title]="field.label || 'Upload de Documentos'"
                    [subtitle]="'Faça o upload dos documentos necessários'"
                    [attachments]="(pdfAttachmentsMap[field.key] | async) || []"
                    [pendingDocuments]="field.pdfConfiguration?.pendingDocuments || []"
                    [maxDocuments]="field.pdfConfiguration?.maxDocuments ?? 5"
                    [maxSizeMb]="field.pdfConfiguration?.maxSizeMb ?? 10"
                    [allowedTypes]="
                      field.pdfConfiguration?.allowedTypes ??
                      ['application/pdf']
                    "
                    [showPendingList]="true"
                    [acceptMultiple]="true"
                    (attachmentsChange)="handlePdfAttachmentChange(field.key, $event)"
                    (filesChange)="handlePdfFilesChange(field.key, $event)"
                    (error)="handlePdfError($event)"
                    (documentUploaded)="handlePdfDocumentUploaded(field.key, $event)"
                  ></app-pdf-uploader>
                </div>

                <div *ngIf="field.type === 'checkbox'">
                  <app-checkbox-list
                    [formControl]="getCheckboxControl(field.key)"
                    [items]="field.checkBoxList || []"
                  ></app-checkbox-list>
                </div>

                <!-- Checkboxes Agrupados -->
                <div *ngIf="field.type === 'checkbox-grouped'">
                  <app-checkbox-grouped
                    [formControl]="getCheckboxControl(field.key)"
                    [groups]="field.groups || []"
                    [hideLabel]="field.hideLabel || false"
                  ></app-checkbox-grouped>
                </div>

                <!-- Multi-Select -->
                <div *ngIf="field.type === 'multi-select'">
                  <app-multi-select
                    [formControl]="getFormControl(field.key)"
                    [options]="field.options || []"
                    [label]="field.label"
                    [placeholder]="field.placeholder || 'Selecione...'"
                    [required]="field.required || false"
                    [disabled]="field.disabled || false"
                    [maxSelections]="field.max"
                  ></app-multi-select>
                </div>

                <!-- Slide Toggle -->
                <div *ngIf="field.type === 'slide-toggle'" class="slide-toggle-field">
                  <app-slide-toggle
                    [formControlName]="field.key"
                    [label]="field.label"
                    [disabled]="field.disabled || false"
                    [color]="'primary'"
                    [labelPosition]="'after'"
                  ></app-slide-toggle>
                </div>

                <!-- Remote Select -->
                <div *ngIf="field.type === 'remote-select' && field.remoteConfig" class="remote-select-field">
                  <label *ngIf="!field.hideLabel" [for]="field.key">
                    {{ field.label }}
                    <span *ngIf="field.required" class="required-indicator">*</span>
                  </label>
                  <app-remote-select
                    [formControlName]="field.key"
                    [config]="getProcessedRemoteConfig(field)"
                    [required]="field.required || false"
                    [disabled]="field.disabled || false"
                  ></app-remote-select>
                </div>               

                <div
                  class="error-message"
                  *ngIf="form.get(field.key)?.invalid && form.get(field.key)?.touched"
                >
                  <span *ngIf="form.get(field.key)?.errors?.['pattern']">
                    Formato inválido.
                  </span>
                  <span *ngIf="form.get(field.key)?.errors?.['required']">
                    Este campo é obrigatório.
                  </span>
                  <span *ngIf="form.get(field.key)?.errors?.['email']">
                    Email inválido.
                  </span>
                  <span *ngIf="form.get(field.key)?.errors?.['invalidOption']">
                    Opção inválida.
                  </span>
                  <span *ngIf="form.get(field.key)?.errors?.['minlength']">
                    Mínimo de {{ form.get(field.key)?.errors?.['minlength']?.requiredLength }} caracteres.
                  </span>
                  <span *ngIf="form.get(field.key)?.errors?.['passwordStrength']">
                    <div *ngIf="form.get(field.key)?.errors?.['passwordStrength']?.minLength">
                      A senha deve ter pelo menos 8 caracteres.
                    </div>
                    <div *ngIf="form.get(field.key)?.errors?.['passwordStrength']?.requiresNumber">
                      A senha deve conter pelo menos 1 número.
                    </div>
                    <div *ngIf="form.get(field.key)?.errors?.['passwordStrength']?.requiresUppercase">
                      A senha deve conter pelo menos 1 letra maiúscula.
                    </div>
                    <div *ngIf="form.get(field.key)?.errors?.['passwordStrength']?.requiresLowercase">
                      A senha deve conter pelo menos 1 letra minúscula.
                    </div>
                    <div *ngIf="form.get(field.key)?.errors?.['passwordStrength']?.requiresSpecial">
                      A senha deve conter pelo menos 1 caractere especial (&#64;$!%*?&amp;).
                    </div>
                  </span>
                  <span *ngIf="form.get(field.key)?.errors?.['passwordMatch']">
                    As senhas não coincidem.
                  </span>
                </div>
              </div>
            </div>
            
          </ng-container>
          </div>
        </ng-template>
      </form>

      <!-- Ações do formulário (fixas no rodapé) -->
      <div class="form-actions">
        <!-- 🎯 BOTÃO EDITAR - Só aparece para itens existentes quando não está editando -->
        <button
          *ngIf="!isNewItem && !isEditMode"
          type="button"
          class="edit-btn"
          (click)="enableEditMode()"
        >
          <i class="fas fa-edit"></i>
          Editar
        </button>

        <!-- 🎯 BOTÃO CANCELAR EDIÇÃO - Só aparece quando está editando -->
        <button
          *ngIf="!isNewItem && isEditMode"
          type="button"
          class="cancel-btn"
          (click)="cancelEdit()"
        >
          <i class="fas fa-times"></i>
          Cancelar
        </button>

        <!-- 🎯 BOTÃO SALVAR - Sempre presente, mas só habilitado em modo de edição -->
        <button
          type="submit"
          [disabled]="!form.valid || isSubmitting || (!isNewItem && !isEditMode)"
          class="submit-btn"
          [class.disabled-readonly]="!isNewItem && !isEditMode"
          (click)="onSubmit()"
        >
          <i class="fas {{ isNewItem ? 'fa-plus' : 'fa-save' }}"></i>
          {{ isSubmitting ? "Processando..." :  config.submitLabel || (isNewItem ? 'Criar' : 'Salvar') }}
        </button>
      </div>

      <!-- Loading state -->
      <div *ngIf="isLoading" class="loading-overlay">
        <div class="loading-content">
          <div class="spinner"></div>
          <p>Carregando...</p>
        </div>
      </div>
    </div>

    <!-- ✨ Card lateral para resumo -->
    <div 
      *ngIf="sideCardEnabled" 
      class="side-card"
      [class.side-card-left]="sideCardConfig.position === 'left'"
      [class.side-card-right]="sideCardConfig.position !== 'left'"
      [class.side-card-collapsed]="sideCardCollapsed"
      [style.width]="sideCardConfig.width || '300px'"
    >
      <!-- Card de resumo -->
      <div *ngIf="sideCardConfig.component !== 'custom'" class="summary-card">
        <div class="card-header">
          <div class="card-header-content">
            <h3>{{ sideCardConfig.title || 'Resumo' }}</h3>
            <p class="card-subtitle">Informações principais</p>
          </div>
          <!-- Botão de recolher para mobile -->
          <button 
            type="button" 
            class="mobile-collapse-btn mobile-only"
            (click)="toggleSideCardCollapse()"
            [attr.aria-label]="sideCardCollapsed ? 'Expandir resumo' : 'Recolher resumo'"
          >
            <i class="fas" [class.fa-chevron-up]="!sideCardCollapsed" [class.fa-chevron-down]="sideCardCollapsed"></i>
          </button>
        </div>

        <div class="card-content">
          <!-- Imagem principal (sempre visível) -->
          <div class="card-image">
            <img 
              [src]="getSideCardImageUrl()" 
              [alt]="sideCardConfig.title || 'Imagem do veículo'"
              (error)="onImageError($event)"
            />
          </div>

          <!-- Campos de exibição (ocultos quando recolhido no mobile) -->
          <div class="card-fields-container" [class.mobile-hidden]="sideCardCollapsed">
            <div 
              *ngFor="let displayField of sideCardDisplayFields" 
              class="card-field"
            >
              <label>{{ displayField.label }}</label>
              <div 
                class="card-value"
                [class.card-status]="displayField.type === 'status'"
                [class.card-currency]="displayField.type === 'currency' || displayField.format === 'currency'"
                [class.card-distance]="displayField.format === 'distance'"
                [class.card-duration]="displayField.format === 'duration'"
                [class.card-mileage]="displayField.key === 'vehicle_mileage'"
                [class.card-plate]="displayField.key === 'vehicle_license_plate'"
              >
                <span 
                  *ngIf="displayField.type === 'status' && sideCardConfig.data?.statusConfig"
                  class="status-badge"
                  [style.background-color]="getStatusConfig(getFieldValue(displayField.key))?.color"
                  [style.color]="getStatusConfig(getFieldValue(displayField.key))?.textColor"
                >
                  <i 
                    *ngIf="getStatusConfig(getFieldValue(displayField.key))?.icon"
                    class="fas {{ getStatusConfig(getFieldValue(displayField.key))?.icon }}"
                  ></i>
                  {{ getStatusConfig(getFieldValue(displayField.key))?.label || getFieldValue(displayField.key) }}
                </span>
                
                <span *ngIf="displayField.type === 'currency'">
                  {{ formatCurrency(getFieldValue(displayField.key)) }}
                </span>
                
                <span 
                  *ngIf="displayField.type !== 'status' && displayField.type !== 'currency' && !displayField.allowHtml"
                >
                  {{ formatFieldValue(getFieldValue(displayField.key), displayField) }}
                </span>
                
                <span 
                  *ngIf="displayField.type !== 'status' && displayField.type !== 'currency' && displayField.allowHtml"
                  [innerHTML]="formatFieldValue(getFieldValue(displayField.key), displayField)"
                >
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Card customizado (slot para conteúdo específico) -->
      <!-- <div *ngIf="sideCardConfig.component === 'custom'" class="custom-card">
        <ng-content select="[slot=side-card]"></ng-content>
      </div> -->
    </div>
    
  </div>
</div> 