<form name="declareNewResource" role="form" novalidate ng-submit="ctrl.save(ctrl.newResource)">
    <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="!ctrl.resourceIdToEdit" translate><span>Declare Bonita resource</span></h3>
        <h3 class="modal-title" ng-if="ctrl.resourceIdToEdit"><span translate>Edit Bonita resource</span></h3>
    </div>
    <div class="modal-body">
        <div>
            <div class="form-group DataPanel--hideOnFullScreen"
                 ng-class="{'has-error': !ctrl.isWebResourceUnique(ctrl.newResource)}">
                <label class="control-label control-label--required" for="method" translate>HTTP method</label>
                <select id="method"
                        class="form-control"
                        ng-model="ctrl.newResource.method"
                        ng-options="method.type as ctrl.getMethodLabel(method.type) for method in ctrl.httpVerbs"
                        required></select>
            </div>
            <div class="form-group form-group--data"
                 ng-class="{'has-error': !ctrl.isWebResourceUnique(ctrl.newResource)}">
                <label class="control-label control-label--required" for="newWebResourceValue">
                    <span> {{ 'Value' | translate }}
                        <i class="fa fa-question-circle fa-lg"
                           title="{{'The resources on completion are not exhaustive. You can set any other value.' | translate}}">
                        </i>
                    </span>
                </label>
                <input type="text" class="form-control"
                       placeholder="{{'Value' | translate }}"
                       id="newWebResourceValue"
                       name="value" type="text"
                       ng-model="ctrl.newResource.value"
                       uib-typeahead="resources for resources in ctrl.resources[ctrl.newResource.method] | filter:$viewValue | limitTo:8"
                       class="form-control"
                       autofocus
                       required
                       autocomplete="off">
                <span class="has-error control-label " ng-show="!ctrl.isWebResourceUnique(ctrl.newResource)">
                        <b>{{ctrl.newResource.method.toUpperCase()}}|{{ctrl.newResource.value}}
                        <translate> already exists</translate></b></span>
            </div>
            <div class="alert alert-info" role="alert">
                <i class="fa fa-book fa-lg"></i>
                <translate>You can check the list of all Bonita REST API resources on this dedicated <a
                    href="https://api-documentation.bonitasoft.com/latest/">documentation</a>
                </translate>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-bonita-default"
                    ng-disabled="!ctrl.canBeSaved() || !ctrl.isWebResourceUnique(ctrl.newResource)" translate>Save
            </button>
            <button class="btn btn-link" type="button" ng-click="ctrl.cancel()" translate>Cancel</button>
        </div>
</form>
