{% extends "base.html" %}

{% block subtitle %}
  Exploration Editor
{% endblock subtitle %}

{% block header_js %}
  {{ super() }}
  <script type="text/javascript">
    GLOBALS.can_edit = JSON.parse('{{can_edit|js_string}}');
    GLOBALS.NEW_STATE_TEMPLATE = JSON.parse(
      '{{NEW_STATE_TEMPLATE|js_string}}');
  </script>

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    if (window.google && window.google.load) {
      google.load('visualization', '1', {packages: ['corechart']});
    } else {
      throw 'error: Could not load google visualization library. Are you offline?';
    }
  </script>

  {{dependencies_html}}
{% endblock header_js %}

{% block navbar_additions %}
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Help
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li class="dropdown">
        <a href="#" ng-click="openEditorTutorial()">How to Use the Editor</a>
      </li>
      <li class="dropdown">
        <a href="https://code.google.com/p/oppia/wiki/PlanningYourExploration" target="_blank">
          Planning Your Exploration
        </a>
      </li>
      <li class="dropdown">
        <a href="https://code.google.com/p/oppia/wiki/DesignTips" target="_blank">
          Exploration Design Tips
        </a>
      </li>
    </ul>
  </li>
{% endblock %}

{% block content %}
  {% if announcement %}
    <div class="oppia-align-center oppia-warning">
      {{ announcement }}
    </div>
  {% endif %}

  <div ng-controller="ExplorationEditor" ng-cloak>
    <script type="text/ng-template" id="modals/publishExploration">
      <div class="modal-header">
        <h3>Publish Exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          Congratulations, you are about to publish an exploration!
        </p>
        <p>
          <strong>Important:</strong> Site moderators are likely to remove published explorations that do not meet the following basic criteria (<a href="/site_guidelines#/publish-and-release-criteria" target="_blank">why?</a>):
          <ul>
            <li>It should help its intended audience learn something new.</li>
            <li>It should convey more than a single isolated factoid.</li>
            <li>It should provide useful feedback and guidance to help the learner.</li>
            <li>It should not substantially duplicate existing explorations.</li>
          </ul>
        </p>
        <p>
          You can read more about these criteria on the <a href="/site_guidelines#/publish-and-release-criteria" target="_blank">exploration publishing criteria</a> page.
        </p>

        <p>
          If your exploration meets all these criteria, please feel free to publish
          it so that others can playtest and improve it! Good explorations can subsequently be
          moved to the gallery. (You can find more information
          <a href="/site_guidelines#/how-to-use" target="_blank">here</a>
          about how this works.)
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button class="btn btn-success protractor-test-confirm-publish" ng-click="publish()">Publish Exploration</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/nominateExploration">
      <div class="modal-header">
        <h3>Nominate exploration for release</h3>
      </div>

      <div class="modal-body">
        <p>
          Congratulations, you are about to submit your exploration to be reviewed for release! Once released, the exploration will appear in the gallery for everyone to learn from.
        </p>

        <p>
          Currently, the review process is a manual, moderator-driven process.
          When you submit an exploration for review, a moderator will play through
          it, look at its structure, and decide whether it fits the
          <a href="/site_guidelines#publish-and-release-criteria">release criteria</a>.
          If not, the moderator will make a series of specific suggestions on how
          to make the exploration satisfy the criteria, and work with the editor(s)
          to get it ready for release.
        </p>

        <p>
          <strong>To kick off the review process</strong>, please make a post to the
          <a href="{{moderator_request_forum_url}}" target="_blank">request forum</a>, and
          include a link to your exploration.
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="close()">Close</button>
        <a class="btn btn-success" href="{{moderator_request_forum_url}}" target="_blank">Post in the request forum</a>
      </div>
    </script>

    <script type="text/ng-template" id="modals/embedExploration">
      <div class="modal-header">
        <h3>Embed exploration in another web page</h3>
      </div>

      <div class="modal-body">
        <p>
          To embed this exploration, copy the following HTML into the source code of your webpage:
        </p>

        <pre>
&lt;oppia oppia-id="<[explorationId]>" src="<[serverName]>"
       exploration-version="<[explorationVersion]>"&gt;
&lt;/oppia&gt;

&lt;script src="https://cdn.jsdelivr.net/oppia/0.0.1/oppia-player.min.js"&gt;
&lt;/script&gt;</pre>

        <p>
          Note that the last two lines only need to be included once in the embedding webpage, even if you are embedding multiple explorations. For more information, please have a look at our <a href="https://code.google.com/p/oppia/wiki/EmbeddingYourExploration">documentation</a>.
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="close()">Close</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/deleteExploration">
      <div class="modal-header">
        <h3>Delete Exploration</h3>
      </div>

      <div class="modal-body">
        <p>
          Really delete this exploration? <strong>This action cannot be reversed.</strong>
        </p>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button class="btn btn-danger" ng-click="reallyDelete()">Delete Exploration</button>
      </div>
    </script>

    <script type="text/ng-template" id="modals/saveExploration">
      <div class="modal-header">
        <h3>Save Exploration</h3>
      </div>
      <div class="modal-body">
        <p>
          You are about to save changes to this exploration. These changes will immediately be visible to other viewers.
        </p>
        <p>
          <span ng-if="commitMessageIsOptional">(Optional)</span>
          Please enter a brief description of what you have changed:
          <textarea rows="3" cols="50" ng-model="commitMessage" autofocus></textarea>
        </p>

        <div ng-if="explorationChangesExist">
          <em>
            You changed the following properties of the exploration:
          </em>
          <ul>
            <li ng-repeat="(propertyName, changeInfo) in explorationPropertyChanges">
              <[formatExplorationPropertyChange(propertyName, changeInfo)]>
            </li>
          </ul>
        </div>

        <p ng-if="addedStates.length > 0">
          <em>You added the following states</em>: <strong><[formatStateList(addedStates)]></strong>
        </p>

        <div ng-if="stateChangesExist">
          <em>
            You made the following changes to states:
          </em>
          <div ng-repeat="(stateName, stateChanges) in statePropertyChanges">
            <h5><[stateName]></h5>
            <ul>
              <li ng-repeat="(propertyName, changeInfo) in stateChanges">
                <[formatStatePropertyChange(propertyName, changeInfo)]>
              </li>
            </ul>
          </div>
        </div>

        <p ng-if="deletedStates.length > 0">
          <em>You deleted the following states:</em> <strong><[formatStateList(deletedStates)]></strong>
        </p>

        <p ng-if="changedStates.length > 0">
          <em>You changed the following states:</em> <strong><[formatStateList(changedStates)]></strong>
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button class="btn btn-success protractor-test-close-save-modal" ng-disabled = "!commitMessageIsOptional && !commitMessage" ng-click="save(commitMessage)">Save Exploration</button>
      </div>
    </script>

    <div class="container">
      <div class="row" ng-if="explorationRightsService.isCloned()">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <div class="oppia-align-center alert alert-warning" style="padding: 2px; width: 90%;">
            <strong>Note:</strong> This is a private, unpublishable copy of a
            <a ng-href="<[getExplorationUrl(explorationRightsService.clonedFrom())]>" target="_blank">public exploration</a>.
            You are very welcome to submit feedback to improve the original exploration: to do this,
            click the previous link, then click the Feedback button on the top-right.
            Thank you!
          </div>
        </div>
      </div>

      <div class="row oppia-exploration-editor-top-row">
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div ng-if="!isInPreviewMode">
            <div>
              <span class="oppia-page-title">
                <[explorationTitleService.displayed]>
              </span>
            </div>
            <div>
              <span class="label label-info">
                <[explorationCategoryService.displayed]>
              </span>
              <span ng-if="explorationRightsService.isPrivate()" class="label label-primary">
                Private
              </span>
              <span ng-if="explorationRightsService.isPublic()" class="label label-primary">
                Beta
              </span>
              <span ng-if="explorationRightsService.isPublicized()" class="label label-primary">
                Released
              </span>
              <span ng-if="explorationRightsService.isCloned()" class="label label-primary">
                Cloned
              </span>
              <span ng-if="explorationRightsService.isCommunityOwned()" class="label label-primary">
                Community-owned
              </span>
            </div>
          </div>
        </div>

        <div class="col-lg-8 col-md-8 col-sm-8">
          <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
              <span class="pull-right" style="margin-top: 10px;">
                <span ng-show="!isInPreviewMode">
                  {% if can_publish %}
                    <span ng-if="explorationRightsService.isPrivate()">
                      <button type="button" class="btn btn-default oppia-main-control-button protractor-test-publish-exploration" ng-class="{'btn-success': !isExplorationLockedForEditing() && !warningsList.length}" ng-click="showPublishExplorationModal()" ng-disabled="isExplorationLockedForEditing() || warningsList.length" tooltip="Click this button to publish your exploration to the gallery." tooltip-placement="bottom">
                        publish
                      </button>
                    </span>
                  {% endif %}

                  <span class="oppia-exploration-ctrl" ng-if="editabilityService.isEditable() && explorationRightsService.isPublic()">
                    <button type="button" class="btn btn-default oppia-main-control-button" ng-click="showNominateExplorationModal()" ng-disabled="isExplorationSaveable()" ng-class="{'btn-success': !isExplorationSaveable()}" tooltip="Click this button to nominate this exploration for release from beta status, so that it appears in the gallery by default." tooltip-placement="bottom">
                      nominate for release
                    </button>
                  </span>

                  <span class="oppia-exploration-ctrl" ng-if="!explorationRightsService.isPrivate()">
                    <button class="btn btn-default" title="Embed this exploration in another webpage." ng-click="showEmbedExplorationModal()" ng-disabled="isExplorationSaveable()">
                      <span class="glyphicon glyphicon-share"></span>
                    </button>
                  </span>

                  <span ng-if="editabilityService.isEditable()">
                    <button class="btn oppia-main-control-button protractor-test-save-changes" ng-class="{'btn-success': isExplorationSaveable()}" ng-click="saveChanges()" ng-disabled="!isExplorationSaveable()">
                      <span ng-if="!isSaveInProgress">
                        <span ng-if="!getChangeListLength() && lastSaveOrDiscardAction == 'save'">saved</span>
                        <span ng-if="getChangeListLength() || lastSaveOrDiscardAction !== 'save'">
                          save
                          <span ng-if="getChangeListLength()">(<[getChangeListLength()]>)</span>
                        </span>
                      </span>
                      <span ng-if="isSaveInProgress">
                        saving...
                      </span>
                    </button>

                    <button class="btn btn-default oppia-main-control-button" ng-click="discardChanges()" ng-disabled="!isExplorationSaveable()" title="Discard all pending changes.">discard changes</button>
                  </span>
                </span>

                <div class="btn-group">
                  <label class="btn btn-default" ng-model="isInPreviewMode" btn-radio="false" ng-click="exitPreviewMode()"><span class="glyphicon glyphicon-pencil"></span> Edit</label>
                  <label class="btn btn-default" ng-model="isInPreviewMode" btn-radio="true" ng-click="enterPreviewMode()"><span class="glyphicon glyphicon-play"></span> Preview</label>
                </div>
              </span>
            </div>
          </div>

          <div class="row" ng-if="!isInPreviewMode">
            <div class="col-lg-6 col-md-6 col-sm-6">
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
              <div ng-show="warningsList.length" ng-click="toggleExplorationWarningVisibility()">
                <div class="alert alert-warning oppia-exploration-warnings-box pull-right">
                  <div>
                    <span ng-if="!areExplorationWarningsVisible" style="color: black;">
                      <span class="glyphicon glyphicon-plus-sign"></span>
                    </span>
                    <span ng-if="areExplorationWarningsVisible" style="color: black;">
                      <span class="glyphicon glyphicon-minus-sign"></span>
                    </span>
                    <span class="glyphicon glyphicon-warning-sign"></span>
                    This exploration has <strong><[warningsList.length]></strong> warning(s).
                  </div>
                  <div collapse="!areExplorationWarningsVisible">
                    <ul>
                      <li ng-repeat="warningText in warningsList track by $index">
                        <[warningText]>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div ng-if="!isInPreviewMode">
        <tabset>
          <tab heading="Main" active="getTabStatuses().main.active" select="selectMainTab()">
            <div class="row">
              <div class="col-lg-9 col-md-9 col-sm-9">
                {% include 'editor/state_editor.html' %}
              </div>
              <div class="col-lg-3 col-md-3 col-sm-3">
                {% include 'editor/exploration_graph.html' %}
                {% include 'editor/state_statistics.html' %}
              </div>
            </div>
          </tab>

          <tab heading="Statistics" active="getTabStatuses().stats.active" select="selectStatsTab()">
            {% include 'editor/exploration_statistics.html' %}
          </tab>

          <tab heading="Settings" active="getTabStatuses().settings.active" select="selectSettingsTab()">
            {% include 'editor/exploration_settings.html' %}
          </tab>

          <tab heading="History" active="getTabStatuses().history.active" select="selectHistoryTab()" disabled="explorationRightsService.isCloned()">
            {% include 'editor/exploration_history.html' %}
          </tab>

          <tab heading="<[feedbackTabHeader]>" active="getTabStatuses().feedback.active" select="selectFeedbackTab()">
            {% include 'editor/exploration_feedback.html' %}
          </tab>
        </tabset>
      </div>

      <div class="row" ng-if="!!isInPreviewMode" ng-controller="ExplorationPreview">
        <hr>
        {% include 'editor/exploration_preview.html' %}
      </div>
    </div>
  </div>

  <!-- These definitions must be included exactly once on the page for the graph SVGs to work in Firefox. -->
  <svg width="0" height="0">
    <defs>
      <marker id="arrowhead" viewBox="-5 -5 18 18" refX="10" refY="6"
              markerWidth="6" markerHeight="9" orient="auto">
        <path d="M -5 0 L 12 6 L -5 12 z" fill="grey"></path>
      </marker>
      <linearGradient id="nodegradient" x1="0%" x2="100%" y1="0%" y2="0%">
        <stop offset="0%" style="stop-opacity: 1; stop-color: darkseagreen;"></stop>
        <stop offset="100%" style="stop-opacity: 0.1; stop-color: darkseagreen;"></stop>
      </linearGradient>
    </defs>
  </svg>

  <script type="text/ng-template" id="inline/param_change_editor">
    {% include 'components/param_change_editor.html' %}
  </script>

  <script type="text/ng-template" id="inline/rule_editor">
    {% include 'components/rule_editor.html' %}
  </script>

  {% include 'components/visualizations.html' %}

{% endblock content %}

{% block footer_js %}
  {{ super() }}
  <script src="/third_party/static/d3js-3.4.11/d3.min.js"></script>
  <script>
    {{ include_js_file('editor/EditorServices.js') }}
    {{ include_js_file('editor/ExplorationEditor.js') }}
    {{ include_js_file('editor/ExplorationGraph.js') }}
    {{ include_js_file('editor/ExplorationPreview.js') }}
    {{ include_js_file('components/valueGeneratorEditor.js') }}
    {{ value_generators_js }}
    {{ include_js_file('components/objectEditor.js') }}
    {{ object_editors_js }}
    {{ include_js_file('editor/RouterServices.js') }}
    {{ include_js_file('editor/ExplorationStatistics.js') }}
    {{ include_js_file('editor/ExplorationSettings.js') }}
    {{ include_js_file('editor/ExplorationHistory.js') }}
    {{ include_js_file('editor/HistoryServices.js') }}
    {{ include_js_file('editor/ExplorationFeedback.js') }}
    {{ include_js_file('editor/StateEditor.js') }}
    {{ include_js_file('editor/StateStatistics.js') }}
    /* These should come after the valueGeneratorEditor scripts. */
    {{ include_js_file('editor/StateInteraction.js') }}
    {{ include_js_file('player/PlayerServices.js') }}
    {{ include_js_file('components/paramChangeEditor.js') }}
    {{ include_js_file('components/ruleEditor.js') }}
    {% for skin_js_url in skin_js_urls %}
      {{ include_skins_js_file(skin_js_url) }}
    {% endfor %}
  </script>

  {{ skin_templates }}
  {{ widget_templates }}
{% endblock footer_js %}