{{ header }}
<div class="container-fluid{{ exibe_quick_configure ? ' js-quick-config' : '' }}"
     data-home-info='{"marketplace_status": "{{ marketplace_status|join() }}", "app_status": "{{ app_status }}", "text_last_refresh": "{{ text_last_refresh }}" }'>

  <div class="admin-cards-wrapper">
    <div class="admin-cards row small-space-xs medium-space-sm stretch-xs vertical-padding-large background-white">
      {% if error_image %}
        <div class="warning col-xs-12">{{ error_image }}</div>
      {% endif %}
      {% if error_image_cache %}
        <div class="warning col-xs-12">{{ error_image_cache }}</div>
      {% endif %}
      {% if error_cache %}
        <div class="warning col-xs-12">{{ error_cache }}</div>
      {% endif %}
      {% if error_download %}
        <div class="warning col-xs-12">{{ error_download }}</div>
      {% endif %}
      {% if error_logs %}
        <div class="warning col-xs-12">{{ error_logs }}</div>
      {% endif %}
      <div class="ads-banner"></div>
      {% if production_link_warning %}
        <div class="col-xs-12 horizontal-padding-medium">
          <a href="{{ link_manual_dominio }}" target="_blank" class="text-decoration-none">
            <span class="background-warning border-warning text-warning rounded-small visible-block padding-medium">{{ text_production_link_warning }}</span>
          </a>
      </div>
      {% endif %}
      {% if show_skyhub_invalid_credentials_message %}
        <div class="warning full-width margin-small">{{ warning_skyhub_credential }}</div>
      {% endif %}
      {% if show_correios_invalid_credentials_message %}
        <div class="warning full-width margin-small">{{ warning_correios_credential }}</div>
      {% endif %}

      {{ configbar }}
      {% if order_stats_permission %}

        <div class="col-xs-12 col-sm-6 col-md-4">
          <div class="shadow-adm-cards">
            <a href="{{ link_order }}" class="content-box adm-home-abstract hover:shadow-large text-decoration-none flex between-xs middle-xs padding-large background-white shadow-small">
              <div class="full-height">
                <span class="text-small text-gray">{{ text_total_order }}</span>
                <span class="bigger-text-small text-dark text-bold visible-block js-total-order">{{ total_order }}</span>
                <span class="text-small text-gray js-total-order-year">{{ total_order_year }}</span>
              </div>
              <i class="fas fa-angle-right text-small text-gray"></i>
            </a>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
          <div class="shadow-adm-cards">
            <a href="{{ link_order }}" class="content-box adm-home-abstract hover:shadow-large text-decoration-none flex between-xs middle-xs padding-large background-white shadow-small">
              <div class="full-height">
                <span class="text-small text-gray">{{ text_total_sale_year }}</span>
                <span class="bigger-text-small text-dark text-bold visible-block js-total-sale">{{ total_sale }}</span>
                <span class="text-small text-gray js-total-sale-year">{{ total_sale_year }}</span>
              </div>
              <i class="fas fa-angle-right text-small text-gray"></i>
            </a>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
          <div class="shadow-adm-cards">
            <a href="{{ link_order }}" class="content-box adm-home-abstract hover:shadow-large text-decoration-none flex between-xs middle-xs padding-large background-white shadow-small">
              <div class="full-height">
                <span class="text-small text-gray">{{ text_average_order }}</span>
                <span class="bigger-text-small text-dark text-bold visible-block js-average-sale">{{ average_sale }}</span>
                <span class="text-small text-gray js-text-last-12-months">{{ text_last_12_months }}</span>
              </div>
              <i class="fas fa-angle-right text-small text-gray"></i>
            </a>
          </div>
        </div>
      {% endif %}
      {% if showECommerceLinks %}
        <div class="col-xs-12 col-sm-6 col-md-4">
          <div class="shadow-adm-cards">
            <a href="{{ link_product }}" class="content-box adm-home-abstract hover:shadow-large text-decoration-none flex between-xs middle-xs padding-large background-white shadow-small">
              <div class="full-height">
                <span class="text-small text-gray">{{ text_products }}</span>
                <span class="bigger-text-small text-dark text-bold visible-block js-total-product">{{ total_product }}</span>
                <span class="text-small text-gray js-total-product-year">{{ total_product_year }}</span>
              </div>
              <i class="fas fa-angle-right text-small text-gray"></i>
            </a>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
          <div class="shadow-adm-cards">
            <a href="{{ link_customer }}" class="content-box adm-home-abstract hover:shadow-large text-decoration-none flex between-xs middle-xs padding-large background-white shadow-small">
              <div class="full-height">
                <span class="text-small text-gray">{{ text_total_customer }}</span>
                <span class="bigger-text-small text-dark text-bold visible-block js-total-customer">{{ total_customer }}</span>
                <span class="text-small text-gray js-total-customer-year">{{ total_customer_year }}</span>
              </div>
              <i class="fas fa-angle-right text-small text-gray"></i>
            </a>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4">
          <div class="shadow-adm-cards">
            <a href="{{ link_customer_online }}" class="content-box adm-home-abstract hover:shadow-large text-decoration-none flex between-xs middle-xs padding-large background-white shadow-small">
              <div class="full-height">
                <span class="text-small text-gray">{{ text_total_customer_online }}</span>
                <span class="bigger-text-small text-dark text-bold visible-block js-customer-online">{{ total_customer_online }}</span>
                <span class="text-small text-gray js-customers-online-last-refresh">{{ text_last_refresh }} {{ customers_online_last_refresh }}</span>
              </div>
              <i class="fas fa-angle-right text-small text-gray"></i>
            </a>
          </div>         
        </div>

      <div class="wrapper-button-cards">
        <button id="refresh-users-online" type="button" class="btn-customers-online btn-default"> 
          <span>{{ text_refresh }}</span>
        </button>
      </div>
      {% endif %}
    </div>
  </div>

  <div class="row no-space-xs vertical-padding-large">
    {% if order_stats_permission %}
      <div class="col-xs-12">
        <div class="content-box">
          <span class="text-x-large text-dark">{{ text_statistics }}</span>
        </div>
      </div>
      <div class="col-xs-12">
        <div></div>
        <div class="content-box padding-large background-white shadow-small top-margin-large">
          <label class="radio radio-medium radio-inline">
            <input class="radio-entry" type="radio" name="range" value="day" checked>
            <span class="radio-text">{{ text_day }}</span>
          </label>
          <label class="radio radio-medium radio-inline">
            <input class="radio-entry" type="radio" name="range" value="week">
            <span class="radio-text">{{ text_week }}</span>
          </label>
          <label class="radio radio-medium radio-inline">
            <input class="radio-entry" type="radio" name="range" value="month">
            <span class="radio-text">{{ text_month }}</span>
          </label>
          <label class="radio radio-medium radio-inline">
            <input class="radio-entry" type="radio" name="range" value="year">
            <span class="radio-text">{{ text_year }}</span>
          </label>
          <div class="row">
            <div class="col-xs-12 col-md-6">
              <div class="content-box js-my-chart"></div>
            </div>
            <div class="col-xs-12 col-md-6">
              <div class="content-box js-my-chart-device"></div>
            </div>
          </div>
          <div class="row">
            {% if marketplace_status|length > 0 or app_status %}
              <div class="col-xs-12 col-md-6">
                <div class="content-box js-my-chart-sales-channel"></div>
              </div>
            {% endif %}
            {% if marketplace_status|length > 0 %}
              <div class="col-xs-12 col-md-6">
                <div class="content-box js-my-chart-marketplace"></div>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    {% endif %}
    <div class="col-xs-12">
      <div class="row top-margin-large stretch-xs">
        <div class="col-xs-12 col-md-6">
          <div class="content-box padding-medium background-white shadow-small">
            <div class="flex bottom-border-gray bottom-padding-medium bottom-margin-small between-xs middle-xs">
              <span class="text-large text-dark">{{ text_most_viewed_products }}</span>
              <a href="{{ link_most_viewed }}" class="text-small text-primary text-decoration-none">{{ text_see_more }}</a>
            </div>
            {% for most_viewed_product in most_viewed_products %}
            <div class="row between-xs nowrap-xs ">
              <div class="col-xs-2">
                <div class="content-box">
                  <span class="visible-block text-medium text-dark vertical-margin-x-small">{{ most_viewed_product.product_id }}</span>
                </div>
              </div>
              <div class="col-xs-8">
                <div class="content-box text-ellipsis">
                  <span class="visible-block text-medium text-dark vertical-margin-x-small text-ellipsis">{{ most_viewed_product.name }}</span>
                </div>
              </div>
              <div class="col-xs-2">
                <div class="content-box text-right">
                  <span class="visible-block text-medium text-dark text-bold vertical-margin-x-small">{{ most_viewed_product.viewed }}</span>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
        <div class="col-xs-12 col-md-6">
          <div class="content-box padding-medium background-white shadow-small">
            <div class="flex bottom-border-gray bottom-padding-medium bottom-margin-small between-xs middle-xs">
              <span class="text-large text-dark">{{ text_searched_terms }}</span>
              <a href="{{ link_searchterms }}" class="text-small text-primary text-decoration-none">{{ text_see_more }}</a>
            </div>
            {% for search_term in search_terms %}
            <div class="row between-xs nowrap-xs">
              <div class="col-xs-10">
                <div class="content-box text-ellipsis">
                  <span class="visible-block text-medium text-dark vertical-margin-x-small text-ellipsis">{{ search_term.term }}</span>
                </div>
              </div>
              <div class="col-xs-2">
                <div class="content-box text-right">
                  <span class="visible-block text-medium text-dark text-bold vertical-margin-x-small">{{ search_term.score }}</span>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>

  {% if order_stats_permission %}
    <div class="js-sales-order">
      {{ last_sales_order }}
    </div>
  {% endif %}

</div>
{{ footer }}
