<div class="calendar">
    <label class="label--filter">{{ label | translate }}</label>

    <tooltip *ngIf="error">{{ error | translate }}</tooltip>

    <div class="calendar--mobile">
        <button
            pButton
            class="digit"
            [ngClass]="{ selected: isSelectedDigit(0) }"
            (click)="onDateChangeByButton(getDate(0))"
        >
            <div class="date-day">
                <div class="date">{{ getDate(0).getDate() }}</div>
                <div class="day">{{ getDayName(0) }}</div>
            </div>
            <div class="month">{{ getMonthName(0) }}</div>
        </button>
        <button
            pButton
            class="digit"
            [ngClass]="{ selected: isSelectedDigit(1) }"
            (click)="onDateChangeByButton(getDate(1))"
        >
            <div class="date-day">
                <div class="date">{{ getDate(1).getDate() }}</div>
                <div class="day">{{ getDayName(1) }}</div>
            </div>
            <div class="month">{{ getMonthName(1) }}</div>
        </button>
        <button
            pButton
            class="digit"
            [ngClass]="{ selected: isSelectedDigit(2) }"
            (click)="onDateChangeByButton(getDate(2))"
        >
            <div class="date-day">
                <div class="date">{{ getDate(2).getDate() }}</div>
                <div class="day">{{ getDayName(2) }}</div>
            </div>
            <div class="month">{{ getMonthName(2) }}</div>
        </button>
    </div>

    <div
        class="calendar-controls-container"
        [ngClass]="{ 'has-value': dateStr, 'error-value': error }"
    >
        <input
            data-testid="calendar-input"
            class="input--filter input--calendar"
            [ngModel]="dateStr"
            (ngModelChange)="setDateString($event)"
            type="text"
            (click)="openCalendar($event)"
            (keyup)="inputKeyup()"
            pInputText
            autocomplete="off"
            placeholder="{{ placeholder | translate }}"
        />

        <p-calendar
            #calendar
            class="calendar-control-hidden"
            [ngModel]="value"
            (ngModelChange)="onDateChange($event)"
            dateFormat="{{ 'SHARED.DATE_FORMAT' | translate }}"
            [selectOtherMonths]="true"
            [locale]="localizationService.calendarTranslate"
            [disabledDates]="disabledDates"
            [minDate]="minDate"
            [maxDate]="maxDate"
        >
        </p-calendar>

        <button
            pButton
            label=" "
            class="button-clear"
            (click)="clearInput()"
            data-testId="clear-date-button"
        ></button>
    </div>
</div>
