{{ header }}

<header class="background-white bottom-margin-large" data-info='{"titleModules": "{{ constant('Type_TitleModules::Tp_Config') }}", "urlRetorno": "{{ urlretorno }}", "urlFilter": "{{ urlfilter }}", "mercadolivre_status": {{ mercadolivre_status ? 'true' : 'false' }}, "type_marketplace": "{{ type_marketplace }}", "route": "{{ rota_catalog }}", "marketplace_active": "{{ marketplace_active }}", "sort": "{{ sort }}", "order": "{{ order }}"}'>
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-large flex between-xs middle-xs js-header-notifications">
          <div>
            <span class="text-x-large text-dark">{{ heading_title }}</span>
            <div class="adm-breadcrumb">
              {% for breadcrumb in breadcrumbs %}
                <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
                <a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
              {% endfor %}
            </div>
          </div>
          <div>
            {% if loaded_marketplace %}
              <button
                type="button"
                class="btn-default btn-medium-square btn-white js-suspended-side-control"
                id="suspended-side-actions"
                disabled
              >
                <i class="fas fa-cog"></i>
              </button>
            {% endif %}
          </div>
          {% if error_warning %}
            <div class="warning full-width">
              <span class="visible-inline-block">{{ error_warning }}</span>
              {% if error_original and error_original != error_warning %}
              <span class="js-toggle-original-error visible-block text-small cursor-pointer text-primary">{{ text_see_original }}</span>
              <span class="hidden">{{ error_original }}</span>
              {% endif %}
            </div>
          {% endif %}
          {% if success %}<div class="success full-width">{{ success }}</div>{% endif %}
          {% if warning_mkt_global %}<div  class="attention left-padding-x-large text-warning background-warning border-warning padding-small rounded-small bottom-margin-small full-width"> {{ warning_mkt_global }}</div>{% endif %}
        </div>
      </div>
    </div>
  </div>
</header>

<div class="container-fluid js-mkt-content-notices"></div>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="content-box">
        <div class="pull-left bottom-padding-small flex between-xs middle-xs">
          <div class="field field-medium">
          <span class="field-label">Ordenar por:
            <select id="order_list_data_added" class="field-entry" name="sort">
              {% for options in select_order %}
                <option value="{{ options.value }}" {% if options.selected %}selected{% endif %}>
                  {{ options.text }}
                </option>
              {% endfor %}
            </select>
          </span>
          </div>
        </div>
        <div class="pull-right top-margin-medium flex between-xs middle-xs">
          {% if filter_count >= 1 %}
            <a class="text-small text-primary text-decoration-none horizontal-padding-large" href="index.php?route={{ rota_catalog }}&token={{ token }}&sort={{ sort }}&order={{ order }}">
              {{ text_cleaning_filters }} ({{ filter_count }})
            </a>
          {% endif %}
          <button type="button" class="btn-default btn-medium-square btn-primary js-suspended-side-control" id="suspended-side-filter">
            <i class="fas fa-filter"></i>
            <span class="text-small">{{ button_filter }}</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <form method="post" class="js-product-form">
  {% if products %}
    <div class="row">
      <div class="col-xs-12">
        {% if loaded_marketplace %}
          <label class="checkbox checkbox-large left-margin-medium">
            <input class="checkbox-entry" type="checkbox"  onclick="$('input[name*=\'selected\']:enabled').attr('checked', this.checked);">
            <span class="checkbox-text">{{ select_all }}</span>
          </label>
        {% endif %}
        {% for product in products %}
          <div class="row no-space-xs middle-xs background-white top-padding-medium horizontal-padding-medium shadow-small hover:shadow-large bottom-margin-small {% if product.marketplace.error %}border-error{% endif %} {% if product.marketplace.warning %}border-warning{% endif %}">
            {% if loaded_marketplace %}
              <div class="col-xs-width-auto">
                <div class="bottom-margin-medium right-margin-small">
                <label class="checkbox">
                  <input class="checkbox-entry" data-sincro="{{ product.mktData.status }}"
                    data-prod-type="{{ product.type_product }}" type="checkbox" name="selected[]"
                    value="{{ product.product_key_id }}"
                    {% if (product.selected) %}checked{% endif %}
                    {% if product.status != 'Habilitado' %}disabled{% endif %}
                  >
                  <span class="checkbox-text"></span>
                </label>
                <input type="hidden" name="type_product[{{ product.product_key_id }}]" value="{{ product.type_product }}">
              </div>
              </div>
            {% endif %}
            <div class="col-xs">
              <a
                href="{{ product.href }}"
                data-product-key-id="{{ product.product_key_id }}"
                class="content-box visible-block text-decoration-none{% if product.is_grid %} js-product-grid{% endif %}"
              >
                <div class="row nowrap-md no-space-xs middle-xs">
                  <div class="col-xs-12 col-md-1">
                    <div class="content-box text-word-wrap bottom-padding-medium">
                      <span class="text-small text-dark text-bold visible-block">#{{ product.model }}</span>
                    </div>
                  </div>
                  <div class="col-xs-12 col-md text-ellipsis">
                    <div class="content-box bottom-padding-medium">
                      <div class="vertical-middle">
                        <img src="{{ product.image }}" width="36" height="36" class="border-gray visible-block">
                      </div>
                      <div class="vertical-middle left-padding-small" style="width: calc(100% - 48px);">
                        <span
                          class="text-small text-dark text-ellipsis visible-block{% if product.is_grid %} js-product-name{% endif %}"
                          title="{{ product.name }}"
                          {{ loaded_marketplace ? 'style="max-width:500px"' : '' }}
                        >{{ product.name }}</span>
                        {% if product.temBrinde %}
                          <div class="content-box visible-inline-block text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-warning text-warning">
                            <span class="text-x-small">{{ text_gift }}</span>
                          </div>
                        {% endif %}
                        <span class="text-small text-gray text-ellipsis">
                          {% if product.color %}{{ product.color }}{% endif %}
                          {% if product.size %} | {{ product.size }} {% endif %}
                          {% if product.specification %} | {{ product.specification }} {% endif %}
                        </span>
                      </div>
                    </div>
                  </div>
                  {% if product.is_grid %}
                    <div class="col-xs-6 col-md-1">
                      <div class="content-box bottom-padding-medium">
                        <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-info text-info">Grade</span>
                      </div>
                    </div>
                  {% endif %}
                  {% if product.is_kit %}
                    <div class="col-xs-6 col-md-1">
                      <div class="content-box bottom-padding-medium">
                        <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-info text-info">Kit</span>
                      </div>
                    </div>
                  {% endif %}
                  {% if not loaded_marketplace %}
                    <div class="col-xs-6 col-md-1">
                      <div class="content-box bottom-padding-medium">
                        {% if product.special %}
                          <span class="text-small text-dark visible-block">{{ product.special }}</span>
                          <span class="text-small text-gray" style="text-decoration:line-through;">{{ product.price }}</span>
                        {% else %}
                          <span class="text-small text-dark visible-block">{{ product.price }}</span>
                        {% endif %}
                      </div>
                    </div>
                  {% endif %}
                  <div class="col-xs-6 col-md-1">
                    <div class="content-box bottom-padding-medium">
                      {% if product.quantity <= 0 %}
                        <span class="text-small text-error">{{ product.quantity }} unid.</span>
                      {% elseif product.quantity <= 5 %}
                        <span class="text-small text-warning">{{ product.quantity }} unid.</span>
                      {% else %}
                        <span class="text-small text-dark">{{ product.quantity }} unid.</span>
                      {% endif %}
                    </div>
                  </div>
                  <div class="col-xs-6 col-md-width-auto">
                    <div class="content-box bottom-padding-medium right-padding-medium">
                      <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block {{ product.status == 'Habilitado' ? 'background-success text-success' : 'background-error text-error' }}">{{ product.status }}</span>
                    </div>
                  </div>

                </div>
              </a>
            </div>

            {% if product.marketplace %}
              {{ product.marketplace }}
            {% endif %}


          </div>
        {% endfor %}
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box">
          {{ pagination }}
        </div>
      </div>
    </div>
  {% else %}
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center">
          <span class="text-medium text-gray">{{ text_no_results }}</span>
        </div>
      </div>
    </div>
  {% endif %}
  </form>
</div>

<form class="js-filter">
  <div class="adm-suspended-side background-white shadow-large flex flex-column auto-overflow js-suspended-side js-suspended-side-filter">
    <div class="horizontal-padding-large top-padding-large bottom-padding-small flex between-xs middle-xs js-suspended-side-close">
      <span class="text-x-large text-dark">{{ text_filters }}</span>
      <i class="fas fa-times text-medium text-gray padding-small cursor-pointer"></i>
    </div>
    <div class="adm-suspended-side-content js-filter-accordion">
      <div class="top-padding-medium right-padding-large bottom-padding-small left-margin-large bottom-border-gray cursor-pointer adm-filter-accordion-control js-accordion-control">
        <span class="text-small text-dark text-uppercase vertical-middle">{{ text_general }}</span>
        <i class="fas fa-angle-down text-gray vertical-middle"></i>
      </div>
      <div class="padding-large js-accordion-content">
        <div class="field-group">
          <label class="field-label" for="filter_name">{{ column_name }}</label>
          <div class="field-entry-group">
            <select class="field-entry field-entry-medium" name="filter_content_name" id="filter_content_name">
              {% for key, value in content_name %}
                <option value="{{ value.content_name_id }}" {{ value.content_name_status }} >{{ value.content_name_name }}</option>
              {% endfor %}
            </select>
            <input class="field-entry field-entry-medium ui-autocomplete-input" type="text" name="filter_name" id="filter_name" value="{{ filter_name }}" autocomplete="on" role="textbox" aria-autocomplete="list" aria-haspopup="true">
          </div>
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_model">{{ column_cod }}</label>
          <div class="field-entry-group">
            <select class="field-entry field-entry-medium" name="filter_content_model" id="filter_content_model">
              {% for key, value in content_model %}
                <option value="{{ value.content_model_id }}" {{ value.content_model_status }} >{{ value.content_model_name }}</option>
              {% endfor %}
            </select>
            <input class="field-entry field-entry-medium ui-autocomplete-input" type="text" name="filter_model" id="filter_model" value="{{ filter_model }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
          </div>
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_category_id">{{ column_category }}</label>
          <select class="field-entry field-entry-medium" name="filter_category_id" id="filter_category_id">
            <option value="*"></option>
            {% for categorie in categories %}
              <option value="{{ categorie.category_id }}" {% if categorie.category_id == filter_category_id %}selected{% endif %}>{{ categorie.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_manufacturer">{{ column_manufacturer }}</label>
          <input class="field-entry field-entry-medium ui-autocomplete-input" type="text" name="filter_manufacturer" id="filter_manufacturer" value="{{ filter_manufacturer }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_grade">{{ column_grade }}</label>
          <select class="field-entry field-entry-medium" name="filter_grade" id="filter_grade">
            <option value="*"></option>
            {% for key, value in dsimdnao_filter_grade %}
              <option value="{{ value.dsimdnao_id }}" {{ value.dsimdnao_status }}>{{ value.dsimdnao_name }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_kit">{{ column_kit }}</label>
          <select class="field-entry field-entry-medium" name="filter_kit" id="filter_kit">
            <option value="*"></option>
            {% for key, value in dsimdnao_filter_kit %}
              <option value="{{ value.dsimdnao_id }}" {{ value.dsimdnao_status }}>{{ value.dsimdnao_name }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_grade">{{ column_barcord }}</label>
          <select class="field-entry field-entry-medium" name="filter_barcod" id="filter_barcod">
            <option value="*"></option>
            {% for key, value in dsimdnao_filter_barcod %}
              <option value="{{ value.dsimdnao_id }}" {{ value.dsimdnao_status }}>{{ value.dsimdnao_name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_color">{{ column_color }}</label>
          <input class="field-entry field-entry-medium ui-autocomplete-input" type="text" name="filter_color" id="filter_color" value="{{ filter_color }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_size">{{ column_size }}</label>
          <input class="field-entry field-entry-medium ui-autocomplete-input" type="text" name="filter_size" id="filter_size" value="{{ filter_size }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_model">{{ column_price }}</label>
          <div class="field-entry-group">
            <select class="field-entry field-entry-medium" name="filter_content_price" id="filter_content_price">
              {% for key, value in content_price %}
                <option value="{{ value.content_price_id }}" {{ value.content_price_status }}>{{ value.content_price_name }}</option>
              {% endfor %}
            </select>
            <input class="field-entry field-entry-medium mask-money2" type="text" name="filter_price" id="filter_price" value="{{ filter_price }}">
          </div>
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_model">{{ column_quantity }}</label>
          <div class="field-entry-group">
            <select class="field-entry field-entry-medium" name="filter_content_qtd" id="filter_content_qtd">
              {% for key, value in content_qtd %}
                <option value="{{ value.content_qtd_id }}" {{ value.content_qtd_status }} >{{ value.content_qtd_name }}</option>
              {% endfor %}
            </select>
            <input class="field-entry field-entry-medium" type="text" name="filter_quantity" id="filter_quantity" value="{{ filter_quantity }}">
          </div>
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_category_id">{{ column_stock }}</label>
          <select class="field-entry field-entry-medium" name="filter_stock">
            <option value="*"></option>
            {% for key, value in filterstock %}
              <option value="{{ value.filterstock_id }}" {{ value.filterstock_status }}>{{ value.filterstock_name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="field-group top-margin-medium">
          <label class="field-label" for="filter_status">{{ column_status }}</label>
          <select class="field-entry field-entry-medium" name="filter_status" id="filter_status">
            <option value="*"></option>
            <option value="1" {% if filter_status %}selected{% endif %}>{{ text_enabled }}</option>
          <option value="0" {% if filter_status is not null and not filter_status %}selected{% endif %}>{{ text_disabled }}</option>
          </select>
        </div>
      </div>
        {% if loaded_marketplace %}
        <div class="top-padding-medium right-padding-large bottom-padding-small left-margin-large bottom-border-gray cursor-pointer adm-filter-accordion-control js-accordion-control">
          <span class="text-small text-dark text-uppercase vertical-middle">{{ text_marketplace_name }}</span>
          <i class="fas fa-angle-down text-gray vertical-middle"></i>
        </div>
        <div class="padding-large js-accordion-content">
          <div class="field-group">
            <label class="field-label" for="filter_marketId">{{ column_mercaid }}</label>
            <input class="field-entry field-entry-medium ui-autocomplete-input" type="text" name="filter_marketId" id="filter_marketId" value="{{ filter_marketId }}" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
          </div>
          <div class="field-group top-margin-medium">
            <label class="field-label" for="filter_marketplace">{{ text_marketplace_name }}</label>
            <select class="field-entry field-entry-medium" name="filter_marketplace" id="filter_marketplace">
              <option value="*"></option>
              {% for key, value in dsimdnao_filter_marketplace %}
                <option value="{{ value.dsimdnao_id }}" {{ value.dsimdnao_status }}>{{ value.dsimdnao_name }}</option>
              {% endfor %}
            </select>
          </div>
          {% if mercadolivre_status %}
            <div class="field-group top-margin-medium">
              <label class="field-label" for="filter_ml_status">{{ lang_markets_status }}</label>
              <select class="field-entry field-entry-medium" name="filter_ml_status" id="filter_ml_status">
                <option value="*"></option>
                {% for key, value in mlItensStatus_ml_status %}
                  <option value="{{ value.dsimdnao_id }}" {{ value.dsimdnao_status }}>{{ value.dsimdnao_name }}</option>
                {% endfor %}
              </select>
            </div>
          {% endif %}

        </div>
      {% endif %}
    </div>
    <div class="padding-large">
      <button type="submit" class="btn-default btn-medium btn-full btn-primary">
        <span>{{ button_filter }}</span>
      </button>
    </div>
  </div>
</form>

{% if loaded_marketplace %}
  <div class="adm-suspended-side background-white shadow-large flex flex-column auto-overflow js-suspended-side js-suspended-side-actions">
    <div class="horizontal-padding-large top-padding-large bottom-padding-small flex between-xs middle-xs js-suspended-side-close">
      <span class="text-x-large text-dark">Configurações</span>
      <i class="fas fa-times text-medium text-gray padding-small cursor-pointer"></i>
    </div>
    <div class="adm-suspended-side-content">
      <div class="horizontal-padding-large">
        {% if skyhub_status %}
          <label class="field field-medium top-margin-medium">
            <span class="field-label">Plataforma</span>
            <select class="field-entry js-plataform">
              {% for key, TypeSkyhubPlatform in TypeSkyhubPlatforms %}
              <option value="{{ key }}">{{ TypeSkyhubPlatform }}</option>
              {% endfor %}
            </select>
          </label>

          <div class="js-plataform-option js-plataform-option-b2w hidden">
            <div class="flex nowrap-xs middle-xs between-xs cursor-pointer vertical-padding-medium bottom-border-gray js-b2w-produto js-product-actions" data-type="{{ TypeSkyhubProductAction.Tp_link }}">
              <div>
                <span class="visible-block text-medium text-primary">Conectar todos</span>
                <span class="visible-block text-small text-gray">Associa o anúncio a plataforma B2W</span>
              </div>
              <i class="fas fa-angle-right text-small text-gray"></i>
            </div>
            <div class="flex nowrap-xs middle-xs between-xs cursor-pointer vertical-padding-medium bottom-border-gray js-b2w-produto js-product-actions" data-type="{{ TypeSkyhubProductAction.Tp_unlink }}">
              <div>
                <span class="visible-block text-medium text-primary">Desconectar todos</span>
                <span class="visible-block text-small text-gray">Desassocia o anúncio da plataforma B2W</span>
              </div>
              <i class="fas fa-angle-right text-small text-gray"></i>
            </div>
            <div class="flex nowrap-xs middle-xs between-xs cursor-pointer vertical-padding-medium bottom-border-gray js-b2w-produto js-product-actions" data-type="{{ TypeSkyhubProductAction.Tp_price_entry }}">
              <div>
                <span class="visible-block text-medium text-primary">Enviar preço/estoque</span>
                <span class="visible-block text-small text-gray">Envia o preço e o estoque para a plataforma B2W</span>
              </div>
              <i class="fas fa-angle-right text-small text-gray"></i>
            </div>
          </div>
        {% endif %}

        {% if skyhub_status %}<div class="js-plataform-option js-plataform-option-skyhub">{% endif %}
        <div class="flex nowrap-xs middle-xs between-xs cursor-pointer vertical-padding-medium bottom-border-gray js-bulkSynchronize">
          <div>
            <span class="visible-block text-medium text-primary">{{ lang_bulk_btn }}</span>
            <span class="visible-block text-small text-gray">{{ text_sincronizar_todos }}</span>
          </div>
          <i class="fas fa-angle-right text-small text-gray"></i>
        </div>
        {% if not galeriapage_status %}
        <div class="flex nowrap-xs middle-xs between-xs cursor-pointer vertical-padding-medium bottom-border-gray js-bulkDeSynchronize">
          <div>
            <span class="visible-block text-medium text-primary">{{ lang_bulk_desyn_btn }}</span>
            <span class="visible-block text-small text-gray">{{ text_finalizar_todos }}</span>
          </div>
          <i class="fas fa-angle-right text-small text-gray"></i>
        </div>
        {% endif %}
        {% if skyhub_status %}</div>{% endif %}

        {% if mercadolivre_status %}
          <div class="flex nowrap-xs middle-xs between-xs cursor-pointer vertical-padding-medium bottom-border-gray js-bulkMLVinc">
            <div>
              <span class="visible-block text-medium text-primary">{{ lang_bulk_desvinc_btn }}</span>
              <span class="visible-block text-small text-gray">{{ text_editar_todos }}</span>
            </div>
            <i class="fas fa-angle-right text-small text-gray"></i>
          </div>
          <div class="flex nowrap-xs middle-xs between-xs cursor-pointer vertical-padding-medium js-bulkSetting" data-modal-id="bulk-setting">
            <div>
              <span class="visible-block text-medium text-primary">{{ lang_bulk_ml_product }}</span>
              <span class="visible-block text-small text-gray">{{ text_desvincular_todos }}</span>
            </div>
            <i class="fas fa-angle-right text-small text-gray"></i>
          </div>
        {% endif %}

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

{{ footer }}
