<div ng-controller="Umbraco.Editors.DataTypePickerController as vm">
    <umb-editor-view data-element="editor-data-type-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>

                    <!-- FILTER -->
                    <div class="umb-control-group -no-border">
                        <div class="form-search">
                            <i class="icon-search"></i>
                            <input type="text"
                                    style="width: 100%"
                                    ng-change="vm.filterItems()"
                                    ng-model="vm.searchTerm"
                                    class="umb-search-field search-query search-input input-block-level"
                                    localize="placeholder"
                                    placeholder="@placeholders_filter"
                                    umb-auto-focus
                                    no-dirty-check />
                        </div>
                    </div>
                    <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
                    <!-- TABS -->
                    <div ng-if="vm.showTabs">
                        <umb-tabs-nav
                            ng-if="vm.tabs"
                            tabs="vm.tabs"
                            on-tab-change="vm.onTabChange(tab)">
                        </umb-tabs-nav>
                        <umb-tab-content ng-repeat="tab in vm.tabs" tab="tab" ng-if="tab.active">
                            <div ng-if="tab.alias==='Default'">
                                <div ng-repeat="(key,value) in tab.typesAndEditors">
                                    <h5>{{key}}</h5>
                                    <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
                                        <li ng-repeat="systemDataType in value | orderBy:'name'"
                                            data-element="editor-{{systemDataType.name}}"
                                            ng-mouseover="vm.showDetailsOverlay(systemDataType)"
                                            ng-click="vm.pickEditor(systemDataType)">
                                            <a class="umb-card-grid-item" href="" title="{{ systemDataType.name }}">
                                                <span>
                                                    <i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
                                                    {{ systemDataType.name }}
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div ng-if="tab.alias==='Reuse'">
                                <div ng-repeat="(key,value) in tab.userConfigured">
                                    <h5>{{key}}</h5>
                                    <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
                                        <li ng-repeat="dataType in value | orderBy:'name'"
                                            data-element="editor-{{dataType.name}}"
                                            ng-mouseover="vm.showDetailsOverlay(dataType)"
                                            ng-click="vm.pickDataType(dataType)">
                                            <div ng-if="dataType.loading" class="umb-card-grid-item__loading">
                                                <div class="umb-button__progress"></div>
                                            </div>
                                            <a class="umb-card-grid-item" href="" title="{{ dataType.name }}">
                                                <span>
                                                    <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
                                                    {{ dataType.name }}
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </umb-tab-content>
                    </div>
                    <!-- FILTER RESULTS -->
                    <div ng-if="vm.filterResult">
                        <h5 class="-border-bottom -black"><localize key="contentTypeEditor_reuse"></localize></h5>
                        <div ng-repeat="result in vm.filterResult.userConfigured">
                            <div ng-if="result.dataTypes.length > 0">
                                <h5>{{result.group}}</h5>
                                <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
                                    <li ng-repeat="dataType in result.dataTypes | orderBy:'name'"
                                        ng-mouseover="vm.showDetailsOverlay(dataType)"
                                        ng-click="vm.pickDataType(dataType)">
                                        <div ng-if="dataType.loading" class="umb-card-grid-item__loading">
                                            <div class="umb-button__progress"></div>
                                        </div>
                                        <a class="umb-card-grid-item" href="" title="{{ dataType.name }}">
                                            <span>
                                                <i class="{{ dataType.icon }}" ng-class="{'icon-autofill': dataType.icon == null}"></i>
                                                {{ dataType.name }}
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <h5 class="-border-bottom -black"><localize key="contentTypeEditor_availableEditors"></localize></h5>
                        <div ng-repeat="result in vm.filterResult.typesAndEditors">
                            <div ng-if="result.dataTypes.length > 0">
                                <h5>{{result.group}}</h5>
                                <ul class="umb-card-grid -four-in-row" ng-mouseleave="vm.hideDetailsOverlay()">
                                    <li ng-repeat="systemDataType in result.dataTypes | orderBy:'name'"
                                        ng-mouseover="vm.showDetailsOverlay(systemDataType)"
                                        ng-click="vm.pickEditor(systemDataType)">
                                        <a class="umb-card-grid-item" href="" title="{{ systemDataType.name }}">
                                            <span>
                                                <i class="{{ systemDataType.icon }}" ng-class="{'icon-autofill': systemDataType.icon == null}"></i>
                                                {{ systemDataType.name }}
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </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>
