{% extends 'base.html' %}

{% block content %}
  {% block header %}{% endblock %}
  <hr />

  {% for field in form.errors %}
    {% for error in form.errors[field] %}
      <div class="alert alert-danger">{{ error }}</div>
    {% endfor %}
  {% endfor %}

  <div class="row">
    {% include ('review/modify/%s.html' % entity_type) %}
  </div>
  <hr />

  <form id="review-editor" method="POST" class="form-horizontal" role="form">
    {{ form.hidden_tag() }}
    <div class="form-group">
      <label class="col-sm-1" for="rating">{{ _('Rating:') }}</label>
      <div class="col-sm-2">{{ form.rating(class="rating", id="rating") }}</div>
    </div>
    <div class="form-group">
      <small class="text-muted pull-left" style="font-style:italic;">
          {{ _('You can read the <a href="%(style_guide_url)s" target="_blank">style guide</a> for writing good CritiqueBrainz reviews!<br/>
                Furthermore, you can use <a href="%(markdown_url)s" target="_blank">Markdown</a> syntax to apply custom formatting.',
                style_guide_url='https://wiki.musicbrainz.org/How_to_write_Good_Critiquebrainz_Reviews',
                markdown_url='http://daringfireball.net/projects/markdown/syntax') }}
      </small><br/><br/>
      {{ form.text(id="review-content") }}
    </div>
    <div class="form-group">
      <label class="control-label col-sm-4" for="review-language">{{ _('Please, specify language of this review:') }}</label>
      <div class="col-sm-8">{{ form.language(id="review-language", class="form-control") }}</div>
    </div>
    <hr />
    {% if review is not defined or review.is_draft %}
      <div class="form-group">
        <div class="col-sm-12">
          {% for choice in form.license_choice %}
            <div class="radio">
              <label>{{ choice }}{{ choice.label.text | safe }}</label>
            </div>
          {% endfor %}
          <br /><small class="text-warning"><em>{{ _('You cannot change the license after the review is published.') }}</em></small>
          {% if not current_user.license_choice %}
              <br /><br />
              <div class="checkbox">
                <label>{{ form.remember_license }}{{ form.remember_license.label.text }}</label>
              </div>
          {% endif %}
        </div>
      </div>
    {% endif %}
    {% block license_agreement_input %}{% endblock %}
  </form>
  {% block buttons %}{% endblock %}
{% endblock %}

{% block scripts %}
  {{ super() }}
  <link rel="stylesheet" href="{{ get_static_path('wysiwyg-editor.css') }}"/>
  <script src="{{ get_static_path('wysiwyg-editor.js') }}"></script>
  <script>
    $(document).ready(function() {
      reviewContentEditor = new EasyMDE({
        element: $('#review-content')[0],
        spellChecker: false
      });

      // Show warning when leaving review editor without saving changes
      var beingSaved = false;
      var oldData = $('#review-editor').serialize();
      $(window).bind('beforeunload', function(e) {
        if (beingSaved || (oldData == $('#review-editor').serialize())) {
          return undefined;
        }
        var confirmationMessage = "Your review has not been saved.";
        (e || window.event).returnValue = confirmationMessage;     // Gecko and Trident
        return confirmationMessage;                                // Gecko and WebKit
      });

      oldReviewLength = reviewContentEditor.value().length
      languageSelector = $('#review-language')[0]
      // Detect the language of the review on change
      // codemirror is the underlying editor behind EasyMDE.
      reviewContentEditor.codemirror.on("change", function() {
        const MIN_DIFFERENCE = 10

        var currentReviewContent = reviewContentEditor.value()
        var currentReviewLength = currentReviewContent.length
        if(currentReviewLength == 0) { return; }

        // Don't call too often.
        var difference = Math.abs(currentReviewLength - oldReviewLength)
        if(difference < MIN_DIFFERENCE) { return; }
        oldReviewLength = currentReviewLength

        $.ajax({
          type: "POST",
          url: "{{ url_for('review.get_language') }}",
          data: {text: currentReviewContent},
          success: function(data) { $(languageSelector).val(data) },
          error: function() { console.error("Getting language failed"); } // Ignore any failure, won't do any harm
        })
      });

      $("#btn-publish").click(function(){
        beingSaved = true;
        $("#state").attr('value', 'publish');
        $("#review-editor").submit();
      });
      if ('{{review is not defined or review.is_draft}}'){
        $("#btn-draft").click(function(){
          beingSaved = true;
          $("#state").attr('value', 'draft');
          $("#review-editor").submit();
        });
      }
    });
  </script>
  <script src="{{ get_static_path('rating.js') }}"></script>
{% endblock %}