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

{% block label %}interaction{% endblock %}

{% block cls %}oppia-interactive-widget-display{% endblock %}

{% block center %}
  <div ng-if="!hasLoaded" class="oppia-align-center">
    Loading
    <span class="oppia-loading-dot-one">.</span>
    <span class="oppia-loading-dot-two">.</span>
    <span class="oppia-loading-dot-three">.</span>
  </div>

  <div id="tutorialStateInteraction">
    <div ng-if="hasLoaded">
      <div ng-if="!interactionCustomizerIsShown"
           class="protractor-test-edit-interaction"
           ng-class="{'oppia-editable-section oppia-interactive-section': editabilityService.isEditable()}"
           ng-disabled="!hasLoaded">

        <!-- We use a transparent div overlay here so that buttons within the widget
        do not receive the click events. -->
        <div class="oppia-interactive-section-click-handler" ng-click="showInteractionCustomizer()">
        </div>

        <div class="row">
          <div class="col-lg-8 col-md-8 col-sm-8">
            <h3>Interaction <span ng-if="editabilityService.isEditable()" class="glyphicon glyphicon-pencil oppia-editor-pencil" title="Edit Interaction"></span></h3>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4">
            <select class="form-control oppia-widget-selector protractor-test-select-interaction-id" ng-model="$parent.$parent.widgetId" ng-options="widget_id as widget.name for (widget_id, widget) in allInteractiveWidgets" ng-change="onChangeInteractionType(widgetId)"></select>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12">
            <div angular-html-bind="widgetPreviewHtml" class="oppia-interaction-preview well"></div>
          </div>
        </div>
      </div>
    </div>

    <div ng-if="interactionCustomizerIsShown" class="oppia-state-item-editor-div">
      <div class="oppia-interactive-widget-editor">
        <h3>Customize Interaction</h3>
        <br>

        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12">
            <form name="form.schemaForm" class="protractor-test-widget-args">
              <div ng-repeat="customizationArg in tmpWidget.customization_args">
                <span><[customizationArg.description]></span>
                <div>
                  <schema-based-editor local-value="customizationArg.value" schema="customizationArg.schema">
                  </schema-based-editor>
                  <div style="margin-bottom: 15px;"></div>
                </div>
              </div>
            </form>

            <div ng-if="!isEmpty(tmpWidget.customization_args)">
              <hr>
            </div>

            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="stateWidgetStickyService.displayed" ng-disabled="!editabilityService.isEditable()">
                Reuse the previous state's interaction, if possible.
                <a href="https://code.google.com/p/oppia/wiki/InteractiveWidgets#Other_options" target="_blank">
                  <span class="glyphicon glyphicon-question-sign"></span>
                </a>
              </label>
            </div>
          </div>
        </div>
      </div>

      <div ng-if="tmpWidget">
        <button type="button" class="btn btn-success oppia-save-state-item-button protractor-test-save-interaction" ng-click="saveInteractionCustomizations(tmpWidget)" ng-disabled="form.schemaForm.$invalid">
          Save Interaction
        </button>
        <button type="button" class="btn btn-default" ng-click="resetInteractionCustomizer()">
          Cancel
        </button>
      </div>
    </div>
  </div>
{% endblock %}