<div ng-controller="Umbraco.Editors.PropertyEditorPickerController as vm">
    <umb-editor-view data-element="editor-property-editor-picker">

        <form novalidate name="DataTypePickerForm" 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>

                    <umb-search-filter
                        class="db mb3"
                        input-id="propertyeditor-search"
                        model="vm.searchTerm"
                        label-key="placeholders_search"
                        text="Type to search"
                        css-class="w-100"
                        auto-focus="true">
                    </umb-search-filter>

                    <ul class="umb-card-grid -six-in-row">
                        <li ng-repeat="propertyEditor in model.propertyEditors | orderBy:'name' | filter: vm.searchTerm" data-element="propertyeditor-{{propertyeditor.name}}">
                            <button type="button"
                                    class="btn-reset umb-card-grid-item"
                                    title="{{propertyEditor.name}}"
                                    ng-click="vm.select(propertyEditor)">
                                <span>
                                    <umb-icon icon="{{propertyEditor.icon || 'icon-autofill'}}"></umb-icon>
                                    {{propertyEditor.name}}
                                </span>
                            </button>
                        </li>
                    </ul>

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