<div class="city-autocomplete">
    <div class="city-autocomplete__labels-container">
        <label class="city-autocomplete__label">{{ label | translate }}</label>
        <label class="city-autocomplete__label" data-testid="city-code">{{ city?.code }}</label>
    </div>

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

    <div
        class="city-autocomplete__input"
        [ngClass]="{ 'city-autocomplete__input--has-value': city, 'city-autocomplete__input--has-error': error }"
    >
        <p-autoComplete
            #autocomplite
            [(ngModel)]="city"
            (ngModelChange)="onCityChange()"
            [autoHighlight]="true"
            [suggestions]="items"
            (completeMethod)="filterCity($event)"
            field="name"
            [size]="30"
            [minLength]="1"
            (onSelect)="selectLocation(city)"
            (onKeyUp)="inputChange()"
            placeholder="{{ placeholder | translate }}"
            data-testid="city-autocomplete-input"
        >
            <ng-template let-value pTemplate="item">
                <city-autocomplete-item [item]="value"></city-autocomplete-item>
            </ng-template>
        </p-autoComplete>

        <!-- //todo: remove button-clear styles; create component instead -->
        <button pButton label=" " class="button-clear" (click)="clearInput()" data-testid="autocomplete-clear-input"></button>
        <button
            pButton
            label=" "
            class="city-autocomplete__search-button"
            [ngClass]="{ 'city-autocomplete__search-button--opened': openedPopup }"
            (click)="openPopUp()"
            data-testid="autocomplete-popup-button"
        ></button>
    </div>
</div>

<div class="city-autocomplete-popup-wrapper" *ngIf="openedPopup">
    <city-select [city]="city" (selectLocation)="selectLocation($event)" (locate)="onLocate()"></city-select>
</div>
