<div ng-controller="entitySpecStringExampleController as ctrl" >
    <div class="t-content c-form" width="500px">
        <form class="c-generalForm">
            <fieldset class="c-fieldset">
            <h4>Not Required and Editable</h4>
            <div class="c-fieldset-item">
                <label>Name</label>
                <inv-entity-spec-string
                    input-id="ctrl.inputId"
                    input-name="ctrl.inputName"
                    input-text="ctrl.pricingPlanName"
                    specification = "ctrl.specification"
                    on-blur-with-changes = "ctrl.onBlurPricingPlanName">
                </inv-entity-spec-string>
            </div>

            <div class="c-fieldset-item">
                <label>Name</label>
                <inv-entity-spec-string
                    input-text="ctrl.pricingPlanName1"
                    specification = "ctrl.readOnlySpecifcation">
                </inv-entity-spec-string>
                <div class="c-fieldset-itemErrorMessage">Read Only</div>
            </div>
            <h4>Required</h4>
            <div class="c-fieldset-item"
                 form-field-error-state="Name">
                <label for="Name">Name</label>
                <inv-entity-spec-string
                    input-id = "ctrl.inputId"
                    input-name = "Name"
                    input-text = "ctrl.pricingPlanName2"
                    specification = "ctrl.requiredSpecification"
                    on-blur-with-changes = "ctrl.onBlurPricingPlanName2">
                </inv-entity-spec-string>
                <form-field-error-messages name="Name"></form-field-error-messages>
            </div>

            <h4>Required with Number Only Regex</h4>
            <div class="c-fieldset-item"
                form-field-error-state="Number">
                <label for="Number">Number</label>
                <inv-entity-spec-string
                    input-id="ctrl.numberOnlyId"
                    input-name="Number"
                    input-text="ctrl.numberOnly"
                    specification="ctrl.numberSpecification"
                    on-blur-with-changes = "ctrl.onBlurNumberOnly"
                    input-type="number">
                </inv-entity-spec-string>
                <form-field-error-messages name="Number"></form-field-error-messages>
            </div>

            <h4>Optional with Max Length of 5</h4>
            <div class="c-fieldset-item"
                 form-field-error-state="maxLengthName">
                <label for="maxLengthName">Name</label>
                <inv-entity-spec-string
                    input-id="ctrl.maxLengthId"
                    input-name="maxLengthName"
                    input-text="ctrl.maxLengthText"
                    specification = "ctrl.maxLengthSpecification"
                    on-blur-with-changes = "ctrl.onBlurMaxLength">
                </inv-entity-spec-string>
                <form-field-error-messages name="maxLengthName"></form-field-error-messages>
            </div>

            <h4>Required Text Area with Max Length of 250</h4>
            <div class="c-fieldset-item"
                 form-field-error-state="Description">
                <label for="Description">Description</label>
                <inv-entity-spec-string-text-area
                    text-area-id="ctrl.textAreaId"
                    text-area-name="Description"
                    text-area-text="ctrl.textAreaText"
                    specification = "ctrl.textAreaSpecification"
                    on-blur-with-changes = "ctrl.onBlurTextArea"
                    text-area-rows="5">
                </inv-entity-spec-string-text-area>
                <form-field-error-messages name="Description"></form-field-error-messages>
            </div>

            <div class="c-fieldset-item ">
                <label>Description</label>
                <inv-entity-spec-string-text-area
                    text-area-id="ctrl.textAreaIdReadOnly"
                    text-area-name="ctrl.textAreaNameReadOnly"
                    text-area-text="ctrl.textAreaTextReadOnly"
                    specification = "ctrl.textAreaSpecificationReadOnly"
                    text-area-rows="5">
                </inv-entity-spec-string-text-area>
                <div class="c-fieldset-itemErrorMessage">Read Only Text Area</div>
            </div>

        </fieldset>
        </form>
    </div>
</div>

    <style media="screen">
        inv-entity-spec-simple-dropdown{
            width: 75%;
        }
    </style>
    <div class="t-content" ng-controller="entitySpecSimpleDropdownExampleController as ctrl" style="width: 500px;">
        <form class="c-generalForm">
            <fieldset class="c-fieldset">
                <div class="c-fieldset-item">
                    <label for="testSimpleDropdown">Non required string</label>
                    <inv-entity-spec-simple-dropdown
                        specification = "ctrl.testSpec"
                        input-name = "testSimpleDropdown"
                        is-disabled = "ctrl.false"
                        on-codes-loaded = "ctrl.onCodesLoaded"
                        on-selection = "ctrl.onSelectString"
                        selected-value = "ctrl.stringValue"
                        ></inv-entity-spec-simple-dropdown>
                </div>
                <p>Model: <span ng-bind="ctrl.stringValue"></span></p>
                <div class="c-fieldset-item">
                    <label for="customSimpleDropdown">Dropdown with custom text format</label>
                    <inv-entity-spec-simple-dropdown
                        specification = "ctrl.testSpec"
                        input-name = "customSimpleDropdown"
                        is-disabled = "ctrl.false"
                        on-codes-loaded = "ctrl.onCodesLoaded"
                        on-selection = "ctrl.onSelectCustomDropDown"
                        selected-value = "ctrl.customDropdownValue"
                        dropdown-text-format="ctrl.dropdownTextFormat"
                        ></inv-entity-spec-simple-dropdown>
                </div>
                <p>Model: <span ng-bind="ctrl.customDropdownValue"></span></p>
                <div class="c-fieldset-item is-required"
                    form-field-error-state="testSimpleDropdown2">
                    <label for="testSimpleDropdown2">Required number</label>
                    <inv-entity-spec-simple-dropdown
                        specification = "ctrl.testSpec2"
                        input-name = "testSimpleDropdown2"
                        is-disabled = "ctrl.false"
                        on-codes-loaded = "ctrl.onCodesLoaded"
                        on-selection = "ctrl.onSelectInt"
                        selected-value = "ctrl.intValue"
                        ></inv-entity-spec-simple-dropdown>
                    <form-field-error-messages name="testSimpleDropdown2"></form-field-error-messages>
                </div>
                <p>Model: <span ng-bind="ctrl.intValue"></span></p>
            </fieldset>
        </form>
    </div>

    <style media="screen">
        inv-entity-spec-multi-select-dropdown{
            width: 75%;
        }
    </style>
    <div class="t-content" ng-controller="entitySpecMultiSelectDropdownExampleController as ctrl" style="width: 500px;">
        <form class="c-generalForm">
            <fieldset class="c-fieldset">
                <div class="c-fieldset-item">
                    <label for="testMultiSelectDropdown">Countires</label>
                    <inv-entity-spec-multi-select-dropdown
                        available-values="ctrl.allCountries"
                        specification="ctrl.testSpec"
                        input-name="testMultiSelectDropdown"
                        on-country-codes-load="ctrl.onCountryCodesLoad"
                        on-selection="ctrl.onCountryCodesSelect"
                        selected-values="ctrl.selectedValues">
                    </inv-entity-spec-multi-select-dropdown>
                </div>
            </fieldset>
        </form>
    </div>

<div ng-controller="entitySpecNumericInputExampleController as ctrl">
    <div class="t-content">
        <form class="c-generalForm">
            <fieldset class="c-fieldset">
                <h4>Numeric Input, format int32</h4>
                <div class="c-fieldset-item"
                     form-field-error-state="IntegerValue">
                    <label>Number</label>
                    <inv-entity-spec-numeric-input
                        input-id="ctrl.inputId"
                        input-name="IntegerValue"
                        input-value="ctrl.inputValueInt32"
                        specification="ctrl.specificationInt32"
                        on-blur="ctrl.onBlur">
                    </inv-entity-spec-numeric-input>
                    <form-field-error-messages name="IntegerValue"></form-field-error-messages>
                </div>

                <h4>Numeric Input, format int32, custom minimum and maximum value</h4>
                <div class="c-fieldset-item"
                     form-field-error-state="intMinMax">
                    <label>Number</label>
                    <inv-entity-spec-numeric-input
                        input-id="ctrl.inputId"
                        input-name="intMinMax"
                        input-value="ctrl.inputValueInt32CustomMinMax"
                        specification="ctrl.specificationInt32CustomMinMax"
                        on-blur="ctrl.onBlur">
                    </inv-entity-spec-numeric-input>
                    <form-field-error-messages name="intMinMax"></form-field-error-messages>
                </div>

                <h4>Numeric Input, format int32, Required</h4>
                <div class="c-fieldset-item  is-required"
                     form-field-error-state="intRequired">
                    <label for="intRequired">Number</label>
                    <inv-entity-spec-numeric-input
                        input-id="ctrl.inputId"
                        input-name="intRequired"
                        specification="ctrl.specificationInt32Required"
                        on-blur="ctrl.onBlur">
                    </inv-entity-spec-numeric-input>
                    <form-field-error-messages name="intRequired"></form-field-error-messages>
                </div>

                <h4>Numeric Input, format int32, Readonly</h4>
                <div class="c-fieldset-item">
                    <label for="intReadOnly">Number</label>
                    <inv-entity-spec-numeric-input
                        input-id="ctrl.inputId"
                        input-name="intReadOnly"
                        input-value="ctrl.inputValueInt32ReadOnly"
                        specification="ctrl.specificationInt32ReadOnly"
                        on-blur="ctrl.onBlur">
                    </inv-entity-spec-numeric-input>
                </div>

                <h4>Numeric Input, format decimal</h4>
                <div class="c-fieldset-item">
                    <label>Number</label>
                    <inv-entity-spec-numeric-input
                        input-id="ctrl.inputDecimalId"
                        input-name="ctrl.inputDecimalName"
                        input-value="ctrl.inputValueDecimal"
                        specification="ctrl.specificationDecimal"
                        on-blur="ctrl.onBlur">
                    </inv-entity-spec-numeric-input>
                </div>

                <h4>Numeric Input, format decimal, custom minimum and maximum value</h4>
                <div class="c-fieldset-item"
                     form-field-error-state="decimalMinMax">
                    <label for="decimalMinMax">Number</label>
                    <inv-entity-spec-numeric-input
                        input-id="ctrl.inputDecimalId"
                        input-name="decimalMinMax"
                        input-value="ctrl.inputValueDecimalCustomMinMax"
                        specification="ctrl.specificationDecimalCustomMinMax"
                        on-blur="ctrl.onBlur">
                    </inv-entity-spec-numeric-input>
                    <form-field-error-messages name="decimalMinMax"></form-field-error-messages>
                </div>

                <h4>Numeric Input, format decimal, Required</h4>
                <div class="c-fieldset-item  is-required"
                     form-field-error-state="decimalRequired">
                    <label for="decimalRequired">Number</label>
                    <inv-entity-spec-numeric-input
                        input-id="ctrl.inputDecimalId"
                        input-name="decimalRequired"
                        specification="ctrl.specificationDecimalRequired"
                        on-blur="ctrl.onBlur">
                    </inv-entity-spec-numeric-input>
                    <form-field-error-messages name="decimalRequired"></form-field-error-messages>
                </div>

                <h4>Numeric Input, format decimal, Readonly</h4>
                <div class="c-fieldset-item">
                    <label for="intReadOnly">Number</label>
                    <inv-entity-spec-numeric-input
                        input-id="ctrl.inputDecimalId"
                        input-name="intReadOnly"
                        input-value="ctrl.inputValueDecimalReadOnly"
                        specification="ctrl.specificationDecimalReadOnly"
                        on-blur="ctrl.onBlur">
                    </inv-entity-spec-numeric-input>
                </div>
            </fieldset>
        </form>
    </div>
</div>

<div ng-controller="entitySpecBooleanExampleController as ctrl">
    <div class="t-content">
        <form class="c-generalForm">
            <fieldset class="c-fieldset">
                <h4>Boolean, format bool</h4>
                <div class="c-fieldset-item">
                    <label>Boolean</label>
                    <inv-entity-spec-boolean
                        input-id="BooleanValue1"
                        input-name="boolInput"
                        input-value="ctrl.inputValueBool"
                        on-change="ctrl.onChange"
                        specification="ctrl.specificationBool">
                    </inv-entity-spec-boolean>
                </div>
                <h4>Boolean, Readonly</h4>
                <div class="c-fieldset-item">
                    <label for="boolReadOnly">Boolean</label>
                    <inv-entity-spec-boolean
                        input-id="BooleanValue3"
                        input-name="boolReadOnly"
                        input-value="ctrl.inputValueBoolReadOnly"
                        on-change="ctrl.onChange"
                        specification="ctrl.specificationBoolReadOnly">
                    </inv-entity-spec-boolean>
                </div>
                <h4>Boolean, Required</h4>
                <div class="c-fieldset-item is-required">
                    <label for="boolReadOnly">Boolean</label>
                    <inv-entity-spec-boolean
                        input-id="BooleanValue2"
                        input-name="boolRequired"
                        input-value="ctrl.inputValueBoolRequired"
                        on-change="ctrl.onChange"
                        specification="ctrl.specificationBoolRequired">
                    </inv-entity-spec-boolean>
                </div>
            </fieldset>
        </form>
    </div>
</div>

<div ng-controller="entitySpecDateTimeInputExampleController as ctrl">
    <div class="t-content">
        <form class="c-generalForm">
            <fieldset class="c-fieldset">
                <h4>Date Time</h4>
                <div class="c-fieldset-item">
                    <label for="DateTimeValue1">Date Time</label>
                    <inv-entity-spec-date-time
                        input-id="DateTimeValue1"
                        input-value="ctrl.today"
                        on-change="ctrl.onChange"
                        specification="ctrl.specificationDateTime">
                    </inv-entity-spec-date-time>
                </div>
                <h4>Date Time, Readonly</h4>
                <div class="c-fieldset-item">
                    <label for="DateTimeValue2">Date Time</label>
                    <inv-entity-spec-date-time
                        input-id="DateTimeValue2"
                        input-value="ctrl.tomorrow"
                        on-change="ctrl.onChange"
                        specification="ctrl.specificationDateTimeReadOnly">
                    </inv-entity-spec-date-time>
                </div>
                <h4>Date Time, Required</h4>
                <div class="c-fieldset-item  is-required"
                     form-field-error-state="DateTimeValue3"
                     form-field-locale-key="::ctrl.localeKeys.DATEPICKER.DATE">
                    <label for="DateTimeValue3">Date Time</label>
                    <inv-entity-spec-date-time
                        input-id="DateTimeValue3"
                        on-change="ctrl.onChange"
                        specification="ctrl.specificationDateTimeRequired">
                    </inv-entity-spec-date-time>
                    <form-field-error-messages name="DateTimeValue3"></form-field-error-messages>
                </div>
            </fieldset>
        </form>
    </div>
</div>

<div ng-controller="entitySpecRadioButtonsExampleController as ctrl">
    <div class="t-content">
        <form class="c-generalForm">
            <fieldset class="c-fieldset">
                <h4>Radio Buttons, format codeTable</h4>
                <div class="c-fieldset-item">
                    <label>Radio Buttons</label>
                    <inv-entity-spec-radio-buttons
                        input-id="radioButtons"
                        input-name="radioButtonsInput"
                        input-value="ctrl.inputValue"
                        on-change="ctrl.onChange"
                        options="ctrl.optionsValue"
                        specification="ctrl.specificationValue">
                    </inv-entity-spec-radio-buttons>
                </div>
                <h4>Radio Buttons, format codeTable, Read Only</h4>
                <div class="c-fieldset-item">
                    <label for="RadioButtonsReadOnly">Radio Buttons</label>
                    <inv-entity-spec-radio-buttons
                        input-id="RadioButtonsReadOnly"
                        input-name="radioButtonsReadOnly"
                        input-value="ctrl.inputValueReadOnly"
                        on-change="ctrl.onChange"
                        options="ctrl.optionsValueReadOnly"
                        specification="ctrl.specificationValueReadOnly">
                    </inv-entity-spec-radio-buttons>
                </div>
                <h4>Radio Buttons, format codeTable, Required</h4>
                <div class="c-fieldset-item is-required">
                    <label for="RadioButtonsRequired">Radio Buttons</label>
                    <inv-entity-spec-radio-buttons
                        input-id="RadioButtonsRequired"
                        input-name="radioButtonsRequired"
                        input-value="ctrl.inputValueRequired"
                        on-change="ctrl.onChange"
                        options="ctrl.optionsValueRequired"
                        specification="ctrl.specificationValueRequired">
                    </inv-entity-spec-radio-buttons>
                </div>
            </fieldset>
        </form>
    </div>
</div>

<div ng-controller="entitySpecLabelExampleController as ctrl" >
    <div class="t-content c-form" width="500px">
        <form class="c-generalForm">
            <fieldset class="c-fieldset">
                <h4>Not Required and Editable</h4>
                <div class="c-fieldset-item">
                    <label>Label with tooltip</label>
                    <inv-entity-spec-label
                        text="ctrl.text"
                        tooltip="ctrl.tooltip">
                    </inv-entity-spec-label>
                </div>

                <div class="c-fieldset-item">
                    <label>Label without tooltip</label>
                    <inv-entity-spec-label
                        text="ctrl.text">
                    </inv-entity-spec-label>
                </div>
            </fieldset>
        </form>
    </div>
</div>