<div class="daiquiri-browser row">
    <div ng-class="{
            'col-sm-4': browser[browserId].columns.length === 3,
            'col-sm-6': browser[browserId].columns.length === 2,
            'col-sm-12': browser[browserId].columns.length === 1
        }"
        ng-repeat="column in browser[browserId].columns">

        <ul class="daiquiri-browser-head nav nav-pills nav-stacked">
            <li class="nav-header">
                {$ column.name | uppercase $}
            </li>
        </ul>

        <ul class="daiquiri-browser-head nav nav-pills nav-stacked"
            ng-show="browser[browserId].filter">
            <li class="nav-header">
                <input type="text" class="form-control" placeholder="Filter"
                    ng-model="column.filter_string" />
            </li>
        </ul>

        <ul class="daiquiri-browser-body nav nav-pills nav-stacked">

            <li ng-repeat="item in column.items | filter: column.filter_string"
                ng-class="{ 'active': browser.isActive(browserId, $parent.$index, $index) }">
                <a href=""
                    ng-click="itemClicked(browserId, item, $parent.$index, $index);"
                    ng-dblclick="itemDblClicked(browserId, item, $parent.$index, $index);"
                    data-toggle="tooltip"
                    data-html="true"
                    data-placement="left"
                    data-container="body"
                    title="{{item.description}}{{ item.unit ? '</br><b>Unit:</b> ' : '' }}{{ item.unit }}" tooltip>
                    <i class="pull-right fa fa-chevron-right" ng-show="column.selected == $index"></i>
                    {$ item.name $}
                </a>
            </li>
        </ul>
    </div>
</div>
