marketplaces/src/app/components/region-selector/region-selector.component.html

<div class="region-selector">
  <button class="region-trigger" (click)="toggleDropdown()" [class.active]="dropdownOpen()">
    <app-icon name="mapPin" [size]="16" class="pin-icon" />
    <span class="region-name">
      @if (detecting()) {
        <span class="detecting">...</span>
      } @else if (region()) {
        {{ region()!.city }}
      } @else {
        {{ 'location.allRegions' | translate }}
      }
    </span>
    <app-icon name="chevronDown" [size]="14" [class.rotated]="dropdownOpen()" class="chevron" />
  </button>

  @if (dropdownOpen()) {
    <div class="region-dropdown">
      <div class="dropdown-header">
        <span>{{ 'location.chooseRegion' | translate }}</span>
        @if (!detecting()) {
          <button class="detect-btn" (click)="detectLocation()" title="{{ 'location.detectAuto' | translate }}">
            <app-icon name="locate" [size]="14" />
          </button>
        }
      </div>

      <div class="region-list">
        <button class="region-option" [class.selected]="!region()" (click)="selectGlobal()">
          <app-icon name="globe" [size]="14" />
          <span>{{ 'location.allRegions' | translate }}</span>
        </button>

        @for (r of regions(); track r.id) {
          <button class="region-option" [class.selected]="region()?.id === r.id" (click)="selectRegion(r)">
            <span class="region-city">{{ r.city }}</span>
            <span class="region-country">{{ r.country }}</span>
          </button>
        }
      </div>
    </div>
  }
</div>