<div class="ws-content-selector"
     ng-if="options"
     ng-class="{stacked: stacked && !expandable, expandable: stacked && expandable}">
  <div class="row-md" ng-repeat="row in chunkedOptions">
    <div ng-repeat="option in row"
         class="option col-{{colSize}}"
         ng-class="{selected: isSelected(option), disabled: option.disabled, 'no-body': !option.body, info: getMetaData(option).moreInfo || !expandable}"
         ng-style="getOptionStyle(option)"
         ng-click="select(option)"
         ng-mouseover="mouseEnter(option)"
         ng-mouseleave="mouseLeave(option)">
        <div>
          <strong>{{ option.header }}</strong>
          <span class="blurb">{{ getMetaData(option).trustedBlurb }}</span>
        </div>
      <p ng-bind-html="getMetaData(option).trustedBody"></p>
      <div class="ws-icon-info" ng-if="!!option.body && expandable" ng-click="showMoreInfo($event, option)"></div>
    </div>
    <div ng-repeat="i in getBufferRow(row) track by $index" ng-class="'col-' + colSize"></div>
  </div>
</div>
