{{ header }}
<section class="container-fluid" id="account-message-info" data-info="{{ success }}">
  {% if error_warning %}
    <div class="border-warning background-warning text-warning padding-large top-margin-medium">{{ error_warning }}</div>
  {% endif %}
  {% if content_top %}
    {{ content_top }}
  {% endif %}
  {{breadcrumbs}}
  <div class="row">
    <div class="col-md-4 hidden-md-down">
      {{ account }}
    </div>
    <div class="col-xs">
      <div class="content-box">
        <div class="flex middle-xs">
          <a href="{{ back }}" class="padding-small text-x-large text-dark hidden-md-up">
            <i class="fas fa-angle-left" aria-hidden="true"></i>
          </a>
          <span class="heading-1">{{ heading_title }}</span>
        </div>
        <form action="{{ action }}" method="post" enctype="multipart/form-data" class="text-left">
          <div style="max-width:480px;">

            <div class="top-margin-medium">
              <label class="far fa-star text-x-large horizontal-padding-x-small active_star{{ rating }}">
                <input class="star-new-rating" type="radio" name="rating" value="1" {{ (rating == 1) ? 'checked' : '' }}>
              </label>
              <label class="far fa-star text-x-large horizontal-padding-x-small active_star{{ rating }}">
                <input class="star-new-rating" type="radio" name="rating" value="2" {{ (rating == 2) ? 'checked' : '' }}>
              </label>
              <label class="far fa-star text-x-large horizontal-padding-x-small active_star{{ rating }}">
                <input class="star-new-rating" type="radio" name="rating" value="3" {{ (rating == 3) ? 'checked' : '' }}>
              </label>
              <label class="far fa-star text-x-large horizontal-padding-x-small active_star{{ rating }}">
                <input class="star-new-rating" type="radio" name="rating" value="4" {{ (rating == 4) ? 'checked' : '' }}>
              </label>
              <label class="far fa-star text-x-large horizontal-padding-x-small active_star{{ rating }}">
                <input class="star-new-rating" type="radio" name="rating" value="5" {{ (rating == 5) ? 'checked' : '' }}>
              </label>
            </div>

            <label class="field field-medium top-margin-medium">
              <span class="field-label">{{ text_your_experience }}</span>
              <textarea name="text" placeholder="{{ text_what_do_you_think }}" maxlength="250"
                class="field-entry {{ (error_text) ? 'border-error' : '' }}" rows="6" required>{{ text }}</textarea>
              {% if error_text %}
              <span class="text-error text-small text-left top-margin-x-small visible-block">{{ error_text }}</span>
              {% endif %}
            </label>

            <label class="radio radio-small top-margin-medium">
              <input class="radio-entry" type="radio" name="allow" value="1" {{ (allow == '1') ? 'checked' : '' }}>
              <span class="radio-text">{{ text_allow }}</span>
            </label>
            <label class="radio radio-small top-margin-small">
              <input class="radio-entry" type="radio" name="allow" value="0" {{ (allow == '0') ? 'checked' : '' }}>
              <span class="radio-text">{{ text_deny }}</span>
            </label>

            <div class="top-margin-x-large">
              <button type="submit" class="btn-default btn-large">
                <span>{{ text_send }} avaliação</span>
              </button>
            </div>

          </div>
        </form>

      </div>
    </div>
    {% if column_right %}
      <div class="col-md-3 hidden-md-down">
        {{ column_right }}
      </div>
    {% endif %}
  </div>
  {% if content_bottom %}
    {{ content_bottom }}
  {% endif %}
</section>

<script>
  window.waitEvent('scripts_document', function () {
    $('.star-new-rating').on('change', function () {
      $('label.fa-star')
        .removeClass()
        .addClass('far fa-star text-x-large horizontal-padding-x-small active_star' + $(this).val());
    });

    $('form').validate({
      onfocusout: function (element) {
        $(element).valid();
      },
      onkeyup: function (element) {
        if ($(element).valid()) {
          $(element).removeClass('form-error');
          $(element).siblings('span.form-error').remove();
        }
      },
      onsubmit: true,
      errorElement: 'span',
      errorClass: 'form-error',
      validClass: 'form-success'
    });
  });
</script>
{{ footer }}
