<div class="cs-select {{ $ctrl.getComponentClasses() }}" uib-dropdown>
  <button class="cs-select__toggle-button {{ $ctrl.selected.className }}"
          id="{{ ::$ctrl.selectId }}"
          type="button"
          ng-disabled="$ctrl.disabled"
          uib-dropdown-toggle>
    <span ng-if="!$ctrl.selectType">
      <span ng-if="$ctrl.selected.name">{{ $ctrl.selected.name }}</span>
      <span class="cs-select__placeholder" ng-if="!$ctrl.selected.name && ctrl.selectDefault">{{ $ctrl.selectDefault }}</span>
      <span class="cs-select__placeholder" ng-if="!$ctrl.selected.name && !ctrl.selectDefault">{{ $ctrl.selectPlaceholder }}</span>
    </span>
    <span ng-if="$ctrl.selectType"
          class="cs-select__preview"
          ng-style="{
            'background-image': $ctrl.selectType === 'icon-picker' && 'url(' + ($ctrl.selected.value || $ctrl.selectDefault) + ')',
            'background-color': $ctrl.selectType === 'color-picker' ? ($ctrl.selected.value || $ctrl.selectDefault) : $ctrl.iconBgColor
          }"
    ></span>
  </button>
  <ul class="cs-select__list" uib-dropdown-menu role="menu">
    <li class="cs-select__list-item {{ $ctrl.getSelectedItemClass(item) }} {{ item.className }}"
        ng-repeat="item in $ctrl.selectList"
        ng-click="$ctrl.handleClick(item)">
      <span ng-if="!$ctrl.selectType">{{ item.name }}</span>
      <span ng-if="$ctrl.selectType"
            class="cs-select__preview"
            ng-style="{
              'background-image': $ctrl.selectType === 'icon-picker' && 'url(' + item.value + ')',
              'background-color': $ctrl.selectType === 'color-picker' && item.value
            }"
      ></span>
    </li>
  </ul>
</div>