<div class="selected-mode-{{inputMode}}">
  <span class="indicator"></span>

  <div class="dropdown" [ngClass]="{'is-active': isDropdownActive }">
    <div class="dropdown-trigger">
      <button (click)="toggleDropdown()" class="button">
        <span>{{inputMode}}</span>
        <span class="icon is-small">
          <i class="ri-arrow-down-s-line" [ngClass]="{'ri-arrow-up-s-line': isDropdownActive}"></i>
        </span>
      </button>
    </div>
    <div class="dropdown-menu" role="menu">
      <div class="dropdown-content">
        <a (click)="changeInputMode('auto')" [ngClass]="{'is-active': inputMode === 'auto'}" class="dropdown-item">
          Auto
        </a>
        <a (click)="changeInputMode('structured')" [ngClass]="{'is-active': inputMode === 'structured'}"
           class="dropdown-item">
          Structured
        </a>
        <a (click)="changeInputMode('specific')" [ngClass]="{'is-active': inputMode === 'specific'}"
           class="dropdown-item">
          Specific
        </a>
      </div>
    </div>
  </div>
</div>
