<div class="js-adm-modal-container adm-modal-container-full">
  <div class="adm-modal-header">
    <div class="flex between-xs">
      <div class="top-padding-large horizontal-padding-large">
        <span class="text-x-large text-dark text-bold">Informações do produto no Shopee</span>
      </div>
      <i class="fas fa-times text-small text-dark padding-large cursor-pointer js-adm-modal-close"></i>
    </div>

    {% if error_product %}
      <div class="warning margin-small">
        <span class="visible-inline-block">{{ error_product }}</span>
      </div>
    {% endif %}

  </div>
  {% if product %}
    <div class="adm-modal-content left-padding-large padding-medium">
      <div class="content-box">
        <span class="padding-small rounded-small visible-inline-block text-medium
          background-warning text-warning border-warning right-margin-small bottom-margin-large full-width">{{ text_warning_link_product }}</span>
      </div>

      <div class="row">
        <div class="col-xs-4">
          <div class="content-box">
            <img src="{{ product.image }}" alt="" class="full-width visible-block border-gray">
          </div>
        </div>
        <div class="col-xs-8">
          <div class="content-box">
            <div class="row small-space-xs">
              <div class="col-xs">
                <div class="content-box">
                  <span class="text-small text-gray visible-block">{{ entry_sku }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ product.sku }}</span>
                </div>
              </div>
              <div class="col-xs-4">
                <div class="content-box flex between-xs middle-xs">
                  <div>
                      <span
                        class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block {{ product.status == Type_ShopeeStatus.getNickFromValue(Type_ShopeeStatus.Tp_Normal) ? 'background-success text-success' : 'background-error text-error' }} right-margin-small">{{ product.status }}</span>
                  </div>
                </div>
              </div>
              <div class="col-xs-12">
                <div class="content-box">
                  <span class="text-small text-gray visible-block">{{ entry_name }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ product.name }}</span>
                </div>
              </div>

              {% if product.price %}
              <div class="col-xs-4">
                <div class="content-box">
                  <span class="text-small text-gray visible-block">{{ entry_mkt_price }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ product.price }}</span>
                </div>
              </div>
              {% endif %}

              {% if product.stock %}
              <div class="col-xs-4">
                <div class="content-box">
                  <span class="text-small text-gray visible-block">{{ entry_mkt_stock }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ product.stock }}</span>
                </div>
              </div>
              {% endif %}

              {% if product.brand %}
                <div class="col-xs-4">
                  <div class="content-box">
                    <span class="text-small text-gray visible-block">{{ entry_brand }}</span>
                    <span class="text-medium text-dark visible-block top-margin-small">{{ product.brand }}</span>
                  </div>
                </div>
              {% endif %}

              {% if product.system_price %}
              <div class="col-xs-4">
                <div class="content-box">
                  <span class="text-small text-gray visible-block">{{ entry_price }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ product.system_price }}</span>
                </div>
              </div>
              {% endif %}

              {% if product.system_stock %}
              <div class="col-xs-4">
                <div class="content-box">
                  <span class="text-small text-gray visible-block">{{ entry_stock }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ product.system_stock }}</span>
                </div>
              </div>
              {% endif %}

            </div>

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

      {% if product.variations %}
      <div class="content-box top-padding-large">
        <div class="bottom-margin-medium">
          <span class="text-large text-bold">{{ text_variations }}</span>
        </div>
        <form id="form-vinc-mkt-grid" class="js-form-vinc-mkt-grid">
          <div class="row small-space-xs">
            {% for variation in product.variations %}
            <div class="col-xs-6">
              <label class="field field-medium">
                <span class="field-label">{{ variation.description }}</span>
                <div class="bottom-margin-x-small">
                  <span class="text-gray text-small">{{ text_stock }}: {{ variation.stock }} | {{ text_price }}: {{ variation.formated_price }}</span>
                </div>
                <select class="field-entry js-variation-link" data-mkt-product-id="{{ variation.model_id }}">
                  <option value="">{{ text_select_product }}</option>
                  {% for system_variation in product.system_variations %}
                    <option value="{{ system_variation.product_id }}">{{ system_variation.description }} | Estoque: {{ system_variation.stock }} | {{ system_variation.formated_price }}</option>
                  {% endfor %}
                </select>
{#                <input type="hidden" name="country_id" value="{{ country_id }}">#}
              </label>
            </div>
            {% endfor %}
          </div>
        </form>
      </div>
      {% endif %}

    </div>
  {% endif %}
  <div class="adm-modal-footer 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 class="js-adm-modal-close">{{ button_cancelar }}</span>
      </button>
      <button type="button" class="btn-default btn-medium btn-primary js-mkt-vincular-apply" data-sku="{{ product.sku }}">
        <span>{{ button_apply }}</span>
      </button>
    </div>
  </div>
</div>