<div class="collection-control__sort-by d-none d-lg-block" style="margin-left: 20%;" data-js-collection-sort-by>
    <div class="select position-relative js-dropdown js-select">
        <div class="d-flex align-items-center" data-js-dropdown-button>
            <label for="SortBy" class="mb-0 mr-5">{{ __('Sort') }}:</label>
            <select name="sort_by" class="p-0 pr-25 mb-0 border-0 cursor-pointer" id="SortBy" onchange="addSorting(event.target.value)">
                <option value="price_amount-ascending">{{ __('Price Ascending') }}</option>
                <option value="price_amount-descending">{{ __('Price Descending') }}</option>
                <option value="created_at-descending" selected>{{ __('Date Descending') }}</option>
                <option value="created_at-ascending">{{ __('Date Ascending') }}</option>
                <option value="name-ascending">{{ __('Name Ascending') }}</option>
                <option value="name-descending">{{ __('Name Descending') }}</option>
            </select>
            <i class="position-absolute right-0">
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-229" viewBox="0 0 24 24">
                    <path d="M11.783 14.088l-3.75-3.75a.652.652 0 0 1-.176-.449c0-.169.059-.319.176-.449a.65.65 0 0 1 .449-.176c.169 0 .318.059.449.176l3.301 3.32 3.301-3.32a.65.65 0 0 1 .449-.176c.169 0 .318.059.449.176.117.13.176.28.176.449a.652.652 0 0 1-.176.449l-3.75 3.75a.877.877 0 0 1-.215.127.596.596 0 0 1-.468 0 .841.841 0 0 1-.215-.127z"/>
                </svg>
            </i>
        </div>
        <div class="select__dropdown dropdown d-none position-lg-absolute top-lg-100 left-lg-0" data-js-dropdown data-js-select-dropdown>
            <div class="px-15 pb-30 py-lg-15">
                <span data-value="price_amount-ascending">{{ __('Price Ascending') }}</span>
                <span data-value="price_amount-descending">{{ __('Price Descending') }}</span>
                <span data-value="created_at-descending" selected>{{ __('Date Descending') }}</span>
                <span data-value="created_at-ascending">{{ __('Date Ascending') }}</span>
                <span data-value="name-ascending">{{ __('Name Ascending') }}</span>
                <span data-value="name-descending">{{ __('Name Descending') }}</span>
            </div>
        </div>
    </div>
</div>
