<div id="main-catalog" data-productinfo='{"product_id": "{{ product_id }}", "type_product": "{{ type_product }}",
                        "type_marketplace": "{{ type_marketplace }}", "is_grid": "{{ is_grid }}", "token": "{{ token }}",
                        "urlFilter": "{{ urlfilter }}", "market_ad_id": "{{ mainAdId }}"}'>
  <div class="js-adm-modal-container adm-modal-container-full">
    <input type="hidden" id="js-catalog-product-id"/>
    {#Header#}
    <div class="adm-modal-header bottom-padding-medium">
      <div class="flex between-xs">
        <div class="padding-large">
          <span class="text-x-large text-dark text-bold">{{ text_catalog_product }}</span>
        </div>
        <i class="fas fa-times text-small text-dark padding-large cursor-pointer js-adm-modal-close"></i>
      </div>
      <div id="js-product-grid-header"></div>
      {% if not productCatalog %}
      <div id="js-product-header" class="horizontal-padding-large">
        <span class="text-medium text-dark visible-block vertical-margin-small"><b>Produto E-commerce:</b> {{ mainProductName }}</span>
      </div>
      {% else %}
      <div id="js-product-header" class="padding-medium border-gray background-light">
        <span class="text-small text-gray text-bold visible-block">Produto vinculado</span>
        <span class="text-medium text-dark visible-block vertical-margin-small"><b>E-commerce:</b> {{ mainProductName }}</span>
        <span class="text-medium text-dark visible-block"><b>Mercado Livre:</b> {{ productCatalog.name }}</span>
      </div>
      {% endif %}
      <div id="js-selected-catalog-product" class="padding-medium border-gray background-light hidden">
        <span id="span-product-name" class="text-medium text-dark visible-block "><b>Produto E-commerce:</b> {{ mainProductName }}</span>
        <span class="text-small text-gray text-bold visible-block  vertical-margin-small">Produto selecionado</span>
        <div id="js-selected-catalog-product-info"></div>
      </div>
    </div>
    {#Content#}
      {#Busca de produtos#}
    <div id="js-search-catalog" class="row no-space-xs horizontal-padding-large bottom-padding-small {% if is_grid %}hidden{% endif %}">
      <label for="custom_title" class="field-label visible-block">{{ text_search_product }}</label>
      <div class="col-xs-12 field-entry-group">
        <input type="text" name="product_search" value="{{ mainProductName }}" class="field-entry field-entry-medium col-md-10"/>
        <button class="btn-default btn-primary btn-large-square col-md-2 js-modal-search">
          <i class="fas fa-search"></i>
        </button>
      </div>
    </div>
    <div id="div-modal-content" class="adm-modal-content horizontal-padding-large vertical-padding-medium">
      {#Produtos Grid#}
      {% if is_grid %}
        <input type="hidden" name="grid_product_ml"/>
        <div id="js-catalog-grid"></div>
      {% endif %}

      <form id="js-mlcatalog" action="{{ action }}" method="post" enctype="multipart/form-data" {% if is_grid %}class="hidden"{% endif %}>
        <input type="hidden" name="redirect" value="{{ redirect }}"/>
        <input type="hidden" name="main_ad" value="{{ mainAd }}"/>
        <input type="hidden" name="product_ml" id="idproduto" value="{{ product_id }}"/>
        <input type="hidden" name="codigo_barra" id="codigo_barra" value="{{ codigo_barra }}"/>
        <input type="hidden" name="type_product[{{ product_id }}]" value="{{ type_product }}" />

        <div class="horizontal-padding-large top-margin-medium" style="overflow-y:auto;">
          <div class="search-products"></div>
        </div>
      </form>

      {#Atributos#}
      <div id="js-catalog-attributes" class="hidden"></div>
    </div>
    {#Footer#}
    <div class="adm-modal-footer padding-large">
      <div class="js-adm-modal-buttons flex end-xs vertical-padding-large">
        <div class="flex end-xs">
          <button type="button" class="btn-default btn-medium btn-outline right-margin-small js-adm-modal-close">
            <span>{{ button_cancel }}</span>
          </button>
          <button type="button" class="btn-default btn-medium btn-outline right-margin-small js-modal-back hidden">
            <span>{{ button_back }}</span>
          </button>
          <button type="button" class="btn-default btn-medium btn-primary js-modal-next {% if is_grid %}hidden{% endif %}" data-sincro="{{ product_marketId }}">
            <span>{{ text_next }}</span>
          </button>
          <button type="button" class="btn-default btn-medium btn-primary js-modal-save hidden {% if not is_grid %}right-margin-small{% endif %}" data-sincro="{{ product_marketId }}">
            <span>{{ text_link }}</span>
          </button>
          <button type="button" class="btn-default btn-medium btn-primary js-modal-syncronize {% if not is_grid %}hidden{% endif %}" data-sincro="{{ product_marketId }}">
            <span>{% if is_grid %}{{ text_sync }}{% else %}{{ text_link_sync }}{% endif %}</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <script src="view/javascript/template/module/catalog-mercadolivre.js"></script>
</div>