<div class="modal" ng-controller="DecisionTableConclusionEditorCtrl">
    <div class="modal-dialog">
        <div class="modal-content">
            <form name="outputExpressionForm">
                <div class="modal-header"><h2>{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-TITLE' |
                    translate}}</h2>
                    <p>{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-DESCRIPTION' | translate}}</p>
                </div>
                <div class="modal-body">
                    <div class="clearfix form-group"
                         ng-class="{'has-error': outputExpressionForm.expressionLabel.$invalid}">
                        <div class="col-xs-4">
                            <label>{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.EXPRESSION-LABEL' |
                                translate}}</label>
                        </div>
                        <div class="col-xs-8">
                            <input class="form-control" name="expressionLabel"
                                   placeholder="{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.EXPRESSION-PLACEHOLDER' | translate}}"
                                   type="text" ng-model="popup.selectedExpressionLabel" ng-disabled="model.readOnly"/>
                        </div>
                    </div>

                    <div class="clearfix form-group"
                         ng-class="{'has-error': outputExpressionForm.variableId.$invalid}">
                        <div class="col-xs-4">
                            <label>{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-NEW-VARIABLE-ID' |
                                translate}}</label><span class="marker">*</span>
                        </div>
                        <div class="col-xs-8">
                            <input class="form-control" name="variableId" placeholder="Enter variable id" type="text"
                                   ng-model="popup.selectedExpressionNewVariableId" ng-required="true" variable-identifier ng-disabled="model.readOnly"/>
                        </div>
                    </div>

                    <div class="clearfix form-group"
                         ng-class="{'has-error': outputExpressionForm.newVariable.$invalid}">
                        <div class="col-xs-4">
                            <label>{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-NEW-VARIABLE-TYPE' |
                                translate}}</label>
                        </div>
                        <div class="col-xs-8">
                            <select class="form-control" ng-options="type for type in model.availableOutputVariableTypes"
                                    ng-model="popup.selectedExpressionNewVariableType" name="newVariable"
                                    ng-required="true" ng-disabled="model.readOnly"/>
                        </div>
                    </div>

                    <div>
                        <div class="clearfix form-group">
                            <div class="col-xs-4">
                                <label>{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-VALUES' |
                                    translate}}
                                    <span ng-if="popup.currentHitPolicy === 'PRIORITY' || popup.currentHitPolicy === 'OUTPUT ORDER'">{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-VALUES-NOT-OPTIONAL' |
                                    translate}}</span>
                                    <span ng-if="popup.currentHitPolicy !== 'PRIORITY' && popup.currentHitPolicy !== 'OUTPUT ORDER'">{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-VALUES-OPTIONAL' |
                                    translate}}</span>
                                </label>
                            </div>
                            <div ng-if="!model.readOnly" class="col-xs-8">
                                <hot-table hot-auto-destroy
                                        hot-id="decision-table-allowed-values"
                                        settings="popup.hotSettings"
                                        datarows="popup.selectedExpressionOutputValues"
                                        columns="popup.columnDefs"
                                        row-headers="true"
                                        manual-row-move="true"
                                        row-heights="30"
                                        class-name="'htMiddle'"
                                        on-after-render=doAfterRender
                                        min-spare-rows="1"
                                        read-only="model.readOnly">
                                </hot-table>
                            </div>
                            <div ng-if="model.readOnly" class="col-xs-8">
                                <div ng-repeat="allowedValue in popup.selectedExpressionOutputValues"><span style="font-size: 14px">{{allowedValue[0]}}</span><br></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <div class="pull-right">
                        <button type="button" class="btn btn-sm btn-default" ng-click="cancel()">
                            {{'GENERAL.ACTION.CANCEL' | translate}}
                        </button>
                        <button ng-if="!model.readOnly" type="button" class="btn btn-sm btn-default" ng-click="save()"
                                ng-disabled="!outputExpressionForm.$valid">
                            {{'GENERAL.ACTION.SAVE' | translate}}
                        </button>
                    </div>
                    <div class="loading pull-right" ng-show="model.loading">
                        <div class="l1"></div>
                        <div class="l2"></div>
                        <div class="l2"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>