{% extends "/layouts/main.twig" %}

{% set ranges = [
  {
    "range": "today",
    "label": __("Today"),
  },
  {
    "range": "last_7_days",
    "label": __("Last 7 days"),
  },
  {
    "range": "last_30_days",
    "label": __("Last 30 days"),
  },
  {
    "range": "month_to_date",
    "label": __("Month to date"),
  },
  {
    "range": "last_month",
    "label": __("Last month"),
  },
  {
    "range": "last_3_months",
    "label": __("Last 3 months"),
  },
] %}

{% set active_menu = 'analytics' %}
{% set xdata %}
analytics({{ ranges|json_encode }}, "last_30_days")
{% endset %}
{% block title p__('title', 'Analytics')|title %}


{% block template %}
<div class="flex gap-4 justify-between">
  <h1>{{ p__('heading', 'Analytics') }}</h1>

  <div class="relative"
    @click.outside=" $refs.context.removeAttribute('data-open')" x-data>

    <button type="button" class="button button-sm button-dimmed"
      @click="$refs.context.toggleAttribute('data-open')">
      <span x-text="range.label"></span>
      <i class="ti ti-chevron-down"></i>
    </button>

    <div class="menu" x-ref="context">
      <ul>
        <template x-for="r in ranges">
          <li>
            <button type="button"
              class="px-4 py-2 w-full text-left blockl hover:bg-intermediate hover:text-intermediate-content"
              @click="range = r; $refs.context.removeAttribute('data-open');">

              <span x-text="r.label"></span>
            </button>
          </li>
        </template>
      </ul>
    </div>
  </div>
</div>

<div class="flex flex-col gap-2">
  {% include "sections/admin/analytics/usage.twig" %}
  {% include "sections/admin/analytics/users.twig" %}
  {% include "sections/admin/analytics/orders.twig" %}
  {% include "sections/admin/analytics/countries.twig" %}
</div>
{% endblock %}