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

        <form novalidate name="DataTypeConfigurationPickerForm" 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-load-indicator ng-if="vm.loading"></umb-load-indicator>

                    <div ng-if="!vm.loading">
                        <ul class="umb-card-grid -three-in-row">
                            <li ng-repeat="dataTypeConfig in vm.configs | orderBy:'name' track by $index"
                                data-element="datatypeconfig-{{dataTypeConfig.name}}">
                                <div ng-if="dataTypeConfig.loading" class="umb-card-grid-item__loading">
                                    <div class="umb-button__progress"></div>
                                </div>
                                <button umb-auto-focus="{{$index === 0}}" class="btn-reset umb-card-grid-item" type="button" ng-click="vm.pickDataType(dataTypeConfig)" title="Select {{ dataTypeConfig.name }}">
                                    <span>
                                        <umb-icon icon="{{dataTypeConfig.icon || 'icon-autofill'}}"></umb-icon>
                                        <span class="sr-only">Select</span> {{ dataTypeConfig.name }}
                                    </span>
                                </button>
                            </li>
                        </ul>
                        <ul class="umb-card-grid -three-in-row">
                            <li>
                                <button umb-auto-focus="{{vm.configs.length === 0}}" class="btn-reset umb-card-grid-item-slot" type="button" ng-click="vm.newDataType()" title="Create a new configuration of {{ model.editor.name }}">
                                    <span>
                                        <umb-icon icon="icon-add" class="icon"></umb-icon>
                                        Create new <span class="sr-only">configuration of {{ model.editor.name }}</span>
                                    </span>
                                </button>
                            </li>
                        </ul>

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