<div ng-controller="Umbraco.Editors.InsertFieldController 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>

                    <!-- select field -->
                    <div class="control-group umb-control-group -no-border">
                        <div class="umb-el-wrap">
                            <label class="control-label" for="chooseField"><localize key="templateEditor_chooseField">Choose field</localize></label>
                            <div class="controls">
                                <select ng-model="vm.field">
                                    <optgroup localize="label" label="@templateEditor_customFields">
                                        <option ng-repeat="(key, value) in vm.properties" value="{{value}}">{{value}}</option>
                                    </optgroup>
                                    <optgroup localize="label" label="@templateEditor_standardFields">
                                        <option ng-repeat="(key, value) in vm.standardFields" value="{{value}}">{{value}}</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Default value -->
                    <div>
                        <button type="button" class="umb-node-preview-add mb3" ng-click="vm.showDefaultValue=true" ng-hide="vm.showDefaultValue">
                            <localize key="templateEditor_addDefaultValue">Add default value</localize>
                        </button>

                        <div class="control-group umb-control-group -no-border" ng-hide="!vm.showDefaultValue">
                            <div class="umb-el-wrap">
                                <label class="control-label" for="altText"><localize key="templateEditor_defaultValue">Default value</localize></label>
                                <div class="controls">
                                    <input type="text" id="altText" name="altText" ng-model="vm.defaultValue" umb-auto-focus>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Recursive -->
                    <div class="control-group umb-control-group">
                        <div class="umb-el-wrap">
                            <div class="controls">
                                <label class="control-label">
                                    <localize key="templateEditor_recursive">Recursive</localize>
                                </label>
                                <div class="flex">
                                    <umb-checkbox name="recursive"
                                                  disabled="!vm.field"
                                                  model="vm.recursive"
                                                  text="Yes, make it recursive"
                                                  label-key="templateEditor_recursiveDescr">
                                    </umb-checkbox>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Output -->
                    <div class="control-group umb-control-group -no-border">
                        <div class="umb-el-wrap">
                            <div class="controls">
                                <label class="control-label"><localize key="templateEditor_outputSample">Output sample</localize></label>
                                <umb-code-snippet language="'cshtml'">{{ vm.generateOutputSample() }}</umb-code-snippet>
                            </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-button
                    type="button"
                    button-style="success"
                    label-key="general_submit"
                    action="vm.submit(model)">
                </umb-button>
            </umb-editor-footer-content-right>
        </umb-editor-footer>

    </umb-editor-view>

</div>
