<form class="form" role="form" name="form">

    <div class="form-group">
        <label>{{"Label" | translate}}</label>
        <input type="text"
               class="form-control"
               ng-model="vm.settingsField.label">
    </div>

    <div class="form-group"
         ng-if="'row'.indexOf(vm.settingsField.type)>=0">
        <label>{{"Columns count" | translate}}</label>
        <select class="form-control"
                ng-model="vm.settingsField.columnsCount">
            <option value="1">
                1
            </option>
            <option value="2">
                2
            </option>
            <option value="3">
                3
            </option>
            <option value="4">
                4
            </option>
        </select>
    </div>



    <div class="form-group"
         ng-if="'text,email,number,textarea,user,imagepicker'.indexOf(vm.settingsField.type)>=0">
        <label>{{"Placeholder text" | translate}}</label>
        <input type="text"
               class="form-control"
               ng-model="vm.settingsField.placeholder">
    </div>

    <div class="form-group"
         ng-if="'date,text,email,textarea,number,password,user,datetime,taxonomy,radio,select,checkbox,checkboxlist'.indexOf(vm.settingsField.type)>=0">
        <label>{{"Required" | translate}}</label><br />
        <input type="checkbox"
               ng-model="vm.settingsField.required"
               ng-true-value="true">
    </div>

    <div class="form-group"
         ng-if="'text,email,number,textarea,radio,select,checkbox'.indexOf(vm.settingsField.type)>=0">
        <label>{{"Default value" | translate}}</label>
        <input type="text"
               ng-if="vm.settingsField.type != 'checkbox'"
               class="form-control"
               ng-model="vm.settingsField['defaultvalue']">
        <br ng-if="vm.settingsField.type == 'checkbox'" />
        <input type="checkbox"
               ng-if="vm.settingsField.type == 'checkbox'"
               ng-model="vm.settingsField['defaultvalue']"
               ng-true-value="true">
    </div>

    <div class="form-group"
         ng-if="vm.settingsField.type =='textarea'">
        <label>{{"Number of lines" | translate}}</label>
        <input type="number"
               class="form-control"
               ng-model="vm.settingsField.lines">
    </div>

    <div class="form-group"
         ng-if="vm.settingsField.type =='number'">
        <label>{{"Minimum value" | translate}}</label>
        <input type="number"
               class="form-control"
               ng-model="vm.settingsField.min">
    </div>

    <div class="form-group"
         ng-if="vm.settingsField.type =='number'">
        <label>{{"Maximum value" | translate}}</label>
        <input type="number"
               class="form-control"
               ng-model="vm.settingsField.max">
    </div>

    <div class="form-group"
         ng-if="',radio,select,checkboxlist,'.indexOf(','+vm.settingsField.type+',')>=0">
        <label>{{"Possible values (each on separate line)" | translate}}</label>
        <textarea class="form-control"
                  ng-model="vm.settingsField.possibleValues"></textarea>
    </div>

    <!--ui-tinymce options-->
    <!--NOTE: Defaultvalue not set when editing an existing html field-->
    <div class="form-group" ng-if="'html'.indexOf(vm.settingsField.type)>=0">
        <label>{{"HTML" | translate}}</label><br />
        <textarea type="text"
                  class="form-control"
                  id="{{id}}"
                  placeholder="HTML Content"
                  ng-model="vm.settingsField.defaultvalue"></textarea>
    </div>

    <!--textarea options-->
    <div class="form-group"
         ng-if="vm.settingsField.type =='textarea'">
        <label>{{"HTML" | translate}}</label><br />
        <input type="checkbox"
               ng-model="vm.settingsField.properties.html">
    </div>

    

    <!--DateTime settings-->
    <div class="form-group"
         ng-if="'datetime'.indexOf(vm.settingsField.type)>=0">
        <label>{{"Default value" | translate}}</label>
        <div class="radio-group">
            <div class="radio">
                <label>
                    <input type="radio"
                           ng-model="vm.settingsField['defaultvalue']"
                           value="none">
                    {{"None" | translate}}
                </label>

                <br />
                <label>
                    <input type="radio"
                           ng-model="vm.settingsField['defaultvalue']"
                           value="today">
                    {{"Today's Date" | translate}}
                </label>

                <br />
                <label>
                    <input type="radio"
                           ng-model="vm.settingsField['defaultvalue']"
                           value="selected">
                    {{"Select Date" | translate}}
                </label>
                <div wizdom365-datetime-picker
                     ng-if="vm.settingsField['defaultvalue'] == 'selected'"
                     date="vm.settingsField['value']"
                     show-date-picker="true"
                     show-time-picker="{{(!vm.settingsField.properties.dateonly)}}">
                </div>
            </div>
        </div>
    </div>

    <div class="form-group"
         ng-if="'datetime'.indexOf(vm.settingsField.type)>=0">
        <label>{{"Date Only" | translate}}</label><br />
        <input type="checkbox"
               ng-model="vm.settingsField.properties.dateonly">
    </div>

    <!--text validation properties-->
    <div class="form-group"
         ng-if="'text'.indexOf(vm.settingsField.type)>=0">
        <label>{{"Validation expression" | translate}}</label>
        <input type="text"
               class="form-control"
               ng-model="vm.settingsField.regex">
        <select class="form-control"
                ng-model="vm.settingsField.regex">
            <option ng-repeat="(key, value) in vm.regexList"
                    value="{{value}}">
                {{key | translate}}
            </option>
        </select>
    </div>

    <div class="form-group"
         ng-if="'text'.indexOf(vm.settingsField.type)>=0">
        <label>{{"Error Message" | translate}}</label>
        <input type="text"
               class="form-control"
               ng-model="vm.settingsField.regexErrorMessage">
    </div>

    <!--users and groups options-->
    <div class="form-group"
         ng-if="vm.settingsField.type =='user'">
        <label>{{"Allow multiple selections:" | translate}}</label>
        <br />
        <input type="checkbox"
               ng-model="vm.settingsField.properties.allowmultiple">
    </div>

    <div class="form-group"
         ng-if="vm.settingsField.type =='user'">
        <label>{{"Allow selection of:" | translate}}</label>
        <div class="radio-group">
            <div class="radio">
                <label>
                    <input type="radio"
                           ng-model="vm.settingsField.properties.mode"
                           value="users">
                    {{"People Only" | translate}}
                </label>
                <br />
                <label>
                    <input type="radio"
                           ng-model="vm.settingsField.properties.mode"
                           value="groups">
                    {{"Groups Only" | translate}}
                </label><br />
                <label>
                    <input type="radio"
                           ng-model="vm.settingsField.properties.mode"
                           value="all">
                    {{"People and Groups" | translate}}
                </label>
            </div>
        </div>
    </div>

    <!--Taxonomy options-->
    <div class="form-group"
         ng-if="vm.settingsField.type =='taxonomy'">
        <label>{{'TermSet:' | translate}}</label>
        <select class="form-control"
                ng-model="vm.settingsField.properties.termSet"
                ng-options="termSet.termSetName group by termSet.termSetGroup
                        for termSet in vm.allTermSets track by termSet.termSetId">
        </select>
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="vm.settingsField.properties.allowOnlyOneTerm" />
                {{"Allow only 1 term" | translate}}
            </label>
        </div>
    </div>
    
    <!--Attachments options-->
    <div class="form-group"
         ng-if="vm.settingsField.type =='attachment'">
        <label>{{"Allow multiple selections:" | translate}}</label>
        <br />
        <input type="checkbox"
               ng-model="vm.settingsField.properties.multiple">
    </div>

    <button type="button"
            class="btn btn-default btn-primary"
            ng-click="vm.update()">
        {{"Update" | translate}}
    </button>
    <button class="btn btn-default"
            ng-click="vm.cancel()">
        {{"Cancel" | translate}}
    </button>

</form>