{{ header }}
  <script>
    language.pages.return = {{languageApp}};
  </script>

  <form action="{{ action }}"
        method="post"
        enctype="multipart/form-data"
        class="ftr-form js-form-no-submit"
        id="form-return"
        autocomplete="off"
        data-order-id="{{ order_id }}"
        data-product-id="{{ product_id }}"
  >

    <div class="js-container-search">

      <div class="ftr-in-space--xs">
        <span class="ftr-text--s">{{ text_new_devolution }}</span>
      </div>

      <div class="ftr-container ftr-flex ftr-flex--start">
        <label class="ftr-field ftr-field--half js-return-search {{ (error_order_id) ? 'error' : '' }}" data-search="{{ url_search_order }}">
          <input type="text" name="order_id" class="ftr-field__entry ftr-js-field__entry mask-int js-return-search-input" id="order_id" value="{{ order_id }}" required>
          <span class="ftr-field__text">{{ entry_order_id }}</span>
          {% if error_order_id %}
            <span class="ftr-field__error">{{ error_order_id }}</span>
          {% endif %}
          <span class="ftr-field__error ftr-hidden js-order-not-found"> {{ error_order_not_found }} </span>
          <span class="ftr-field__error ftr-hidden js-order-canceled"> {{ error_order_canceled }} </span>
        </label>
        <button type="button" class="ftr-btn ftr-background--primary ftr-js-ripple-effect ftr-out-space--l-l js-return-search-button"><i class="material-icons ftr-text--light">&#xe8b6;</i></button>
      </div>

      {% if last_orders is defined and last_orders %}
        <div class="ftr-grid">
          {% for key,order in last_orders %}
            <div class="ftr-grid__card js-button-return-order" data-return-order-id="{{ order.order_id }}">

              <span class="ftr-text--m ftr-block ftr-text-dark">{{ order.status }}</span>
              <span class="ftr-text--s ftr-block ftr-text--grey">{{ text_order_id }}: {{ order.order_id }}</span>
              <div class="ftr-out-space--t-s">
                {% for image in order.images %}
                  <div class="ftr-text--v-middle ftr-out-space--r-s ftr-order-list__image">
                    <picture>
                      <source srcset="" data-src="{{ image.webp }}">
                      <img width="68" height="68" class="ftr-block" src="" data-src="{{ image.jpg }}" alt="{{ image.name }}">
                    </picture>
                  </div>
                {% endfor %}

                {% if order.products_count > 0 %}
                  <div class="ftr-text--v-middle ftr-order-list__image">
                <span class="ftr-text-dark ftr-text--xs ftr-block ftr-in-space--t-m">
                  +{{order.products_count}} <span class="ftr-block">{{text_products}}{{ (order.products_count > 1) ? 's' : '' }} </span>
                </span>
                  </div>
                {% endif %}
              </div>
            </div>
          {% endfor %}
        </div>
      {% endif %}

    </div>

    <div class="js-container-return ftr-hidden">

      <div class="ftr-in-space--xs">
        <span class="ftr-text--s">{{ text_product }}</span>
      </div>

      <div class="ftr-container ftr-in-space--b-n js-container-products">

      </div>

      <div class="ftr-container">
        <span class="ftr-text--s">{{ entry_opened }}</span>
        <input class="ftr-radio" id="opened-radio-1" type="radio" name="opened" value="1" {{ (opened) ? 'checked' : '' }}>
        <label class="ftr-radio-label" for="opened-radio-1">
          <span class="ftr-radio-label__text">{{ text_yes }}</span>
        </label>
        <input class="ftr-radio" id="opened-radio-2" type="radio" name="opened" value="0" {{ (opened) ? '' : 'checked' }}>
        <label class="ftr-radio-label" for="opened-radio-2">
          <span class="ftr-radio-label__text">{{ text_no }}</span>
        </label>

        <hr class="ftr-out-space--t-xs ftr-out-space--b-xl">


        <span class="ftr-text--s">{{ entry_reason }}</span>
        {% for key, return_reason in return_reasons %}
          <input class="ftr-radio" id="return-radio-{{ key }}" type="radio" name="return_reason_id" value="{{ return_reason.return_reason_id }}" {{ (return_reason_id == return_reason.return_reason_id) ? 'checked' : '' }}>
          <label class="ftr-radio-label" for="return-radio-{{ key }}">
            <span class="ftr-radio-label__text">{{ return_reason.name }}</span>
          </label>
        {% endfor %}
        {% if error_reason %}
          <span class="ftr-text--bold ftr-text--red">{{ error_reason }}</span>
        {% endif %}

        <label class="ftr-field">
          <textarea name="comment" rows="4" class="ftr-field__entry ftr-js-field__entry" data-value="{{ (comment) ? comment : '' }}">{{ (comment) ? comment : '' }}</textarea>
          <span class="ftr-field__text">{{ entry_fault_detail }}</span>
        </label>
      </div>

      <div class="ftr-container">
        {% if google_captcha %}
          <div class="g-recaptcha" data-sitekey="{{ site_key }}"></div>
          {% if error_google_captcha %}
            <span class="ftr-text--s">{{ error_google_captcha }}</span>
          {% endif %}
        {% else %}
          <img src="index.php?route=information/contact/captcha" alt="" class="ftr-out-space--t-l" />
          <label class="ftr-field {{ (error_captcha) ? 'error' : '' }}">
            <input type="text" name="captcha" class="ftr-field__entry ftr-js-field__entry" id="captcha" value="{{ captcha }}" maxlength="11">
            <span class="ftr-field__text">{{ entry_captcha }}</span>
            {% if error_captcha %}
              <span class="ftr-field__error">{{ error_captcha }}</span>
            {% endif %}
          </label>
        {% endif %}
      </div>

      <div class="ftr-container">
        {% if text_agree %}
          <input class="ftr-check" id="agree" type="checkbox" name="agree" value="1" {{ (agree) ? 'checked' : '' }}>
          <label class="ftr-check-label" for="agree">
            <span class="ftr-check-label__text">
              {{ text_read_agree }}
              <a href="{{ agree_link }}" class="ftr-text--primary ftr-js-swipe-content-display ftr-js-privacy-policy">{{ text_privacy_policy }}</a>
              <div class="ftr-swipe-content ftr-js-swipe-content ftr-background--light">
                <div class="ftr-grid ftr-grid--middle ftr-grid--start ftr-in-space--n">
                  <i class="material-icons ftr-in-space--m ftr-in-space--v-l ftr-js-close ftr-text--bold">&#xE5CD;</i>
                  <span class="ftr-text--bold">{{ text_privacy_policy }}</span>
                </div>
                <hr>
                <div class="ftr-swipe-content__main ftr-js-privacy-policy-container"></div>
              </div>
            </span>
            {% if error_agree %}
              <span class="ftr-check-label__error">{{ error_agree }}</span>
            {% endif %}
          </label>
        {% endif %}
        <button type="submit" class="ftr-btn ftr-h--full ftr-background--primary ftr-js-ripple-effect">{{ t_send }}</button>
      </div>

    </div>
  </form>
{{ footer }}