<div class="region-selector">
  <button class="region-trigger" (click)="toggleDropdown()" [class.active]="dropdownOpen()">
    <svg class="pin-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
      <circle cx="12" cy="10" r="3"></circle>
    </svg>
    <span class="region-name">
      @if (detecting()) {
        <span class="detecting">...</span>
      } @else if (region()) {
        {{ region()!.city }}
      } @else {
        {{ 'location.allRegions' | translate }}
      }
    </span>
    <svg class="chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
         [class.rotated]="dropdownOpen()">
      <path d="M6 9l6 6 6-6"></path>
    </svg>
  </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 }}">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="3"></circle>
              <path d="M12 2v4M12 18v4M2 12h4M18 12h4"></path>
            </svg>
          </button>
        }
      </div>

      <div class="region-list">
        <button class="region-option" [class.selected]="!region()" (click)="selectGlobal()">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
          </svg>
          <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>
