{% load sekizai_tags feedback_tags i18n %}

{% block "feedback_form" %}
  <form method="post" action="{% url "feedback-form" instance.id %}" id="feedback-form-{{ instance.id }}" class="{{ form_class }}">
    {% for field in form %}
      {% block "feedback_field" %}
        {% if field|is_checkbox %}{{ field }}{% endif %}
        <label for="{{ field.auto_id }}">{{ field.label|safe }}{% if field.field.required %}*{% endif %}</label>
        {% if not field|is_checkbox %}
          <div class="error-message error-{{ field.name }}" style="display: none"></div>
          {{ field }}
        {% endif %}
      {% endblock %}
    {% endfor %}
    {% block "feedback_submit" %}
      <button type="submit">{% trans "Submit" }</button>
    {% endblock %}
    {% csrf_token %}
  </form>
{% endblock %}

{% block "feedback_success" %}
<p id="feedback-form-success-{{ instance.id }}" class="success-message" style="display:none">
  {% trans "Your message was sent. Thank you for feedback!" %}
</p>
{% endblock %}

{% addtoblock "js" %}
<script type="text/javascript">
$(function() {
  var form = $('#feedback-form-{{ instance.id }}');
  var message = $('#feedback-form-success-{{ instance.id }}');
  noErrors = function() {
    form.find('.error-message').hide();
    inputs.removeClass('error');
  }

  var inputs = form.find(':input').not(':submit');
  var captchaHidden = form.find('[name=captcha_0]');
  var captchaInput = form.find('[name=captcha_1]');
  var captchaImage = form.find('img.captcha');

  form.submit(function() {
    $.post(form.attr('action'), form.serialize(), function(data) {
      noErrors();
      {% block feedback_success_animation %}
      form.fadeOut();
      message.fadeIn();
      {% endblock %}
    }, 'json').error(function(xhr) {
      var res = xhr.responseJSON;
      if (res.errors) {
        inputs.each(function(i, el) {
          var input = $(el);
          var key = input.attr('name').replace(/_\d+$/g, '');
          var err = form.find('.error-' + key);
          if (res.errors[key]) {
            input.addClass('error');
            err.show().text(res.errors[key][0]);
          } else {
            input.removeClass('error');
            err.hide()
          }
        });

        captchaInput.val('');
        if (res.captcha) {
          captchaHidden.val(res.captcha.key);
          captchaImage.attr('src', res.captcha.img);
        }
      } else {
        noErrors();
      }
    });
    return false;
  });
});
</script>
{% endaddtoblock %}