Umbraco-CMS/src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.html

<div ng-controller="Umbraco.Overlays.InsertFieldController as vm">

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

    <div class="advanced" style="position:relative">
        
        <!-- Overlay -->
        <div class="hideAdvanced" style="position:absolute;height:100%;width:100%;background-color:white;opacity:.7;" ng-hide="vm.field"></div>

        <!-- Fallback field -->
        <div>
            <i class="icon icon-add blue" ng-hide="vm.showAltField"></i>
            <a href="" ng-click="vm.showAltField=true" ng-hide="vm.showAltField"><localize key="templateEditor_addFallbackField">Add fallback field</localize></a>

            <div class="control-group umb-control-group -no-border" ng-hide="!vm.showAltField">
                <div class="umb-el-wrap">
                    <label class="control-label" for="altField"><localize key="templateEditor_fallbackField">Fallback field</localize></label>
                    <div class="controls">
                        <select ng-model="vm.altField" id="altField">
                            <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>
        </div>
        </div>

        <!-- Default value -->
        <div>
            <div style="margin-bottom: 20px;">
                <i class="icon icon-add blue" ng-hide="vm.showAltText"></i>
                <a href="" ng-click="vm.showAltText=true" ng-hide="vm.showAltText"><localize key="templateEditor_addDefaultValue">Add default value</localize></a>
            </div>

            <div class="control-group umb-control-group -no-border" ng-hide="!vm.showAltText">
                <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.altText" umb-auto-focus>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recursive -->
        <div class="control-group umb-control-group">
            <div class="umb-el-wrap">
                <div class="controls">
                    <label>
                        <localize key="templateEditor_recursive">Recursive</localize>
                        <input id="recursive" type="checkbox" name="recursive" ng-model="vm.recursive">
                        <localize key="templateEditor_recursiveDescr">Yes, make it recursive</localize>
                    </label>
                </div>
            </div>
        </div>

        <h5><localize key="templateEditor_formatAndEncoding">Format and encoding</localize></h5>

        <!-- Format as date -->
        <div class="control-group umb-control-group">
            <div class="umb-el-wrap">
                <div class="controls">
                    <div>
                        <label class="control-label">
                            <localize key="templateEditor_formatAsDate">Format as date</localize>
                            <small><localize key="templateEditor_formatAsDateDescr">Format the value as a date, or a date with time, accoring to the active culture</localize>.</small>
                        </label>
                    </div>
                    <a href ng-click="vm.setDateOption('date')" class="btn"><i class="icon icon-check" ng-if="vm.date"></i> <localize key="templateEditor_dateOnly">Date only</localize></a>
                    <a href ng-click="vm.setDateOption('dateWithTime')" class="btn"><i class="icon icon-check" ng-if="vm.dateTime"></i> <localize key="templateEditor_withTime">Date and time</localize></a>
                    <input type="text" ng-model="vm.dateTimeSeparator" ng-hide="!vm.dateTime" localize="placeholder" placeholder="@templateEditor_separator">
                </div>
            </div>
        </div>

        <!-- Format casing -->
        <div class="control-group umb-control-group">
            <div class="umb-el-wrap">
                <div class="controls">
                    <div>
                        <label class="control-label">
                            <localize key="templateEditor_casing">Casing</localize>
                        </label>
                    </div>
                    <a href ng-click="vm.setCasingOption('uppercase')" class="btn" style="text-transform: uppercase;"><i class="icon icon-check" ng-if="vm.casingUpper"></i> <localize key="templateEditor_uppercase">Uppercase</localize></a>
                    <a href ng-click="vm.setCasingOption('lowercase')" class="btn"style="text-transform: lowercase;"><i class="icon icon-check" ng-if="vm.casingLower"></i> <localize key="templateEditor_lowercase">Lowercase</localize></a>
                </div>
            </div>
        </div>

        <!-- Format encoding -->
        <div class="control-group umb-control-group">
            <div class="umb-el-wrap">
                <div class="controls">
                    <div>
                        <label class="control-label">
                            <localize key="templateEditor_encoding">Encoding</localize>
                            <small><localize key="templateEditor_urlEncodeHelp">Will format special characters in URLs</localize></small>
                        </label>
                    </div>
                    <a href ng-click="vm.setEncodingOption('html')" class="btn"><i class="icon icon-check" ng-if="vm.encodeHtml"></i> HTML</a>
                    <a href ng-click="vm.setEncodingOption('url')" class="btn"><i class="icon icon-check" ng-if="vm.encodeUrl"></i> URL</a>
                </div>
            </div>
        </div>

        <h5><localize key="templateEditor_modifyOutput">Modify output</localize></h5>
        
        <!-- Insert Before -->
        <div class="control-group umb-control-group -no-border ng-scope">
            <div class="umb-el-wrap">
                <label class="control-label" for="insertBefore">
                    <localize key="templateEditor_preContent">Insert before field</localize>
                    <small><localize key="templateEditor_insertedBefore">Will be inserted before the field value</localize></small>
                </label>
                <div class="controls">
                    <input type="text" id="insertBefore" name="insertBefore" class="-full-width-input" ng-model="vm.insertBefore">
                </div>
            </div>
        </div>

        <!-- Insert after -->
        <div class="control-group umb-control-group">
            <div class="umb-el-wrap">
                <label class="control-label" for="insertAfter">
                    <localize key="templateEditor_postContent">Insert after field</localize>
                    <small><localize key="templateEditor_insertedAfter">Will be inserted after the field value</localize></small>
                </label>
                <div class="controls">
                    <input type="text" id="insertAfter" name="insertAfter" class="-full-width-input" ng-model="vm.insertAfter">
                </div>
            </div>
        </div>

        <!-- Line breaks -->
        <div class="control-group umb-control-group">
            <div class="umb-el-wrap">
                <div class="controls">
                    <label>
                        <span class="control-label">
                            <localize key="templateEditor_convertLineBreaks">Convert line breaks</localize>
                            <small><localize key="templateEditor_convertLineBreaksHelp">Replaces line breaks with break html tag</localize></small>
                        </span>
                      <input type="checkbox" id="linebreaks" name="linebreaks" ng-model="vm.convertLinebreaks">
                      <localize key="templateEditor_convertLineBreaksDescription">Yes, convert line breaks</localize>
                    </label>
                </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>
                    <pre>{{ vm.generateOutputSample() }}</pre>
                </div>
            </div>
        </div>

    </div>

</div>