{% for field in fieldslist %}
  <div class="col-xs-6">
    <div class="field-group">
      <label class="flex between-xs">
        <div class="padding-x-small">
          <span class="js-title-attr">
              {{ field.display_attribute_name }}
              {{ field.is_mandatory ? '*' : '(opcional)' }}
          </span>
          <input type="hidden" name="attr_label[{{ field.attribute_id }}]" value="{{ field.display_attribute_name }}" class="js-attr-name">
          <input type="hidden" name="attr_type[{{ field.attribute_id }}]" value="{{ field.input_type }}" class="js-attr-type">
        </div>
        <span class="text-x-small padding-x-small js-attributes-clear">LIMPAR</span>
      </label>

      <div class="row x-small-space-xs">
        <div class="col-xs">
            {% if (field.attribute_value_list) %}
              <input
              type="text"
              id="attr_value[{{ field.attribute_id }}]"
              name="attr_value[{{ field.attribute_id }}]"
              class="field-entry field-entry-medium js-attributes-autocomplete-value
                {{ field.input_validation_type == 'FLOAT_TYPE' ? 'mask-number-en-decimal' : '' }}
                {{ field.input_validation_type == 'INT_TYPE ' ? 'mask-int': '' }}"
              value="{{ dadosprod[field.attribute_id]['attribute_value'] }}"
              {{ field.is_mandatory ? 'required' : '' }}>
              <div class="data-source hidden">
                {% for key, option in field.attribute_value_list %}
                  {% if field.original_attribute_name == constant('Type_ShopeeAttribute::Tp_Marca') %}
                    <div class="js-attributes-autocomplete-item" data-value="{{ option.brand_id }}">{{ option.display_brand_name }}</div>
                  {% elseif field.attribute_unit %}
                    <div class="js-attributes-autocomplete-item" data-value="{{ option.value_id }}">{{ option.original_value_name }}</div>
                  {% else %}
                    <div class="js-attributes-autocomplete-item" data-value="{{ option.value_id }}">{{ option.display_value_name }}</div>
                  {% endif %}
                {% endfor %}
              </div>
            {% else %}
              <input
              type="text"
              id="attr_value[{{ field.attribute_id }}]"
              name="attr_value[{{ field.attribute_id }}]"
              class="field-entry field-entry-medium
                {{ field.input_validation_type == 'FLOAT_TYPE' ? 'mask-number-en-decimal' : '' }}
                {{ field.input_validation_type == 'INT_TYPE ' ? 'mask-int': '' }}"
              value="{{ dadosprod[field.attribute_id]['attribute_value'] }}"
              {{ field.is_mandatory ? 'required' : '' }}>
            {% endif %}
        </div>

        {% if field.attribute_unit %}
          <div class="col-xs">
            <select
              name="attr_unit_value[{{field.attribute_id}}]"
              class="field-entry field-entry-medium">
              {% for key, allowed_unit in field.attribute_unit %}
                <option value="{{ allowed_unit }}" {{ (allowed_unit == dadosprod[field.attribute_id]['attribute_unit_value']) ? 'selected' : '' }}>{{ allowed_unit }}</option>
              {% endfor %}
            </select>
          </div>
        {% endif %}
      </div>
      {% if field.original_attribute_name != constant('Type_ShopeeAttribute::Tp_Marca') %}
      <label class="attributes-disabled top-margin-small">
        <input type="checkbox" class="js-attributes-disabled hidden" name="attr_value_na[{{ field.attribute_id }}]" value="{{ constant('Type_DsimDnao::Tp_Sim') }}"  {{ (dadosprod[field.attribute_id]['attribute_value_na']) ? 'checked' : '' }} >
        <span class="text-gray">N/A</span>
      </label>
      {% endif %}
    </div>
  </div>
{% endfor %}

<script type="text/javascript">
  $(document).ready(function() {
    $('.js-attributes-autocomplete-value').on('focus', function(event) {
      var sourceContent = [];
      $(this).siblings('.data-source').find('.js-attributes-autocomplete-item').each(function(index, el) {
        sourceContent[index] = {
          label: $(this).text(),
          value: $(this).data('value')
        }
      });
      $('.js-attributes-autocomplete-value').autocomplete({
        source: sourceContent,
        select: function(event, ui) {
          this.value = ui.item.label;
          return false;
        },
        focus: function(event, ui) {
         return false;
        }
      });
    });

  });
</script>
