{% extends "base.html" %}

{% block subtitle %}
  Exploration Player View
{% endblock subtitle %}

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

  {{widget_dependencies_html}}
{% endblock header_js %}

{% block content %}
  {{ skin_tag }}
  <br><br><br>

  <script type="text/ng-template" id="modals/playerFeedback">
    <div class="modal-header">
      <h3>Give Feedback to the Exploration Editor</h3>
    </div>

    <div class="modal-body">
      <p>
        <em>
          This form is meant for exploration-specific feedback. To give general feedback about Oppia, please consider using the <a href="https://code.google.com/p/oppia/issues/list"> bug tracker</a> or <a href="https://groups.google.com/forum/?fromgroups#!forum/oppia-dev">Google Group</a>. Thanks in advance!
        </em>
      </p>

      <div role="form">
        <div class="form-group">
          <label for="subject">Subject</label>
          <input type="text" class="form-control" id="subject" ng-model="subject">
        </div>
        <label for="feedback">Feedback</label>
        <textarea id="feedback" class="form-control" ng-model="feedback" rows="6" cols="200" placeholder="Please write your feedback or suggestions for the exploration editors here."></textarea>
        <!-- Note that, for this to use the correct $scope.relatedTo, it must be an ng-show and not an ng-if. -->
        <div ng-show="currentStateName !== 'END'">
          <div class="radio">
            <label>
              <input type="radio" ng-model="relatedTo" name="relatedTo" id="relatedToState" value="state">
              This feedback relates to the current question.
            </label>
          </div>
          <div class="radio">
            <label>
              <input type="radio" ng-model="relatedTo" name="relatedTo" id="relatedToExploration" value="exploration">
              This feedback relates to the exploration as a whole.
            </label>
          </div>
        </div>
        <div ng-show="isLoggedIn">
          <hr>
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-model="isSubmitterAnonymized">
              Give feedback anonymously
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="modal-footer">
      <button class="btn btn-default" ng-click="cancel()">Cancel</button>
      <button class="btn btn-success" ng-click="submit(subject, feedback, relatedTo, isSubmitterAnonymized)" ng-disabled="!feedback">Submit</button>
    </div>
  </script>

  <script type="text/ng-template" id="modals/playerFeedbackConfirmation">
    <div class="modal-header">
      <h3>Thank you for giving feedback</h3>
    </div>

    <div class="modal-body">
      <p>
        Your feedback has been successfully submitted, and the exploration editors will see it when they next visit the exploration editing page.
      </p>
      <p>
        Thank you for helping to improve this exploration!
      </p>
    </div>

    <div class="modal-footer">
      <button class="btn btn-default" ng-click="cancel()">Close</button>
    </div>
  </script>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('player/PlayerServices.js') }}
    {{ include_skins_js_file(skin_js_url) }}
  </script>

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