<div class="sort-component">
    <span class="sort-label" i18n="Sort by|Label for sorting options">Sort by</span>
    <div class="dropdown btn-group" [ngClass]="{'open': isOpen}">
        <button type="button" (click)="toggle()"
                class="btn btn-default dropdown-toggle"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            {{selectedOption?.name}} <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li *ngFor="let option of sortOptions" [ngClass]="{'selected': option?.name === selectedOption?.name}">
                <a class="sort-field" (click)="selectOption(option)">{{option.name}}</a>
            </li>
        </ul>
    </div>
    <button class="btn btn-link sort-direction-button" type="button" (click)="changeDirection()">
        <span class="sort-direction fa "
            [ngClass]="{'fa-sort-alpha-desc': direction === -1, 'fa-sort-alpha-asc': direction === 1}">
        </span>
    </button>
</div>
