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

    <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="form-search" ng-hide="model.filter === false" style="margin-bottom: 15px;">
                        <i class="icon-search"></i>
                        <input type="text"
                                ng-model="searchTerm"
                                class="umb-search-field search-query input-block-level -full-width-input"
                                localize="placeholder"
                                placeholder="@placeholders_filter"
                                umb-auto-focus
                                no-dirty-check />
                    </div>

                    <ul class="umb-card-grid -three-in-row">
                        <li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:'name' | filter:searchTerm"
                            ng-click="vm.selectItem(availableItem)">
                            <a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
                                <span>
                                    <i class="{{ availableItem.icon }}"></i>
                                    {{ availableItem.name }}
                                </span>
                            </a>
                        </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>

    </umb-editor-view>

</div>
