<h2 ng-if="vm.metadata.id">{{vm.metadata.schema.label || vm.metadata.name }}</h2>
<div ng-if="vm.types.length > 0">
    <h3>
        {{'Info' | translate}}
    </h3>
    <div>
        <!--<pre>
        {{vm.metadata}}
        </pre>-->
        <form class="form" role="form" name="form">
            <div class="form-group">
                <label>{{'Type' | translate}}</label>
                <select class="form-control" ng-model="vm.metadata.schema.type" ng-options="type for type in vm.types" ng-disabled="vm.metadata.id"></select>
            </div>
            <div ng-if="vm.metadata.id">
                <div class="form-group">
                    <label>{{'Internal Name' | translate}}</label>
                    <input type="text" ng-model="vm.metadata.internalName" placeholder="{{'Name' | translate}}" ng-required="true" class="form-control" ng-disabled="vm.metadata.id">
                </div>
            </div>
            <div class="form-group" ng-class="{ 'has-error': !vm.metadata.schema.label }">
                <label>{{"Label" | translate}}</label>
                <input type="text" class="form-control" ng-model="vm.metadata.schema.label" ng-required="true" ng-change="vm.markAsUnsaved()">
            </div>

            <div ng-if="vm.metadata.id">
                <div class="form-group">
                    <label>{{"Required" | translate}}</label>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="vm.metadata.schema.required" ng-true-value="true" ng-change="vm.markAsUnsaved()">
                            Make the metadata required
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label>{{"Tooltip" | translate}}</label>
                    <input type="text" class="form-control" ng-model="vm.metadata.schema.helpText" ng-change="vm.markAsUnsaved()">
                </div>

                <div class="form-group" ng-show="'text,email,number,textarea,image,user,taxonomy,principal'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Placeholder text" | translate}}</label>
                    <input type="text" class="form-control" ng-model="vm.metadata.schema.placeholder" ng-change="vm.markAsUnsaved()">
                </div>

                <!-- Default Value -->
                <div class="form-group" ng-if="'checkbox'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Default value" | translate}}</label>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" string-to-bool ng-model="vm.metadata.schema.defaultvalue" ng-change="vm.markAsUnsaved()">
                        </label>
                    </div>
                </div>
                <div class="form-group" ng-if="'text,email,textarea,radio,select'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Default value" | translate}}</label>
                    <input type="text" class="form-control" ng-model="vm.metadata.schema.defaultvalue" ng-change="vm.markAsUnsaved()">
                </div>
                <div class="form-group" ng-show="'number,decimal'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Default value" | translate}}</label>
                    <input type="number" string-to-decimal step="{{vm.metadata.schema.type == 'decimal' ? 0.01 : 1}}" class="form-control" ng-model="vm.metadata.schema.defaultvalue" ng-change="vm.markAsUnsaved()">
                </div>

                <div ng-if="'principal'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Default value" | translate}}</label>
                    <div wizdom365-principalpicker
                         principals="vm.metadata.schema.defaultvalue"
                         class="principal-picker"
                         add-fn="vm.markAsUnsaved()"
                         remove-fn="vm.markAsUnsaved()"
                         placeholder="{{vm.metadata.schema.placeholder}}"
                         domain="{{vm.metadata.schema.domain}}"
                         mode="{{vm.metadata.schema.mode}}"
                         allowmultiple="{{vm.metadata.schema.allowMultiple}}"
                         alloweveryone="{{vm.metadata.schema.allowEveryone}}"
                         allow-external-and-internal="{{vm.metadata.schema.allowExternalsAndInternals}}"
                         allowwizdomgroups="{{vm.metadata.schema.allowWizdomGroups}}"></div>
                </div>

                <div class="form-group" ng-if="'image'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Default value" | translate}}</label>
                    <div>
                        <wizdom365-image-picker-input class="imagePicker" result="vm.metadata.schema.defaultvalue" wizdommodule="BusinessApp" subfolder="'Images'"></wizdom365-image-picker-input>
                        <img ng-src="{{vm.metadata.schema.defaultvalue}}" class="image-picker-preview" ng-show="vm.metadata.schema.defaultvalue" />
                    </div>
                </div>

                <div class="form-group" ng-if="'datetime'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Default value" | translate}}</label>
                    <div class="radio-group">
                        <div class="radio">
                            <label>
                                <input type="radio" ng-model="vm.metadata.schema.defaultvalue" value="none" ng-change="vm.markAsUnsaved()" ng-init="vm.metadata.schema.defaultvalue = vm.metadata.schema.defaultvalue || 'none'">{{"None" | translate}}
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" ng-model="vm.metadata.schema.defaultvalue" value="today" ng-change="vm.markAsUnsaved()">{{"Today's Date" | translate}}
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" ng-model="vm.metadata.schema.defaultvalue" value="selected" ng-change="vm.markAsUnsaved()">{{"Select Date" | translate}}
                            </label>
                        </div>
                        <div wizdom365-datetime-picker
                             ng-show="vm.metadata.schema.defaultvalue == 'selected'"
                             date="vm.metadata.schema.defaultvalueDate"
                             show-date-picker="true"
                             show-time-picker="{{(!vm.metadata.schema.dateonly)}}">
                        </div>
                    </div>
                </div>
                <!-- Default Value Over-->
                <!-- Text -->
                <div class="form-group" ng-show="'text'.indexOf(vm.metadata.schema.type)>=0">
                    <label class="control-label">{{"Validation expression" | translate}}</label>
                    <div class="input-group">
                        <input type="text" class="form-control" aria-label="Regex" ng-model="vm.metadata.schema.regex" ng-change="vm.markAsUnsaved()">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>{{vm.getRegex() | translate}}</span> <span class="caret"></span></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li ng-repeat="(key, value) in vm.regexList">
                                    <a href="" ng-click="vm.metadata.schema.regex = value;">&nbsp;{{key | translate}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="form-group" ng-show="'text'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Validation error Message" | translate}}</label>
                    <input type="text" class="form-control" ng-model="vm.metadata.schema.regexErrorMessage" ng-change="vm.markAsUnsaved()">
                </div>

                <!-- TextArea -->
                <div class="form-group" ng-show="vm.metadata.schema.type =='textarea'">
                    <label>{{"Number of lines" | translate}}</label>
                    <input type="number" class="form-control" ng-model="vm.metadata.schema.numberOfLines" ng-change="vm.markAsUnsaved()">
                </div>
                <!--
    <div class="form-group" ng-if="settingsField.type =='textarea'">
        <label>{{"Html" | translate}}</label>
        <input type="checkbox" ng-model="settingsField.properties.html" ng-disabled="!settingsField.canBeModified">
    </div>
    -->
                <!-- Number -->
                <div class="form-group" ng-show="'number'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Minimum value" | translate}}</label>
                    <input type="number" step="{{vm.metadata.schema.type == 'decimal' ? 0.01 : 1}}" class="form-control" ng-model="vm.metadata.schema.minValue" ng-change="vm.markAsUnsaved()">
                </div>
                <div class="form-group" ng-show="'number'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Maximum value" | translate}}</label>
                    <input type="number" step="{{vm.metadata.schema.type == 'decimal' ? 0.01 : 1}}" class="form-control" ng-model="vm.metadata.schema.maxValue" ng-change="vm.markAsUnsaved()">
                </div>

                <!-- Decimal -->
                <div class="form-group" ng-show="'decimal'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Minimum value" | translate}}</label>
                    <input type="number" step="0.01" class="form-control" ng-model="vm.metadata.schema.minValue" ng-change="vm.markAsUnsaved()">
                </div>
                <div class="form-group" ng-show="'decimal'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Maximum value" | translate}}</label>
                    <input type="number" step="0.01" class="form-control" ng-model="vm.metadata.schema.maxValue" ng-change="vm.markAsUnsaved()">
                </div>

                <!-- Radio/Select -->
                <div class="form-group" ng-show="'radio,select'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Possible values (each on separate line)" | translate}}</label>
                    <textarea class="form-control" string-to-options-array ng-model="vm.metadata.schema.options" ng-change="vm.markAsUnsaved()"></textarea>
                </div>

                <!-- DateTime -->
                <div class="form-group" ng-show="'datetime'.indexOf(vm.metadata.schema.type)>=0">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="vm.metadata.schema.dateonly" ng-change="vm.markAsUnsaved()">
                            {{"Date Only" | translate}}
                        </label>
                    </div>
                </div>
                <!-- Datetime over -->
                <!-- Principal -->
                <div class="form-group" ng-if="'principal'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Allow multiple" | translate}}</label>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="vm.metadata.schema.allowMultiple" ng-change="vm.markAsUnsaved()">
                            Allow multiple principals to be selected
                        </label>
                    </div>
                </div>

                <div class="form-group" ng-if="'principal'.indexOf(vm.metadata.schema.type)>=0">
                    <!-- Domain options: internals,externals,all -->
                    <label>{{"Domain" | translate}}</label>
                    <div class="radio-group">
                        <div class="radio">
                            <label>
                                <input type="radio" ng-model="vm.metadata.schema.domain" value="all" ng-change="vm.markAsUnsaved()">{{"All" | translate}}
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" ng-model="vm.metadata.schema.domain" value="internals" ng-change="vm.markAsUnsaved()">{{"Internals only" | translate}}
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" ng-model="vm.metadata.schema.domain" value="externals" ng-change="vm.markAsUnsaved()">{{"Externals only" | translate}}
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group" ng-if="'principal'.indexOf(vm.metadata.schema.type)>=0">
                    <!--mode= users,groups,all-->
                    <label>{{"Mode" | translate}}</label>
                    <div class="radio-group">
                        <div class="radio">
                            <label>
                                <input type="radio" ng-model="vm.metadata.schema.mode" value="all" ng-change="vm.markAsUnsaved()">{{"All" | translate}}
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" ng-model="vm.metadata.schema.mode" value="users" ng-change="vm.markAsUnsaved()">{{"Users only" | translate}}
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" ng-model="vm.metadata.schema.mode" value="groups" ng-change="vm.markAsUnsaved()">{{"Groups only" | translate}}
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group" ng-if="'principal'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Principal type 'Everyone'" | translate}}</label>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="vm.metadata.schema.allowEveryone" ng-change="vm.markAsUnsaved()">
                            Allow the Wizdom principal 'Everyone' to be selected
                        </label>
                    </div>
                </div>
                <div class="form-group" ng-if="'principal'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Principal types 'externals' and 'internals'" | translate}}</label>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="vm.metadata.schema.allowExternalsAndInternals" ng-change="vm.markAsUnsaved()">
                            Allow the Wizdom principals 'externals' and 'internals' to be selected
                        </label>
                    </div>
                </div>
                <div class="form-group" ng-if="'principal'.indexOf(vm.metadata.schema.type)>=0">
                    <label>{{"Wizdom audience groups" | translate}}</label>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="vm.metadata.schema.allowWizdomGroups" ng-change="vm.markAsUnsaved()">
                            Allow Wizdom audience groups to be selected
                        </label>
                    </div>
                </div>
                <!-- Principal Over -->

            </div>
        </form>

        <!-- Create/Save/Cancel button-->
        <div ng-if="vm.unsaved || !vm.metadata.id">
            <div ng-show="vm.creating">{{'Creating, please wait' | translate}}</div>
            <button ng-if="!vm.metadata.id" ng-hide="vm.saving" type="button" ng-click="vm.create();" class="btn btn-primary">{{'Create' | translate}}</button>
            <button ng-if="vm.metadata.id && vm.unsaved" ng-hide="vm.saving" type="button" ng-click="vm.save();" class="btn btn-primary">{{'Save' | translate}}</button>
            <button ng-if="!vm.metadata.id || vm.unsaved" ng-hide="vm.saving" type="button" ng-click="vm.cancel();" class="btn btn-default">{{'Cancel' | translate}}</button>
        </div>
    </div>
    <!--<div ng-if="vm.metadata.id">
        <hr />
        <h3>
            {{'Types' | translate}}
        </h3>
        <div>
            Connected types not implemented yet!
        </div>
        <hr />
    </div>-->
</div>