<!-- Backdrop do splash screen -->
<div 
  *ngIf="showSplash && currentChangelog" 
  class="splash-backdrop"
  [@fadeInOut]
  (click)="closeSplash()">
  
  <!-- Modal de changelog -->
  <div 
    class="splash-modal"
    [@slideUp]
    (click)="$event.stopPropagation()">
    
    <!-- Header do splash -->
    <div class="splash-header">
      <div class="header-content">
        <div class="version-badge">
          <mat-icon>system_update</mat-icon>
          <span>v{{ currentChangelog.version }}</span>
        </div>
        
        <h2 class="splash-title">{{ currentChangelog.title }}</h2>
        
        <p 
          *ngIf="currentChangelog.description" 
          class="splash-description">
          {{ currentChangelog.description }}
        </p>
        
        <div class="release-info">
          <mat-icon>event</mat-icon>
          <span>{{ formatReleaseDate(currentChangelog.releaseDate) }}</span>
          
          <mat-chip 
            *ngIf="currentChangelog.isImportant"
            class="important-chip">
            <mat-icon matChipAvatar>priority_high</mat-icon>
            Update Importante
          </mat-chip>
        </div>
      </div>
      
      <!-- Botão de fechar no canto -->
      <button 
        mat-icon-button
        class="close-button"
        (click)="closeSplash()"
        aria-label="Fechar">
        <mat-icon>close</mat-icon>
      </button>
    </div>

    <mat-divider></mat-divider>
    
    <!-- Lista de novidades -->
    <div class="splash-content">
      <h3 class="highlights-title">
        <mat-icon>stars</mat-icon>
        Novidades desta versão
      </h3>
      
      <div class="highlights-list">
        <div 
          *ngFor="let item of currentChangelog.highlights; let i = index"
          class="highlight-item"
          [@slideUp]="{ delay: i * 100 + 'ms' }">
          
          <div class="highlight-icon">
            <mat-icon [color]="getChangelogColor(item.type)">
              {{ getChangelogIcon(item) }}
            </mat-icon>
          </div>
          
          <div class="highlight-content">
            <div class="highlight-header">
              <h4 class="highlight-title">{{ item.title }}</h4>
              <mat-chip 
                [color]="getChangelogColor(item.type)"
                class="type-chip">
                {{ getChangelogLabel(item.type) }}
              </mat-chip>
            </div>
            
            <p class="highlight-description">{{ item.description }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Footer com botões de ação -->
    <div class="splash-footer">
      <div class="footer-actions">
        <button 
          mat-button
          color="primary"
          (click)="closeSplash()">
          <mat-icon>check</mat-icon>
          Entendi, continue
        </button>
        
        <!-- Debug button (só aparece em desenvolvimento) -->
        <button 
          *ngIf="false"
          mat-button
          color="accent"
          (click)="debugShowSplash()">
          <mat-icon>bug_report</mat-icon>
          Debug: Mostrar novamente
        </button>
      </div>
      
      <div class="footer-info">
        <small>
          <mat-icon>info</mat-icon>
          Esta tela aparece apenas uma vez por versão
        </small>
      </div>
    </div>
  </div>
</div> 