<div class="mobile-detail-popup" [@slideUp]>
  <!-- Backdrop -->
  <div class="popup-backdrop" (click)="closePopup()"></div>
  
  <!-- Popup Container -->
  <div class="popup-container" #scrollContainer>
    <!-- Drag Handle -->
    <div class="drag-handle">
      <div class="handle-bar"></div>
    </div>
    
    <!-- Header -->
    <div class="popup-header">
      <div class="header-content">
        <div class="header-main">
          <div class="header-title">
            <h2 class="title">{{ data.title }}</h2>
            <p class="subtitle" *ngIf="data.subtitle">{{ data.subtitle }}</p>
          </div>
          
          <div class="header-actions">
            <button 
              mat-icon-button 
              (click)="toggleActions()"
              [class.active]="showActions"
              class="actions-toggle">
              <mat-icon>more_vert</mat-icon>
            </button>
            
            <button 
              mat-icon-button 
              (click)="closePopup()"
              class="close-btn">
              <mat-icon>close</mat-icon>
            </button>
          </div>
        </div>
        
        <!-- Status and Priority -->
        <div class="header-meta">
          <div class="status-badge" [style.background-color]="getStatusColor(data.status)">
            {{ data.status | titlecase }}
          </div>
          
          <div 
            class="priority-badge"
            *ngIf="data.priority"
            [style.background-color]="getPriorityColor(data.priority)">
            <mat-icon>priority_high</mat-icon>
            {{ data.priority | titlecase }}
          </div>
          
          <div class="assignee-info" *ngIf="data.assignee">
            <mat-icon>person</mat-icon>
            <span>{{ data.assignee }}</span>
          </div>
          
          <div class="due-date" *ngIf="data.dueDate">
            <mat-icon>schedule</mat-icon>
            <span>{{ data.dueDate | date:'dd/MM/yyyy' }}</span>
          </div>
        </div>
        
        <!-- Tags -->
        <div class="header-tags" *ngIf="data.tags && data.tags.length > 0">
          <mat-chip-list>
            <mat-chip 
              *ngFor="let tag of data.tags"
              class="tag-chip">
              {{ tag }}
            </mat-chip>
          </mat-chip-list>
        </div>
      </div>
      
      <!-- Actions Menu -->
      <div class="actions-menu" *ngIf="showActions && data.actions" [@fadeIn]>
        <button 
          mat-button
          *ngFor="let action of data.actions; trackBy: trackByActionId"
          (click)="executeAction(action)"
          [disabled]="action.disabled"
          [color]="action.color"
          class="action-btn">
          <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
          {{ action.label }}
        </button>
      </div>
    </div>
    
    <!-- Content -->
    <div class="popup-content">
      <!-- Description -->
      <div class="description-section" *ngIf="data.description" [@fadeIn]>
        <h3 class="section-title">
          <mat-icon>description</mat-icon>
          Description
        </h3>
        <p class="description-text">{{ data.description }}</p>
      </div>
      
      <!-- Sections -->
      <div class="sections-container" *ngIf="data.sections && data.sections.length > 0">
        <!-- Section Tabs (si plus d'une section) -->
        <div class="section-tabs" *ngIf="data.sections.length > 1">
          <button 
            mat-button
            *ngFor="let section of data.sections; trackBy: trackBySectionId"
            (click)="setActiveTab(section.id)"
            [class.active]="activeTab === section.id"
            class="tab-btn">
            <mat-icon *ngIf="section.icon">{{ section.icon }}</mat-icon>
            {{ section.title }}
          </button>
        </div>
        
        <!-- Section Content -->
        <div class="section-content" [@staggerIn]>
          <div 
            class="detail-section"
            *ngFor="let section of data.sections; trackBy: trackBySectionId"
            [class.hidden]="data.sections.length > 1 && activeTab !== section.id">
            
            <!-- Section Header -->
            <div 
              class="section-header"
              *ngIf="data.sections.length === 1 || section.collapsible"
              (click)="section.collapsible ? toggleSection(section.id) : null"
              [class.clickable]="section.collapsible">
              
              <div class="section-title">
                <mat-icon *ngIf="section.icon">{{ section.icon }}</mat-icon>
                <h3>{{ section.title }}</h3>
              </div>
              
              <mat-icon 
                *ngIf="section.collapsible"
                class="collapse-icon"
                [class.collapsed]="section.collapsed">
                expand_more
              </mat-icon>
            </div>
            
            <!-- Section Fields -->
            <div 
              class="section-fields"
              *ngIf="!section.collapsed"
              [@fadeIn]>
              
              <div 
                class="field-item"
                *ngFor="let field of section.fields; trackBy: trackByFieldId"
                [class.editable]="field.editable && isEditing">
                
                <div class="field-content">
                  <div class="field-header">
                    <mat-icon class="field-icon">{{ getFieldIcon(field) }}</mat-icon>
                    <span class="field-label">{{ field.label }}</span>
                    <span class="required-indicator" *ngIf="field.required">*</span>
                  </div>
                  
                  <div class="field-value">
                    <!-- Mode lecture -->
                    <div class="read-value" *ngIf="!isEditing || !field.editable">
                      <span [class]="'field-type-' + field.type">
                        {{ getFieldDisplayValue(field) }}
                      </span>
                    </div>
                    
                    <!-- Mode édition -->
                    <div class="edit-value" *ngIf="isEditing && field.editable">
                      <mat-form-field appearance="outline" class="field-input">
                        <input 
                          matInput
                          *ngIf="field.type === 'text' || field.type === 'number'"
                          [(ngModel)]="editableFields[field.id]"
                          [type]="field.type === 'number' ? 'number' : 'text'"
                          [placeholder]="field.label">
                        
                        <input 
                          matInput
                          *ngIf="field.type === 'date'"
                          [(ngModel)]="editableFields[field.id]"
                          type="date"
                          [placeholder]="field.label">
                        
                        <textarea 
                          matInput
                          *ngIf="field.type === 'textarea'"
                          [(ngModel)]="editableFields[field.id]"
                          [placeholder]="field.label"
                          rows="3">
                        </textarea>
                      </mat-form-field>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Footer Actions -->
    <div class="popup-footer" *ngIf="!isEditing || isLoading">
      <button 
        mat-raised-button 
        color="primary"
        (click)="toggleEdit()"
        [disabled]="isLoading"
        class="edit-btn">
        <mat-icon>edit</mat-icon>
        Modifier
      </button>
    </div>
    
    <!-- Edit Footer -->
    <div class="popup-footer edit-footer" *ngIf="isEditing && !isLoading">
      <button 
        mat-button 
        (click)="toggleEdit()"
        class="cancel-btn">
        <mat-icon>close</mat-icon>
        Annuler
      </button>
      
      <button 
        mat-raised-button 
        color="primary"
        (click)="saveChanges()"
        class="save-btn">
        <mat-icon>save</mat-icon>
        Sauvegarder
      </button>
    </div>
    
    <!-- Loading Footer -->
    <div class="popup-footer loading-footer" *ngIf="isLoading">
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
      <div class="loading-text">Sauvegarde en cours...</div>
    </div>
  </div>
</div> 