<div class="city-autocomplete-popup">
    <div class="tabs">
        <button
            pButton
            *ngFor="let item of dictService.regions"
            [ngClass]="{ active: item.id == currentRegion.id }"
            type="button"
            role="tab"
            aria-selected="true"
            label="{{ item.name }}"
            class="tab-button"
            (click)="loadRegion(item)"
        ></button>
    </div>

    <div class="content">
        <p-scrollPanel #sp class="content--scroll-panel" [style]="{ width: '100%', height: '350px' }">
            <div *ngFor="let item of currentRegion.countries" class="row" [ngClass]="{ 'country-start-row': item.name }">
                <div class="cell contry">
                    <div>
                        {{ item.name }}
                    </div>
                </div>
                <div
                    *ngIf="item.city1.airports.length == 1"
                    class="cell city"
                    [ngClass]="{ 'city-active': item.city1 == city }"
                    attr.data-testid="city-name-cell-{{ item.city1.name }}"
                >
                    <div class="city--item" (click)="onLocationSelect(item.city1)">
                        {{ item.city1.name }}
                    </div>
                </div>
                <div *ngIf="item.city1.airports.length == 1" class="cell city" [ngClass]="{ 'city-active': item.city2 == city }">
                    <div
                        class="city--item"
                        *ngIf="item.city2"
                        (click)="onLocationSelect(item.city2)"
                        attr.data-testid="city-name-cell-{{ item.city2.name }}"
                    >
                        {{ item.city2.name }}
                    </div>
                </div>
                <div *ngIf="item.city1.airports.length > 1" class="cell city" [ngClass]="{ 'city-active': item.city1 == city }">
                    <div class="city--item" (click)="onLocationSelect(item.city1)" attr.data-testid="city-name-cell-{{ item.city1.name }}">
                        {{ item.city1.name }}
                    </div>

                    <div class="airports-column">
                        <div
                            *ngFor="let airport of item.city1.airports"
                            pTooltip="{{ airport.name }}"
                            tooltipPosition="top"
                            class="city--item"
                            (click)="onLocationSelect(airport)"
                            attr.data-testid="airport-name-cell-{{ airport.name }}"
                        >
                            <!--[ngClass]="{'city-active':airport.code==city.code}"-->
                            {{ airport.name }}
                        </div>
                    </div>
                </div>
            </div>
        </p-scrollPanel>
    </div>

    <div *ngIf="featureFlags.FIND_MY_LOCATION_BUTTON" class="city-autocomplete-popup-footer">
        <div class="gps-contaner">
            <button
                class="gps-button color blue-light"
                pButton
                type="button"
                label="{{ 'BOARD.GPS-BUTTON' | translate }}"
                (click)="onLocate()"
            ></button>
            <div class="gps-label-help">
                {{ 'BOARD.GPS-HELP' | translate }}
            </div>
        </div>
    </div>
</div>
