<div class="datepicker-wrapper">
  <input #dateInput 
         class="datepicker-input" 
         type="text" 
         placeholder="DD/MM/YYYY" 
         [value]="formattedSelectedDate"
         (input)="onDateInputChange($event)" />
  <i class="datepicker-icon fa fa-calendar" (click)="toggleCalendar()"></i>
  
  <div #calendarPopup 
       class="calendar calendar-popup" 
       [class.view-days]="view === 'days'"
       [class.view-months]="view === 'months'"
       [class.view-years]="view === 'years'"
       [style.display]="calendarVisible ? 'block' : 'none'">
    
    <!-- Calendar Header -->
    <div class="calendar-header">
      <button class="calendar-cell fa fa-chevron-left" (click)="prev()"></button>
      <div class="calendar-cell" id="monthYear" (click)="changeView()">{{ monthYearHeader }}</div>
      <button class="calendar-cell fa fa-chevron-right" (click)="next()"></button>
    </div>
    
    <!-- Calendar Grid -->
    <div class="calendar-grid" [class.calendar-grid-7]="view === 'days'" [class.calendar-grid-5]="view === 'years'">
      
      <!-- Days View -->
      <ng-container *ngIf="view === 'days'">
        <!-- Days of Week -->
        <div *ngFor="let day of daysOfWeek" class="day">{{ day }}</div>
        
        <!-- Previous Month Days -->
        <div *ngFor="let day of getPreviousMonthDays()" 
             class="calendar-cell other-month"
             [class.disabled]="day.disabled"
             (click)="onPrevMonthDayClick(day)">
          {{ pad(day.day) }}
        </div>
        
        <!-- Current Month Days -->
        <div *ngFor="let day of getCurrentMonthDays()" 
             class="calendar-cell"
             [class.today]="day.isToday"
             [class.selected]="day.isSelected"
             [class.disabled]="day.disabled"
             (click)="onCurrentMonthDayClick(day)">
          {{ pad(day.day) }}
        </div>
        
        <!-- Next Month Days -->
        <div *ngFor="let day of getNextMonthDays()" 
             class="calendar-cell other-month"
             [class.disabled]="day.disabled"
             (click)="onNextMonthDayClick(day)">
          {{ pad(day.day) }}
        </div>
      </ng-container>
      
      <!-- Months View -->
      <ng-container *ngIf="view === 'months'">
        <div *ngFor="let month of getVisibleMonths()" 
             class="calendar-cell"
             [class.today]="month.isCurrentMonth"
             [class.selected]="month.isSelected"
             [class.disabled]="month.disabled"
             (click)="onMonthClick(month)">
          {{ month.name }}
        </div>
      </ng-container>
      
      <!-- Years View -->
      <ng-container *ngIf="view === 'years'">
        <div *ngFor="let yearObj of getVisibleYears()" 
             class="calendar-cell"
             [class.today]="yearObj.isCurrentYear"
             [class.selected]="yearObj.isSelected"
             [class.disabled]="yearObj.disabled"
             (click)="onYearClick(yearObj)">
          {{ yearObj.year }}
        </div>
      </ng-container>
    </div>
    
    <!-- Calendar Actions -->
    <div class="calendar-actions">
      <button id="todayBtn" (click)="goToday()">Oggi</button>
      <button id="clearBtn" (click)="clearSelection()">Cancella</button>
      <button id="confirmBtn" (click)="confirmDate()">Conferma</button>
    </div>
  </div>
</div>
