<div class="ws-dropdown-select-container">
  <button
    class="ws-dropdown-select-button"
    ng-class="{ expanded: $ctrl.isOpen }"
    ng-disabled="$ctrl.isDisabled"
    ng-click="$ctrl.toggleMenuOpenness()"
  >
    <span class="ws-dropdown-select-title h4-sans-normal">
      {{ $ctrl.label }}
    </span>
    <span
      class="ws-dropdown-select-arrow-down"
      ng-if="!$ctrl.isDisabled"
      ng-class="{ 'ws-dropdown-select-arrow-down-rotated': $ctrl.isOpen }"
    ></span>
  </button>
  <div
    class="ws-dropdown-select-content"
    ng-if="$ctrl.isOpen"
  >
    <button
      class="ws-dropdown-select-item base-padding base-padding-right-x2 base-padding-left-x2"
      ng-class="{ selected: item.selected }"
      ng-repeat="item in $ctrl.items"
      ng-click="$ctrl.closeMenu(); $ctrl.onItemSelection({ item })"
    >
      <span class="ws-dropdown-select-item-label h4-sans-normal text-gray">
        {{ item.label }}
      </span>
      <span
        class="ws-dropdown-select-item-checkmark icon-checkmark base-margin-left-x2"
        ng-if="item.selected"
      ></span>
    </button>
  </div>
</div>
