<form name="addData" role="form" novalidate ng-submit="save(newData)">
    <div class="modal-header DataPanel--hideOnFullScreen">
        <button type="button" class="close" ng-click="$dismiss()"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title" ng-if="isNewData" translate><span>Create a new variable</span></h3>

        <h3 class="modal-title" ng-if="!isNewData"><span translate>Edit variable</span>
            <strong>{{newData.$$name}}</strong></h3>

    </div>
    <div class="modal-body">
        <div class="form-group DataPanel--hideOnFullScreen" ng-if="isNewData"
             ng-class="{'has-error': !isDataNameUnique(newData.$$name)}">
            <label class="control-label control-label--required" for="name">
                <span translate>Name</span>
                <span ng-show="!isDataNameUnique(newData.$$name)" translate> '{{newData.$$name}}' already exists</span>
            </label>
            <input type="text" class="form-control" autofocus placeholder="{{'Name' | translate}}" name="name"
                   ng-model="newData.$$name" ng-trim="false" ng-pattern="/^[a-zA-Z][\w]*$/" required>

            <p class="text-danger" ng-show="addData.name.$dirty && addData.name.$error.pattern" translate>Variable names
                must start with a letter and contain only alphanumeric characters</p>
        </div>

        <exposable-data model="newData.exposed" ng-if="exposableData"></exposable-data>
        <div ng-if="!newData.exposed">
            <div class="form-group DataPanel--hideOnFullScreen">
                <label class="control-label" for="type" translate>Type</label>
                <select name="type"
                        class="form-control"
                        ng-model="newData.type"
                        ng-change="updateValue(newData.type)"
                        ng-options="dataType.type as getLabel(dataType.type) group by dataType.group for dataType in dataTypes"></select>
            </div>
            <div ng-switch="newData.type" class="form-group form-group--data">
                <!-- string -->
                <label ng-switch-default class="control-label" for="value" translate>Value</label>
                <input ng-switch-default type="text" class="form-control" placeholder="{{'Value' | translate }}"
                       id="value"
                       name="value" ng-model="newData.displayValue">

                <!-- url parameter -->
                <label ng-switch-when="urlparameter" class="control-label" for="value" translate>URL parameter
                    name</label>
                <input ng-switch-when="urlparameter" type="text" class="form-control"
                       placeholder="{{'name' | translate}}"
                       id="value" name="value" ng-model="newData.displayValue">

                <p class="help-block" ng-switch-when="urlparameter" translate>
                    <span class="tip">Tip:</span> URL parameters are located after a <em>?</em> in the page URL.
                </p>
                <!-- url -->
                <label ng-switch-when="url" class="control-label" for="value" translate>API URL</label>
                <input ng-switch-when="url" autofocus type="text" class="form-control" placeholder="../API" id="value"
                       name="value" ng-model="newData.displayValue" required valid-url>
                <!-- Advanced options -->
                <div ng-switch-when="url" class="DataPopPup-advanced-options" ng-init="advancedOptions= !newData.advancedOptions.hasOwnProperty('headers') && !newData.advancedOptions.hasOwnProperty('statusCode')">
                    <label ng-click="advancedOptions = !advancedOptions">
                        <i class="property-collapsed glyphicon"
                           ng-class="{'glyphicon-chevron-right': advancedOptions, 'glyphicon-chevron-down': !advancedOptions}"></i>
                        <translate>Advanced options</translate>
                    </label>
                    <span><i class="fa fa-question-circle" title="{{'Bind these options to a UI-Designer variable and use them in your artifact.' | translate}}"></i></span>
                    <div uib-collapse="advancedOptions">
                        <label class="control-label" for="headers" translate>Response headers</label>
                        <span><i class="fa fa-question-circle" title="{{ 'Store as a Json object { header-name : HeaderValue } and can be accessed using this syntax $data.myRequestHeaders[\'header-name\']' | translate}}"></i></span>
                        <div class="input-group input-group-sm">
                            <uid-property-typeahead
                                id="headers"
                                autocomplete="off"
                                uid-property-typeahead-values="getDataNamesWithoutActualVariable()"
                                uid-property-typeahead-model="newData.advancedOptions.headers">
                            </uid-property-typeahead>
                            <span class="input-group-btn"
                                  title="{{ 'Variable in read-write binding with the property value' | translate }}">
                            <button class="btn btn-bonita-property" type="button" disabled="true"><i class="fa fa-link"></i></button>
                        </span>
                        </div>
                        <label class="control-label" for="statusCode" translate>Response status code</label>
                        <span><i class="fa fa-question-circle" title="{{ 'Store as Number value' | translate}}"></i></span>
                        <div class="input-group input-group-sm">
                            <uid-property-typeahead
                                id="statusCode"
                                autocomplete="off"
                                uid-property-typeahead-values="getDataNamesWithoutActualVariable()"
                                uid-property-typeahead-model="newData.advancedOptions.statusCode">
                            </uid-property-typeahead>
                            <span class="input-group-btn"
                                  title="{{ 'Variable in read-write binding with the property value' | translate }}">
                            <button class="btn btn-bonita-property" type="button" disabled="true"><i class="fa fa-link"></i></button>
                        </span>
                        </div>
                        <label class="control-label" for="statusCode" translate>Failed response value</label>
                        <span><i class="fa fa-question-circle" title="{{ 'Holds the response when the request has failed' | translate}}"></i></span>
                        <div class="input-group input-group-sm">
                            <uid-property-typeahead
                                id="failedResponseValue"
                                autocomplete="off"
                                uid-property-typeahead-values="getDataNamesWithoutActualVariable()"
                                uid-property-typeahead-model="newData.advancedOptions.failedResponseValue">
                            </uid-property-typeahead>
                            <span class="input-group-btn"
                                  title="{{ 'Variable in read-write binding with the property value' | translate }}">
                            <button class="btn btn-bonita-property" type="button" disabled="true"><i class="fa fa-link"></i></button>
                        </span>
                        </div>
                    </div>
                </div>

                <!-- Business Data -->
                <div ng-hide="offlineMode || businessDataRepoIsEmpty" ng-switch-when="businessdata"
                     class="form-group form-group--data">
                    <label class="control-label control-label--required" for="businessData" translate>Choose a business
                        object</label>
                    <select id="businessData"
                            class="form-control"
                            ng-model="newData.businessObject"
                            ng-change="updateBusinessObjectValue(newData.businessObject)"
                            ng-options="obj.name for obj in businessObjects"
                            ng-disabled="businessDataDisplayWarningError()"
                            required></select>
                </div>
                <div ng-switch-when="businessdata" ng-show="businessDataDisplayWarningError()"
                     class="alert alert-warning warning-business-data" role="alert">
                    <i class="fa fa-exclamation-triangle text-warning "></i>
                    <div ng-if="!offlineMode && businessDataRepoIsEmpty">
                        <translate>No Business Data Model currently deployed.</translate>
                        <br/>
                        <span ng-if=" newData.businessObject.name"><strong>{{newData.businessObject.name}}</strong> doesn't exist.</span>
                        <br/>
                        <translate>Import, define or deploy a Business Data Model in Bonita Studio.</translate>
                    </div>
                    <div ng-if="!offlineMode && !businessDataRepoIsEmpty">
                        <translate><strong>{{newData.businessObject.name}}</strong> doesn't exist in the Business Data
                            Model currently deployed.
                        </translate>
                        <br/>
                        <translate>You can only edit the query filters and pagination.</translate>
                    </div>
                    <div ng-if="offlineMode">
                        <translate>Unable to access Business Data Model. Restart Bonita Studio and try again.
                        </translate>
                        <br/>
                        <span ng-if="newData.businessObject" translate>
                            You can only edit the query filters and pagination.
                         </span>
                    </div>
                </div>
                <div ng-switch-when="businessdata" ng-if="newData.businessObject">
                    <div ng-include="'js/editor/bottom-panel/data-panel/query-selector-edition.html'"></div>
                </div>

                <div class="help-block" ng-switch-when="url" translate>
                    <p><span class="tip">Tips:</span></p>
                    <ul>
                        <li translate>To get data from the <i>Business Data Model</i>, please use the Business data
                            variable type.
                        </li>
                        <li translate>You can use data in the URL with the <i><em
                            ng-non-bindable>{{dataName}}</em></i> syntax.
                        </li>
                        <li translate>You can extend our REST API capabilities by creating REST API extensions in the
                            Studio and use them here.
                        </li>
                        <li translate>You can retrieve the Status Code or Response Headers with a usual variable binding
                            and use it in the artifact.
                        </li>
                    </ul>
                </div>

                <section ng-switch-when="url">
                    <button ng-click="examplesCollapsed = !examplesCollapsed" type="button" class="btn btn-link"
                            translate>See examples
                    </button>
                    <div class="well" uib-collapse="examplesCollapsed">
                        <div class="form-group">
                            <select class="form-control"
                                    ng-options="example as example.description group by example.category for example in apiExamples"
                                    ng-model="example"></select>
                        </div>
                        <div>
                            <p>{{ example.before }}</p>
                            <p ng-bind-html="example.url"></p>
                            <p>{{ example.more }}</p>
                        </div>
                        <div ng-if="example.alternative">
                            <p>{{ example.alternative.before }}</p>
                            <p ng-bind-html="example.alternative.url"></p>
                            <p>{{ example.alternative.more }}</p>
                        </div>
                    </div>
                </section>

                <!-- json -->
                <div ng-switch-when="json" class="row">
                    <div class="col-xs-12 DataPanel-expandableValue">
                        <label class="control-label DataPanel-valueLabel" for="value" translate>Value</label>
                        <expand-modal></expand-modal>
                    </div>
                    <div class="col-xs-12">
                        <ace-editor class="ace-editor--data" autofocus mode="json" ng-model="newData.displayValue"
                                    ng-model-options="{debounce: 300}" name="object" class="form-control" required
                                    valid-json
                                    id="value"></ace-editor>
                        <p class="help-block DataPanel--hideOnFullScreen" translate>
                            <span class="tip">Tip:</span> Array syntax: ["val1", "val2"], Object syntax: {"key":
                            "value"}
                        </p>
                    </div>

                    <section ng-switch-when="json" class="DataPanel--hideOnFullScreen">
                        <button ng-click="examplesCollapsed = !examplesCollapsed" type="button" class="btn btn-link"
                                translate>See examples
                        </button>
                        <div uib-collapse="examplesCollapsed">
                            <p translate>
                                supportTicket is an object composed of a <em>subject</em>, <em>severity</em> level,
                                user <em>environment</em>, reporter’s <em>contact</em> (<em>name</em> and <em>job
                                title</em>),
                                and an <em>URL</em> providing more details on the contact.
                            </p>
                            <pre>{
      "subject": "I have an issue",
      "severity": 2,
      "environment": ["Linux","PostgreSQL 9.3","Java 1.8","AngularJS 1.3"],
      "contact":{
          "name":"John Doe",
          "jobTitle":"FrontEnd developer",
           "contactDetailsURL":"http://jsonplaceholder.typicode.com/users/1"
      }
  }</pre>
                            <p class="alert alert-info">
                                <span class="glyphicon glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                                <span translate>JSON specifications can be found on the </span>
                                <a href="http://www.w3.org/TR/json-ld/"
                                   title="{{'view W3C\'s Json specification'|translate}}" translate>W3C website</a>
                            </p>
                        </div>
                    </section>
                </div>
                <!-- expression -->
                <section ng-switch-when="expression" class="row">
                    <div class="col-xs-12 DataPanel-expandableValue">
                        <label class="control-label DataPanel-valueLabel" for="value" translate>Value</label>
                        <expand-modal></expand-modal>
                    </div>
                    <div class="col-xs-12">
                        <ace-editor class="ace-editor--data" autofocus mode="javascript"
                                    auto-completion="{{ pageData | json}}"
                                    ng-model="newData.displayValue" ng-model-options="{debounce: 300}"
                                    name="expression"
                                    class="form-control" id="value"></ace-editor>
                        <p class="help-block DataPanel--hideOnFullScreen " translate>
                            <span class="tip">Tip:</span> Hit <span class="key">$</span> key to access data, use
                            ctrl-space to trigger autocomplete.
                        </p>
                    </div>
                    <section ng-switch-when="expression" class="DataPanel--hideOnFullScreen">
                        <button ng-click="examplesCollapsed = !examplesCollapsed" type="button" class="btn btn-link"
                                translate>See example 'functional programming'
                        </button>
                        <div uib-collapse="examplesCollapsed">
                            <p class="alert alert-default">
                                <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                                <span translate>This example uses the JSON example provided if you select the type JSON.<br> It looks for the string ‘Linux’ in the array <code>environment</code> of JSON object <code>supportTicket</code></span>
                            </p>
                            <pre>return $data.supportTicket.environment.some(function(env){
   return env.indexOf("Linux") != -1;
});</pre>
                        </div>
                        <br>
                        <button ng-click="advancedExamplesCollapsed = !advancedExamplesCollapsed" type="button"
                                class="btn btn-link" translate>See example 'date object initialization'
                        </button>
                        <div uib-collapse="advancedExamplesCollapsed">
                            <pre>return new Date();</pre>
                        </div>
                    </section>
                </section>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-bonita-default" ng-if="isNewData"
                    ng-disabled="!canBeSaved() || !isDataNameUnique(newData.$$name)" translate>Save
            </button>
            <button class="btn btn-bonita-default" ng-if="!isNewData" ng-disabled="!canBeSaved()" translate>Save
            </button>
            <button class="btn btn-link" type="button" ng-click="cancel()" translate>Cancel</button>
        </div>
</form>
