{% macro column_chooser(toggles, locale) %}
<div class="dropdown">
  <button type="button" class="btn btn-sm btn-outline-secondary beeui-columns-ellipsis" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" aria-label="{% if locale == 'ru' %}Колонки{% else %}Columns{% endif %}">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-dots" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg>
  </button>
  <div class="dropdown-menu dropdown-menu-end">
    {% for toggle in toggles %}
      {% if toggle.toggle_href %}<a class="dropdown-item{% if toggle.visible %} active{% endif %}" href="{{ toggle.toggle_href }}">{% else %}<span class="dropdown-item{% if toggle.visible %} active{% endif %}">{% endif %}
        {% if toggle.visible %}<span class="dropdown-item-icon">&#10003;</span>{% endif %}
        {{ toggle.label }}
      {% if toggle.toggle_href %}</a>{% else %}</span>{% endif %}
    {% endfor %}
  </div>
</div>
{% endmacro %}

{% macro canonical_table(title, description=none, pagination=none, toolbar=none, form_action=none, locale='en') %}
<div class="card beeui-canonical-table">
  <div class="card-header">
    <div class="w-100">
      <h3 class="card-title mb-0">{{ title }}</h3>
      {% if description %}
        <div class="text-secondary small">{{ description }}</div>
      {% endif %}
      {% if toolbar %}
      <div class="mt-2">
        <form method="GET" action="{{ form_action }}" class="d-flex flex-wrap align-items-center gap-1 beeui-table-toolbar">
          {% if toolbar.hidden %}{% for hname, hvalue in toolbar.hidden.items() %}<input type="hidden" name="{{ hname }}" value="{{ hvalue }}">{% endfor %}{% endif %}
          {% set ns = namespace(chooser_rendered=false) %}
          {% for field in toolbar.fields %}
            {% if field.type == "date_range" %}
            {% set dr_id = field.name if field.name else "date" %}
            <div class="beeui-table-toolbar-date-group d-flex gap-1 align-items-center">
              {% if field.label %}<label class="form-label mb-0 small me-1">{{ field.label }}</label>{% endif %}
              <div class="input-icon input-icon-sm beeui-dr-trigger" id="beeui-dr-{{ dr_id }}-trigger">
                <span class="input-icon-addon" aria-hidden="true">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"/><path d="M16 3v4"/><path d="M8 3v4"/><path d="M4 11h16"/><path d="M11 15h1"/><path d="M12 15v3"/></svg>
                </span>
                <input type="text" class="form-control form-control-sm beeui-dr-input" readonly placeholder="{% if locale == 'ru' %}Период{% else %}Date range{% endif %}" value="{% if field.from_value and field.to_value %}{{ field.from_value }} — {{ field.to_value }}{% elif field.from_value %}{% if locale == 'ru' %}с {% endif %}{{ field.from_value }}{% elif field.to_value %}{% if locale == 'ru' %}по {% endif %}{{ field.to_value }}{% endif %}">
              </div>
              <input type="hidden" name="{% if field.name %}{{ field.name }}_from{% else %}date_from{% endif %}" value="{{ field.from_value }}" class="beeui-dr-from" data-dr-id="{{ dr_id }}">
              <input type="hidden" name="{% if field.name %}{{ field.name }}_to{% else %}date_to{% endif %}" value="{{ field.to_value }}" class="beeui-dr-to" data-dr-id="{{ dr_id }}">
            </div>
            {% elif field.type == "text" %}
            <div class="input-group input-group-flat input-group-sm beeui-toolbar-search">
              <span class="input-group-text">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
              </span>
              <input type="search" class="form-control" name="{{ field.name }}" value="{{ field.value }}" placeholder="{% if field.placeholder %}{{ field.placeholder }}{% elif locale == 'ru' %}Поиск...{% else %}Search...{% endif %}" aria-label="{% if field.label %}{{ field.label }}{% elif locale == 'ru' %}Поиск{% else %}Search{% endif %}">
              <span class="input-group-text">
                <kbd>ctrl + K</kbd>
              </span>
            </div>
            {% if toolbar.column_toggles and not ns.chooser_rendered %}{{ column_chooser(toolbar.column_toggles, locale) }}{% set ns.chooser_rendered = true %}{% endif %}
            {% elif field.type == "select" %}
            <select class="form-select form-select-sm" name="{{ field.name }}" {% if field.multi %}multiple{% endif %} onchange="this.form.submit()" aria-label="{{ field.label }}">
              <option value="">{{ field.placeholder|default("", true) }}</option>
              {% for opt in field.options %}<option value="{{ opt.value }}"{% if field.value == opt.value %} selected{% endif %}>{{ opt.label }}</option>{% endfor %}
            </select>
            {% elif field.type == "checkboxes" %}
            <div class="dropdown">
              <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">{{ field.label }}{% if field.selected_count > 0 %}<span class="badge bg-primary ms-1">{{ field.selected_count }}</span>{% endif %}</button>
              <div class="dropdown-menu">
                {% for ch in field.choices %}
                  {% if ch.toggle_href %}<a class="dropdown-item{% if ch.checked %} active{% endif %}" href="{{ ch.toggle_href }}">{% else %}<span class="dropdown-item">{% endif %}
                    {% if ch.checked %}<span class="dropdown-item-icon">&#10003;</span>{% endif %}
                    {{ ch.label }}
                  {% if ch.toggle_href %}</a>{% else %}</span>{% endif %}
                {% endfor %}
              </div>
            </div>
            {% endif %}
          {% endfor %}
          {% if toolbar.column_toggles and not ns.chooser_rendered %}{{ column_chooser(toolbar.column_toggles, locale) }}{% endif %}
          {% if toolbar.entries %}
          <div class="text-secondary small beeui-table-entries">
            {% if locale == 'ru' %}Показать{% else %}Show{% endif %} <select class="form-select form-select-sm d-inline-block w-auto" disabled>
              <option>10</option><option>25</option><option>50</option>
            </select> {% if locale == 'ru' %}записей{% else %}entries{% endif %}
          </div>
          {% endif %}
          {% if toolbar.search %}
          <div class="beeui-table-search">
            <input type="search" class="form-control form-control-sm" placeholder="{% if locale == 'ru' %}Поиск...{% else %}Search...{% endif %}" disabled>
          </div>
          {% endif %}
          {% for action in toolbar.actions %}
            {% if action.href %}<a href="{{ action.href }}" class="btn btn-sm btn-outline-primary">{{ action.label }}</a>{% else %}<span class="btn btn-sm btn-outline-primary disabled">{{ action.label }}</span>{% endif %}
          {% endfor %}
          {% if toolbar.reset and toolbar.reset.href %}<a href="{{ toolbar.reset.href }}" class="btn btn-sm btn-outline-secondary">{{ toolbar.reset.label }}</a>{% endif %}
          {% if toolbar.apply %}<button type="submit" class="btn btn-sm btn-primary">{{ toolbar.apply.label }}</button>{% endif %}
        </form>
      </div>
      {% endif %}
    </div>
  </div>
  {{ caller() }}
  {% if pagination and pagination.pages %}
  <div class="card-footer d-flex justify-content-between align-items-center">
    <div class="text-secondary small">
      {{ pagination.label }}
    </div>
    <nav>
      <ul class="pagination pagination-sm mb-0">
        {% for page in pagination.pages %}
        <li class="page-item{% if page.active %} active{% endif %}">
          <a class="page-link" href="{{ page.href }}">{{ page.label }}</a>
        </li>
        {% endfor %}
      </ul>
    </nav>
  </div>
  {% endif %}
</div>
{% endmacro %}