<div class="js-adm-modal-container adm-modal-container-full">
  {% if error_product == false %}
  <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 Skyhub</span>
      </div>
      <i class="fas fa-times text-small text-dark padding-large cursor-pointer js-adm-modal-close"></i>
    </div>

    {% if error_codigo_barra %}
      <div class="warning margin-small">
        <span class="visible-inline-block">{{ error_codigo_barra }}</span>
      </div>
    {% elseif warning_codigo_barra %}
      <div class="background-info border-info padding-small horizontal-margin-large">
        <span class="visible-inline-block text-medium text-info">{{ warning_codigo_barra }}</span>
      </div>
    {% endif %}

  </div>
  {% if product %}
      <div class="adm-modal-content padding-medium">
        <div class="row">
          <div class="col-xs-4">
            <div class="content-box">
              <img src="{{ product.image }}" alt="" class="full-width visible-block">
            </div>
          </div>
          <div class="col-xs-8">
            <div class="content-box">
              <div class="row small-space-xs">
                <div class="col-xs-12">
                  <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 == TypeSkyHub_Status.getNickFromValue(TypeSkyHub_Status.Tp_Habilitado) ? 'background-success text-success' : 'background-error text-error' }} right-margin-small">{{ product.status }}</span>
                    </div>
                  </div>
                </div>
                <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-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>

                <div class="col-xs">
                  <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.price }}</span>
                  </div>
                </div>

                <div class="col-xs">
                  <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.stock }}</span>
                  </div>
                </div>

                {% if product.brand %}
                  <div class="col-xs">
                    <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.bar_code %}
                  <div class="col-xs">
                    <div class="content-box">
                      <span class="text-small text-gray visible-block">{{ entry_ean }}</span>
                      <span class="text-medium text-dark visible-block top-margin-small">{{ product.bar_code }}</span>
                    </div>
                  </div>
                {% endif %}

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

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

      </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>
      {% if error_codigo_barra == false %}
      <button type="button" class="btn-default btn-medium btn-primary js-mkt-vincular-apply" data-sku="{{ product.sku }}" {{ (warning_codigo_barra) ? 'data-error="'~warning_codigo_barra~'"' : ''}}>
        <span>{{ button_apply }}</span>
      </button>
      {% endif %}
    </div>
  </div>
  {% else %}
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-x-large horizontal-padding-large text-center">
          <span class="text-medium text-gray">{{ error_product }}</span>
        </div>
      </div>
    </div>
  {% endif %}
</div>