55 lines
2.2 KiB
HTML
55 lines
2.2 KiB
HTML
|
<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>
|