<form name="IconPickerForm"
    ng-controller="Umbraco.Editors.IconPickerController as vm"
    novalidate
    val-form-manager>

<umb-editor-view>

    <umb-editor-header
        name="model.title"
        name-locked="true"
        hide-alias="true"
        hide-icon="true"
        hide-description="true">
    </umb-editor-header>

    <umb-editor-container>
        <umb-box>
            <umb-box-content>

                <div class="umb-control-group">
                    <umb-search-filter
                        input-id="icon-search"
                        model="vm.filter.searchTerm"
                        label-key="placeholders_filter"
                        text="Type to filter..."
                        css-class="w-100"
                        auto-focus="true">
                    </umb-search-filter>
                </div>

                <div class="umb-control-group mt3">
                    <umb-color-swatches
                        use-color-class="true"
                        colors="vm.colors"
                        selected-color="vm.color"
                        size="xs"
                        on-select="vm.selectColor(color)">
                    </umb-color-swatches>
                </div>

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

                <div class="umb-control-group" ng-show="!vm.loading && filtered.length > 0 ">
                    <ul class="umb-iconpicker" ng-class="vm.color.value" ng-show="vm.icons">
                        <li class="umb-iconpicker-item" ng-class="{'-selected': icon.name == model.icon}" ng-repeat="icon in filtered = (vm.icons | filter: { 'name': vm.filter.searchTerm } | orderBy:'name') track by $id(icon)">
                            <button type="button" title="{{icon.name}}" ng-click="vm.selectIcon(icon.name, vm.color.value)">
                                <umb-icon icon="{{icon.name}}" class="umb-iconpicker-svg large"></umb-icon>
                                <span class="sr-only"><localize key="buttons_select">Select</localize> {{icon.name}}</span>
                            </button>
                        </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>

            </umb-box-content>
        </umb-box>
    </umb-editor-container>

    <umb-editor-footer>
        <umb-editor-footer-content-right>
            <umb-button
                type="button"
                button-style="link"
                label-key="general_close"
                shortcut="esc"
                action="vm.close()">
            </umb-button>
            <umb-button
                type="button"
                button-style="success"
                label-key="general_submit"
                state="vm.saveButtonState"
                action="vm.submit(model)">
            </umb-button>
        </umb-editor-footer-content-right>
    </umb-editor-footer>

</umb-editor-view>

</form>
