<div ng-controller="Umbraco.Editors.MacroParameterPickerController as vm">

    <umb-editor-view data-element="editor-macro-parameter">

        <form novalidate name="MacroParameterForm" val-form-manager>

        <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>

                    <!-- FILTER -->
                    <umb-search-filter
                        input-id="macroparameter-search"
                        model="vm.searchTerm"
                        label-key="placeholders_filter"
                        text="Type to filter..."
                        css-class="w-100"
                        on-change="vm.filterItems()"
                        auto-focus="true">
                    </umb-search-filter>

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

                    <div ng-if="!vm.filterResult">
                        <div ng-repeat="(key,value) in vm.parameterEditors">
                            <h5>{{key}}</h5>
                            <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
                                <li ng-repeat="parameterEditor in value | orderBy:'name'"
                                    data-element="editor-{{parameterEditor.name}}">
                                    <button type="button"
                                            ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
                                            ng-click="vm.pickParameterEditor(parameterEditor)"
                                            class="btn-reset umb-card-grid-item"
                                            title="{{parameterEditor.name}}">
                                        <span>
                                            <umb-icon icon="{{parameterEditor.icon || 'icon-autofill'}}"></umb-icon>
                                            {{parameterEditor.name}}
                                        </span>
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- FILTER RESULTS -->
                    <div ng-if="vm.filterResult">
                        <div ng-if="vm.filterResult.totalResults > 0">
                            <div ng-repeat="result in vm.filterResult.parameterEditors">
                                <div ng-if="result.parameterEditors.length > 0">
                                    <h5>{{result.group}}</h5>
                                    <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
                                        <li ng-repeat="parameterEditor in result.parameterEditors | orderBy:'name'">
                                            <div ng-if="parameterEditor.loading" class="umb-card-grid-item__loading">
                                                <div class="umb-button__progress"></div>
                                            </div>
                                            <button type="button"
                                                    ng-mouseover="vm.showDetailsOverlay(parameterEditor)"
                                                    ng-click="vm.pickParameterEditor(parameterEditor)"
                                                    class="btn-reset umb-card-grid-item"
                                                    title="{{parameterEditor.name}}">
                                                <span>
                                                    <umb-icon icon="{{parameterEditor.icon || 'icon-autofill'}}"></umb-icon>
                                                    {{parameterEditor.name}}
                                                </span>
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <umb-empty-state position="center" ng-if="vm.filterResult.totalResults === 0">
                            <localize key="general_searchNoResult">Sorry, we can not find what you are looking for.</localize>
                        </umb-empty-state>
                    </div>

                </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-editor-footer-content-right>
        </umb-editor-footer>

        </form>

    </umb-editor-view>

</div>
