<div ng-controller="Umbraco.Overlays.IconPickerOverlay">

    <div class="umb-control-group">
        <div class="form-search">
            <i class="icon-search"></i>
            <input type="text"
                   style="width: 100%"
                   ng-model="searchTerm"
                   class="umb-search-field search-query input-block-level"
                   localize="placeholder"
                   placeholder="@placeholders_filter"
                   umb-auto-focus
                   no-dirty-check />
        </div>
    </div>

    <div class="umb-control-group">
        <umb-color-swatches colors="colors"
                            selected-color="color"
                            size="s"
                            use-color-class="true">
        </umb-color-swatches>
    </div>

    <umb-load-indicator ng-if="loading"></umb-load-indicator>

    <div class="umb-control-group" ng-show="!loading && filtered.length > 0 ">
        <ul class="umb-iconpicker" ng-class="color" ng-show="icons">
            <li class="umb-iconpicker-item" ng-class="{'-selected': icon == model.icon}" ng-repeat="icon in filtered = (icons | filter: searchTerm) track by $id(icon)">
                <a href="#" title="{{icon}}" ng-click="selectIcon(icon, color)" prevent-default>
                    <i class="{{icon}} large"></i>
                </a>
            </li>
        </ul>
    </div>

    <umb-empty-state
        ng-if="filtered.length === 0"
        position="center">
        <localize key="defaultdialogs_noIconsFound">No icons were found.</localize>
    </umb-empty-state>
</div>
