﻿<div class="pi-tabs">
    <input type="hidden" id="pi-is-form-valid-hidden" value="{{tab1Form.$valid && tab2Form.$valid}}" />
    <ul>
        <li><a href="#tabs-1" ng-class="{true:'pi-tab-error'}[tab1Form.$invalid && validated]">Label</a></li>
        <li><a href="#tabs-2" ng-class="{true:'pi-tab-error'}[tab2Form.$invalid && validated]">Form Control</a></li>
    </ul>
    <div id="tabs-1">
        <form class="form-horizontal row-fluid" name="tab1Form">            
            <div class="control-group">
                <label class="control-label">* Label Text</label>
                <div class="controls">
                    <input type="text" name="textBoxLabelText" class="span8" ng-model="editingPlugin.values.labelText" required>
                    <span ng-show="tab1Form.textBoxLabelText.$invalid && validated" class="help-inline">Please enter Label Text.</span>
                </div>
            </div>
        </form>
    </div>
    <div id="tabs-2">
        <form class="form-horizontal row-fluid" name="tab2Form">            
            <div class="control-group">
                <label class="control-label">* Control Width</label>
                <div class="controls">
                    <buttons-radio class="btn-group" data-toggle="buttons-radio" name="textBoxControlWidth"
                                   model="editingPlugin.values.controlWidth" required
                                   options="editingPlugin.pluginType.editData.controls.controlWidth.selectOptions">
                    </buttons-radio>
                    <span ng-show="tab2Form.textBoxControlWidth.$invalid && validated" class="help-inline">Please select Control Width.</span>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Multiple Lines</label>
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox" ng-model="editingPlugin.values.multiline">                         
                    </label>
                </div>
            </div>            
            <div class="control-group" ng-show="editingPlugin.values.multiline">
                <label class="control-label">* Number of Line</label>
                <div class="controls">
                    <input  type="number" class="span2" name="textBoxNumberOfLines" ng-model="editingPlugin.values.numOfLines" ng-required="editingPlugin.values.multiline">
                    <span ng-show="tab2Form.textBoxNumberOfLines.$invalid && validated" class="help-inline">Please enter Number of Lines.</span>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Placeholder</label>
                <div class="controls">
                    <span style="display:inline-block">
                        <input type="text" id="pi-color-text" name="textBoxPlaceholder" ng-model="editingPlugin.values.placeholder">
                    </span>                    
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Rules</label>
                <div class="controls">
                    <buttons-checkbox class="btn-group" data-toggle="buttons-checkbox"
                                    model="editingPlugin.values.rules"
                                    options="editingPlugin.pluginType.editData.controls.rule.selectOptions">
                    </buttons-checkbox>
                </div>
            </div>            
            <div class="control-group" ng-show="editingPlugin.values.rules.any('(m, minLength)=>m==minLength', 'minLength')">
                <label class="control-label">* Min Length</label>
                <div class="controls">
                    <input type="text" class="span2" name="textBoxMinLength" ng-model="editingPlugin.values.minLength" ng-required="editingPlugin.values.rules.any('(m, minLength)=>m==minLength', 'minLength')">
                    <span ng-show="tab2Form.textBoxMinLength.$invalid && validated" class="help-inline">Please enter Min Length.</span>
                </div>
            </div>

            <div class="control-group" ng-show="editingPlugin.values.rules.any('(m, maxLength)=>m==maxLength', 'maxLength')">
                <label class="control-label">* Max Length</label>
                <div class="controls">
                    <input type="text" class="span2" name="textBoxMaxLength" ng-model="editingPlugin.values.maxLength" ng-required="editingPlugin.values.rules.any('(m, maxLength)=>m==maxLength', 'maxLength')">
                    <span ng-show="tab2Form.textBoxMaxLength.$invalid && validated" class="help-inline">Please enter Max Length.</span>
                </div>
            </div>

            <div class="control-group" ng-show="editingPlugin.values.rules.any('(m, regex)=>m==regex', 'regex')">
                <label class="control-label">* Regular Expression</label>
                <div class="controls">
                    <span style="display:inline-block">
                        <input type="text" name="textBoxRegex" ng-model="editingPlugin.values.regex" ng-required="editingPlugin.values.rules.any('(m, regex)=>m==regex', 'regex')">
                    </span>
                    <span ng-show="tab2Form.textBoxRegex.$invalid && validated" class="help-inline">Please enter Regular Expression.</span>
                </div>
            </div>
        </form>
    </div>
</div>