{% for field in fieldslist %}
  {% if not field.variable %}
  <div class="col-xs-6">
    <div class="field-group">
      <label class="flex between-xs">
        <div class="padding-x-small">
          <input type="hidden" name="attr_value_fixed[{{ field.id }}]" value="{{ (field.fixed) ? constant('Type_DsimDnao::Tp_Sim') : constant('Type_DsimDnao::Tp_Nao') }}">
          <span class="js-title-attr">

              {{ field.name }}
              {% if field.id != constant('Type_MercadoLivreId::Tp_Brand') and not field.read_only %}
                {% if not field.fixed or field.read_only is not defined %}
                  {{ field.required ? '*' : '(opcional)' }}
                {% endif %}
              {% endif %}
           </span>
          <input type="hidden" name="attr_label[{{ field.id }}]" value="{{ field.name }}" class="js-attr-name">
          <input type="hidden" name="attr_max_length[{{ field.id }}]" value="{{ field.value_max_length }}" class="js-attr-max-length">
          <input type="hidden" name="attr_type[{{ field.id }}]" value="{{ field.value_type }}" class="js-attr-type">
        </div>
        {% if field.id != constant('Type_MercadoLivreId::Tp_Brand') %}
          {% if field.value_type != constant('Type_MercadoLivreValueType::Tp_Boolean') and not field.read_only %}
            {% if not field.fixed or field.read_only is not defined %}
              <span class="text-x-small padding-x-small js-attributes-clear">LIMPAR</span>
            {% endif %}
          {% endif %}
        {% endif %}
      </label>

      <div class="row x-small-space-xs">
        <div class="col-xs">
          {% if field.value_type == constant('Type_MercadoLivreValueType::Tp_Boolean') %}
            <select
              id="attr_value[{{ field.id }}]"
              name="attr_value[{{ field.id }}]"
              class="field-entry field-entry-medium">
              {% for key, option in field.options %}
                <option value="{{ option }}" {{ key == dadosprod[field.id]['attribute_value_id'] ? 'selected' : '' }}>{{ option }}</option>
              {% endfor %}
            </select>
          {% else %}

            {% if field.id == constant('Type_MercadoLivreId::Tp_Brand') %}
                <input
                type="text"
                id="attr_value[{{ field.id }}]"
                name="attr_value[{{ field.id }}]"
                class="field-entry field-entry-medium"
                value="{{ (field.fixed) ? field.fixed_name : dadosprod[field.id]['attribute_value']  }}"
                readonly>
            {% else %}
              {% if (field.options) %}
                <input
                type="text"
                id="attr_value[{{ field.id }}]"
                name="attr_value[{{ field.id }}]"
                class="field-entry field-entry-medium js-attributes-ml-autocomplete-value {{ field.read_only or field.fixed ? 'background-gray text-bold' : '' }}"
                value="{{ (field.fixed) ? field.fixed_name : dadosprod[field.id]['attribute_value'] }}"
                {{ field.value_max_length > '0' ? 'maxlength="' ~ field.value_max_length ~ '"' : '' }}
                {{ field.required ? 'required' : '' }}
                {{ field.read_only or field.fixed or field.id == constant('Type_MercadoLivreId::Tp_Brand') ? 'readonly' : '' }}>
                <div class="data-source hidden">
                  {% for key, option in field.options %}
                    <div class="js-attributes-ml-autocomplete-item" data-value="{{ key }}">{{ option }}</div>
                  {% endfor %}
                </div>
              {% else %}

                <input
                {{ (field.new_required) ? 'data-new-required = "true"' : '' }}
                type="text"
                id="attr_value[{{ field.id }}]"
                name="attr_value[{{ field.id }}]"
                class="field-entry field-entry-medium{{ field.read_only or field.fixed ? ' background-gray text-bold' : '' }}{% if field.value_type == 'number_unit' %} mask-number-decimal{% endif %}{% if field.value_type == 'number' %} mask-int{% endif %}"
                value="{{ (field.fixed) ? field.fixed_name : dadosprod[field.id]['attribute_value'] }}"
                {{ field.value_max_length > '0' ? 'maxlength="' ~ field.value_max_length ~ '"' : '' }}
                {{ field.required ? 'required' : '' }}
                {{ field.read_only or field.fixed ? 'readonly' : '' }}>

              {% endif %}
            {% endif %}
          {% endif %}
        </div>

        {% if field.allowed_units and not field.fixed %}
          <div class="col-xs">
            <select
            name="attr_unit_value[{{field.id}}]"
            class="field-entry field-entry-medium {{ field.read_only or field.fixed ? 'background-gray text-bold' : '' }}"
            {{ field.read_only or field.fixed ? 'style="pointer-events: none;touch-action: none;"' : '' }}>>
              {% for key, allowed_unit in field.allowed_units %}
                <option value="{{ allowed_unit }}" {{ (allowed_unit == dadosprod[field.id]['attribute_unit_value']) ? 'selected' : '' }}>{{ allowed_unit }}</option>
              {% endfor %}
            </select>
          </div>
        {% endif %}
      </div>
      {% if field.read_only == false and field.id != constant('Type_MercadoLivreId::Tp_Brand') %}
      <label class="attributes-disabled top-margin-small">
        <input type="checkbox" class="js-attributes-disabled hidden" name="attr_value_na[{{ field.id }}]" value="{{ constant('Type_DsimDnao::Tp_Sim') }}"  {{ (dadosprod[field.id]['attribute_value_na']) ? 'checked' : '' }} >
        <span class="text-gray">N/A</span>
      </label>
      {% endif %}
    </div>
  </div>
  {% endif %}
{% endfor %}

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

  });

</script>
