<div class='ProjectSpace bootstrap-wrapper'>
    <div class="modal-header">
        <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
        <h1 class="modal-title">{{'Metadata definition' | translate}}</h1>
    </div>
    <div class="modal-body" ng-if="dialogReady">

        <div class="form-group" ng-show="settingsField.guidingText">
            <label>{{'Guiding text' | translate}}</label>
            <i class="glyphicon glyphicon-question-sign"></i>
            <div>{{settingsField.guidingText | translate}}</div>
        </div>

        <div class="form-group">
            <label class="control-label">{{'Type' | translate}}</label>
            <select ng-model="settingsField.type" class="form-control" ng-disabled="!settingsField.canBeDeleted" ng-options="type for type in metadataTypes"></select>
        </div>

        <form class="form" role="form" name="form" ng-show="settingsField.type !== ''">
            <div class="form-group" ng-class="{ 'has-error': !settingsField.label }">
                <label>{{"Label" | translate}}</label>
                <input type="text" class="form-control" ng-model="settingsField.label" ng-required="true" name="settingsFiedLabel">
            </div>
            <div class="form-group" ng-show="'text,email,number,textarea,imagepicker,user,taxonomy'.indexOf(settingsField.type)>=0">
                <label>{{"Placeholder text" | translate}}</label>
                <input type="text" class="form-control" ng-model="settingsField.placeholder" ng-disabled="!settingsField.canBeModified">
            </div>
            <div class="form-group">
                <label>{{"Tooltip" | translate}}</label>
                <input type="text" class="form-control" ng-model="settingsField.helpText" >
            </div>

            <div class="form-group">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="settingsField.required" ng-true-value="true" ng-disabled="!settingsField.canBeModified">
                        {{"Required" | translate}}
                    </label>
                </div>
            </div>
            <div class="form-group" ng-if="'checkbox'.indexOf(settingsField.type)>=0">
                <label>{{"Default value" | translate}}</label>
                <div>
                    <input type="checkbox" ng-model="settingsField.defaultvalue" ng-disabled="!settingsField.canBeModified">
                </div>
            </div>
            <div class="form-group" ng-if="'text,email,number,textarea,radio,select'.indexOf(settingsField.type)>=0">
                <label>{{"Default value" | translate}}</label>
                <input type="text" class="form-control" ng-model="settingsField.defaultvalue" ng-disabled="!settingsField.canBeModified">
            </div>
            <div class="form-group" ng-if="'imagepicker'.indexOf(settingsField.type)>=0">
                <label>{{"Default value" | translate}}</label>
                <div>
                    <wizdom365-image-picker-input class="imagePicker" result="settingsField.defaultvalue" wizdommodule="BusinessApp" subfolder="'Images'"></wizdom365-image-picker-input>
                    <img ng-src="{{settingsField.defaultvalue}}" class="image-picker-preview" ng-show="settingsField.defaultvalue"/>
                </div>
            </div>
            <div class="form-group" ng-if="'imagepicker'.indexOf(settingsField.type)>=0">
                <label>{{"Hide image preview in new and edit form" | translate}}</label><br />
                <input type="checkbox" ng-model="settingsField.hideImagePreview" ng-true-value="true" ng-disabled="!settingsField.canBeModified">
            </div>
            <!--DateTime settings-->
            <div class="form-group" ng-if="'datetime'.indexOf(settingsField.type)>=0" ng-disabled="!settingsField.canBeModified">
                <label>{{"Default value" | translate}}</label>
                <div class="radio-group">
                    <div class="radio">
                        <label>
                            <input type="radio" ng-disabled="!settingsField.canBeModified" ng-model="settingsField.defaultvalue" value="none" ng-init="settingsField.defaultvalue = settingsField.defaultvalue || 'none'">{{"None" | translate}}
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" ng-disabled="!settingsField.canBeModified" ng-model="settingsField.defaultvalue" value="today">{{"Today's Date" | translate}}
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" ng-disabled="!settingsField.canBeModified" ng-model="settingsField.defaultvalue" value="selected">{{"Select Date" | translate}}
                        </label>
                    </div>
                    <div wizdom365-datetime-picker ng-disabled="!settingsField.canBeModified"
                         ng-show="settingsField.defaultvalue == 'selected'"
                         date="settingsField['value']"
                         show-date-picker="true"
                         show-time-picker="{{(!settingsField.properties.dateonly)}}">
                    </div>
                </div>
            </div>
            <div class="form-group" ng-show="'datetime'.indexOf(settingsField.type)>=0">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="settingsField.properties.dateonly" ng-disabled="!settingsField.canBeModified">
                        {{"Date Only" | translate}}
                    </label>
                </div>
            </div>

            <div class="form-group" ng-show="settingsField.type =='textarea'">
                <label>{{"Number of lines" | translate}}</label>
                <input type="number" class="form-control" ng-model="settingsField.lines" ng-disabled="!settingsField.canBeModified">
            </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>
            <div class="form-group" ng-show="settingsField.type =='number'">
                <label>{{"Minimum value" | translate}}</label>
                <input type="number" class="form-control" ng-model="settingsField.min" ng-disabled="!settingsField.canBeModified">
            </div>
            <div class="form-group" ng-show="settingsField.type =='number'">
                <label>{{"Maximum value" | translate}}</label>
                <input type="number" class="form-control" ng-model="settingsField.max" ng-disabled="!settingsField.canBeModified">
            </div>
            <div class="form-group" ng-show="'radio,select'.indexOf(settingsField.type)>=0">
                <label>{{"Possible values (each on separate line)" | translate}}</label>
                <textarea class="form-control" ng-model="settingsField.possibleValues" ng-disabled="!settingsField.canBeModified"></textarea>
            </div>

            <!--Taxonomy options-->
            <div class="form-group" ng-show="'taxonomy'.indexOf(settingsField.type)>=0">
                <label class="pull-left show">{{'Term Set' | translate}}</label>
                <span class="pull-right show" ng-show="settingsField.properties.termSet.isSiteCollectionGroup">{{'Note: If a Local term set is selected, editing the term will not work when provisioning sites across site collections' | translate}}</span>
                <div wizdom365-taxonomy-term-set-picker appname="Project space" selectedvalue="settingsField.properties.termSet" sourceurl="{{instance.url}}"></div>

                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="settingsField.properties.allowOnlyOneTerm" ng-disabled="!settingsField.canBeModified" />
                        {{"Allow only 1 term" | translate}}
                    </label>
                </div><br />
            </div>

            <!--<div class="form-group" ng-show="'text'.indexOf(settingsField.type)>=0">
        <label>{{"Validation expression" | translate}}</label>
        <input type="text" class="form-control" ng-model="settingsField.regex" style="width:50%;">
        <select class="form-control" ng-model="settingsField.regex" style="width:50%;">
            <option ng-repeat="(key, value) in regexList" value="{{value}}">{{key | translate}}</option>
        </select>
    </div>-->

            <div class="form-group">
                <label class="control-label" ng-show="'text'.indexOf(settingsField.type)>=0">{{"Validation expression" | translate}}</label>
                <div class="input-group" ng-show="'text'.indexOf(settingsField.type)>=0">
                    <input type="text" class="form-control" aria-label="Regex" ng-disabled="!settingsField.canBeModified" ng-model="settingsField.regex">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>{{getRegex() | translate}}</span> <span class="caret"></span></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li ng-repeat="(key, value) in regexList">
                                <a href="" ng-click="changeRegex(key, value);">&nbsp;{{key | translate}}</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div>
            <div class="form-group" ng-show="'text'.indexOf(settingsField.type)>=0">
                <label>{{"Error Message" | translate}}</label>
                <input type="text" class="form-control" ng-disabled="!settingsField.canBeModified" ng-model="settingsField.regexErrorMessage">
            </div>
        </form>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{'Display options' | translate}}
                </h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="displayOptons.hideOnDisplayForm" ng-disabled="!settingsField.canBeModified" />
                            {{"Hide on display form" | translate}}
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="displayOptons.hideOnEditForm" ng-disabled="!settingsField.canBeModified" />
                            {{"Hide on edit form" | translate}}
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="displayOptons.hideOnNewForm" ng-disabled="!settingsField.canBeModified" />
                            {{"Hide on new form" | translate}}
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group" ng-show="instance != null && settingsField.id == null && !sitetype">
            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-disabled="!settingsField.canBeModified" ng-model="props.pushToExistingTypes">
                    {{"Push to existing site types" | translate}}
                </label>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button ng-if="!settingsField.id" ng-click="addMetadata()" class="btn btn-primary" ng-disabled="!settingsField.label">{{'Add metadata' | translate}}</button>
        <button ng-if="settingsField.id" ng-click="addMetadata()" class="btn btn-primary" ng-disabled="!settingsField.label">{{'Update metadata' | translate}}</button>
    </div>
</div>
