<p-accordion [multiple]="false" class="details-accordion schedule-accordion">
    <p-accordionTab transitionOptions="0s" [(selected)]="selected">
        <p-header>
            <flight-props [expandable]="true">
                <ng-container caption>
                    <div class="description schedule-title">
                        {{ 'SHARED.SCHEDULE-FLIGHT' | translate }}
                    </div>
                </ng-container>
                <ng-container *ngIf="selected" body>
                    <time-group-legacy
                        [times]="departureLeg.departure.times.scheduled"
                        description="{{ 'SHARED.DEPARTURE-SCHEDULED' | translate }}"
                        [hasOffset]="true"
                    ></time-group-legacy>

                    <time-group-legacy
                        [times]="arrivalLeg.arrival.times.scheduled"
                        description="{{ 'SHARED.ARRIVAL-SCHEDULED' | translate }}"
                        [hasOffset]="true"
                    ></time-group-legacy>

                    <property description="{{ 'SHARED.PATH-TIME' | translate }}">
                        <duration [duration]="flight.duration"></duration>
                    </property>
                </ng-container>
            </flight-props>
        </p-header>

        <flight-props>
            <ng-container caption>
                <div class="description">
                    {{ 'SHARED.DAYS-EXECUTE-FLIGHT' | translate }}
                </div>
            </ng-container>
            <ng-container body>
                <div class="days">
                    <div [ngClass]="{ inactive: !isDayActive('1') }" class="day">
                        {{ 'DAYS.1' | translate }}
                    </div>
                    <div [ngClass]="{ inactive: !isDayActive('2') }" class="day">
                        {{ 'DAYS.2' | translate }}
                    </div>
                    <div [ngClass]="{ inactive: !isDayActive('3') }" class="day">
                        {{ 'DAYS.3' | translate }}
                    </div>
                    <div [ngClass]="{ inactive: !isDayActive('4') }" class="day">
                        {{ 'DAYS.4' | translate }}
                    </div>
                    <div [ngClass]="{ inactive: !isDayActive('5') }" class="day">
                        {{ 'DAYS.5' | translate }}
                    </div>
                    <div [ngClass]="{ inactive: !isDayActive('6') }" class="day">
                        {{ 'DAYS.6' | translate }}
                    </div>
                    <div [ngClass]="{ inactive: !isDayActive('7') }" class="day">
                        {{ 'DAYS.7' | translate }}
                    </div>  
                </div>
                <note>{{ replaceDates('SHARED.NOTE-TIME-SCHEDULE' | translate) }}</note>
            </ng-container>
        </flight-props>
    </p-accordionTab>
</p-accordion>
