{{ 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">     
          {# exibe o grafico em linhas ou barras para os 4 graficos #}
          <div class="row checkbox-container x-small-space-xs flex gap-2 padding-small">
            <div class="col-md-2 no-padding">
              <label class="checkbox" for="TypeLine">
                <input class="checkbox-entry" type="checkbox" id="TypeLine" name="chartType" value="line" checked>
                <span class="checkbox-text">{{ text_line }}</span>
              </label>
            </div>
            <div class="col-md-2 no-padding">
              <label class="checkbox" for="TypeBar">
                <input class="checkbox-entry" type="checkbox" id="TypeBar" name="chartType" value="bar">
                <span class="checkbox-text">{{ text_bar }}</span>
              </label>
            </div>
          </div>
          {# exibe o grafico em linhas ou barras para o novo grafico #}
          <div class="row customizable-checkbox-container x-small-space-xs flex gap-2 padding-small" style="display: none;">
            <div class="col-md-2 no-padding">
              <label class="checkbox" for="chartTypeLine">
                <input class="checkbox-entry" type="checkbox" id="chartTypeLine" name="chartType" value="line" checked>
                <span class="checkbox-text">{{ text_line }}</span>
              </label>
            </div>
            <div class="col-md-2 no-padding">
              <label class="checkbox" for="chartTypeBar">
                <input class="checkbox-entry" type="checkbox" id="chartTypeBar" name="chartType" value="bar">
                <span class="checkbox-text">{{ text_bar }}</span>
              </label>
            </div>  
          </div>
          <div class="row x-small-space-xs flex gap-3 padding-small bottom-margin-small">
            <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>
            <label class="radio radio-medium radio-inline">
              <input id="customizable-radio" class="radio-entry" type="radio" name="range" value="customizable">
              <span class="radio-text">{{ text_customizable }}</span>
            </label>
          </div>
          <div id="date-range-error" style="display: none; color: #555555; background-color: #FFD1D1; padding: 10px; margin-bottom: 20px; text-align: center; border-radius: 5px; border: 1px solid #F8ACAC;">
            <span>{{ error_periodo }}</span>
          </div>
          <div id="customizable-date-container" class="row x-small-space-xs flex middle-xs bottom-margin-medium" style="display: none;">
            <div class="col-md-2">
              <label class="field field-medium" for="from">
                <span class="field-label">{{ entry_date_start }}</span>
                <input class="field-entry date-picker" type="text" id="from" name="from"/>
              </label>
            </div>
            <div class="col-md-2">
              <label class="field field-medium" for="to">
                <span class="field-label">{{ entry_date_end }}</span>
                <input class="field-entry date-picker" type="text" id="to" name="to"/>
              </label>
            </div>
          </div>
          <div class="col-md-12 no-padding">
            <div id="no-results" style="display: none;" class="content-box background-white shadow-medium vertical-padding-x-large horizontal-padding-large text-center">
              <span class="text-medium text-gray">{{ text_no_results }}</span>
            </div>
          </div>
          <div class="row existing-chart-container" style="display: 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 existing-chart-container" style="display: 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 class="row" id="custom-chart-container" style="display: none;">
            <div class="col-xs-12 col-md-12">
              <div class="content-box js-my-chart-custom"></div>
            </div>
          </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 }}
