{% extends "editor/state_editor_row.html" %}

{% block id %}rules{% endblock %}

{% block row %}
  <div ng-repeat="(handlerName, handler) in widgetHandlers">
    <div class="col-lg-2 col-md-2 col-sm-2">
    </div>

    <div class="col-lg-10 col-md-10 col-sm-10 oppia-rules" id="tutorialStateRules">
      <div class="row" ui-sortable="RULE_LIST_SORTABLE_OPTIONS" ng-model="handler">
        <!-- An HTML element marked ui-sortable should contain only one element,
        and this element should have an ng-repeat defined on it. See the
        ui-sortable documentation for more details. -->
        <div ng-repeat="rule in handler track by $index" ng-hide="$last" class="col-lg-12 col-md-12 col-sm-12 oppia-sortable-rule-block">
          <rule-editor rule="rule" heading="Rule #<[$index + 1]>" num-rules="handler.length" answer-choices="answerChoices" widget-handler-specs="widgetHandlerSpecs" is-tmp-rule="false" save-rule="saveRule" delete-rule="deleteRule(handlerName, $index)" is-editable="editabilityService.isEditable()">
          </rule-editor>
        </div>
      </div>

      <div class="row" ng-if="getCurrentWidgetId() != 'Continue' && editabilityService.isEditable()">
        <div ng-if="!tmpRule">
          <div class="col-lg-12 col-md-12 col-sm-12">
            <button type="button" class="btn btn-default btn-lg oppia-add-rule-button" ng-click="createTmpRule()">
              Add new rule
            </button>
          </div>
        </div>
        <div ng-if="tmpRule" class="protractor-test-temporary-rule">
          <div class="col-lg-12 col-md-12 col-sm-12">
            <rule-editor rule="tmpRule" answer-choices="answerChoices" widget-handler-specs="widgetHandlerSpecs" is-tmp-rule="true" save-rule="saveTmpRule" cancel-edit="cancelTmpRule()" is-editable="editabilityService.isEditable()">
            </rule-editor>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 protractor-test-default-rule">
          <rule-editor rule="handler[handler.length - 1]" heading="Default Rule" answer-choices="answerChoices" all-rule-types="allRuleTypes" widget-handler-specs="widgetHandlerSpecs" is-tmp-rule="false" save-rule="saveRule" is-editable="editabilityService.isEditable()">
          </rule-editor>
        </div>
      </div>

    </div>
  </div>
{% endblock %}