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

<div class="language-selector" role="listbox">
  <button class="language-button" (click)="toggleDropdown()" (keydown)="onKeyDown($event)" aria-haspopup="listbox" [attr.aria-expanded]="dropdownOpen">
    <img [src]="languageService.getCurrentLanguage()?.flagSvg" 
         [alt]="languageService.getCurrentLanguage()?.name" 
         class="language-flag">
    <span class="language-code">{{ languageService.getCurrentLanguage()?.code?.toUpperCase() }}</span>
    <svg class="dropdown-arrow" [class.rotated]="dropdownOpen" width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </button>

  <div class="language-dropdown" [class.open]="dropdownOpen">
    @for (lang of languageService.languages; track lang.code) {
      <button 
        class="language-option" 
        role="option"
        [attr.aria-selected]="languageService.currentLanguage() === lang.code"
        [class.active]="languageService.currentLanguage() === lang.code"
        [class.disabled]="!lang.enabled"
        [disabled]="!lang.enabled"
        (click)="selectLanguage(lang)">
        <img [src]="lang.flagSvg" [alt]="lang.name" class="option-flag">
        <span class="option-name">{{ lang.name }}</span>
      </button>
    }
  </div>

  <button class="currency-button" (click)="toggleCurrency()">
    <span class="currency-symbol">{{ languageService.getCurrentCurrency()?.symbol }}</span>
    <span class="currency-code">{{ languageService.currentCurrency() }}</span>
    <svg class="dropdown-arrow" [class.rotated]="currencyOpen" width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </button>

  <div class="currency-dropdown" [class.open]="currencyOpen">
    @for (cur of languageService.currencies; track cur.code) {
      <button 
        class="currency-option" 
        [class.active]="languageService.currentCurrency() === cur.code"
        (click)="selectCurrency(cur)">
        <span class="cur-symbol">{{ cur.symbol }}</span>
        <span class="cur-name">{{ cur.name }}</span>
        <span class="cur-code">{{ cur.code }}</span>
      </button>
    }
  </div>
</div>