{% load i18n static django_grid_view %}
{% if load_styles or load_scripts %}
{% include "django_grid_view/assets.html" %}
{% endif %}
{% if config.wrapper == "full" %}
<div class="cm-simple-wrapper cm-layout-{{ config.layout }}" id="cm-table-{{ config.grid_id }}" data-grid-id="{{ config.grid_id }}" data-search-mode="{{ config.search_mode }}"{% if column_settings %} data-cm-column-settings="1" data-cm-columns="{{ column_meta_json|force_escape }}" data-cm-groups-order="{{ column_groups_order_json|force_escape }}" data-cm-presets="{{ ag_grid_presets|force_escape }}" data-cm-preferences-url="{{ preferences_url }}"{% endif %}>
{% elif config.wrapper == "shell" %}
<div class="cm-table-shell cm-layout-{{ config.layout }}" id="cm-table-{{ config.grid_id }}" data-grid-id="{{ config.grid_id }}" data-search-mode="{{ config.search_mode }}"{% if column_settings %} data-cm-column-settings="1" data-cm-columns="{{ column_meta_json|force_escape }}" data-cm-groups-order="{{ column_groups_order_json|force_escape }}" data-cm-presets="{{ ag_grid_presets|force_escape }}" data-cm-preferences-url="{{ preferences_url }}"{% endif %}>
{% endif %}

  {% if config.show_toolbar %}
  {% if config.wrapper == "full" or config.toolbar_left or config.toolbar_center or config.search_mode != "disabled" or config.export_xlsx_url or config.export_pdf or column_settings %}
  <div class="cm-toolbar{% if config.wrapper == 'inner' %} cm-toolbar-meta{% elif config.toolbar_left or config.toolbar_center %} cm-toolbar-extended{% endif %}">
    {% if config.toolbar_left %}
    <div class="cm-toolbar-slot cm-toolbar-left">{{ config.toolbar_left }}</div>
    {% endif %}
    {% if config.search_mode != "disabled" %}
    <input type="text" data-cm-search class="cm-search-input" placeholder="{% if config.search_placeholder %}{{ config.search_placeholder }}{% else %}{% translate 'tables.search' %}{% endif %}">
    {% endif %}
    {% if config.toolbar_center %}
    <div class="cm-toolbar-slot cm-toolbar-center">{{ config.toolbar_center }}</div>
    {% endif %}
    {% if config.show_counter %}
    <span class="cm-counter"><span data-cm-count data-cm-count-for="{{ config.grid_id }}">{{ count }}</span> {% translate 'tables.records' %}</span>
    {% endif %}

    <div class="cm-export-group{% if config.export_xlsx_url and config.export_pdf %} cm-export-group--paired{% endif %}">
      {% if column_settings %}
      {% render_django_grid_view_gear config.grid_id %}
      {% endif %}
      {% if config.export_xlsx_url %}
      {% include "django_grid_view/partials/export_xlsx_link.html" with href=config.export_xlsx_url grid_id=config.grid_id %}
      {% endif %}
      {% if config.export_pdf %}
      {% include "django_grid_view/partials/export_pdf_link.html" with href=config.export_pdf_url grid_id=config.grid_id %}
      {% endif %}
    </div>
  </div>
  {% endif %}
  {% endif %}

  <div class="cm-table-viewport">
  <table class="cm-table{% if config.striped %} cm-striped{% endif %}{% if config.th_header_actions == "stack-hover" %} cm-table--th-stack-hover{% endif %}" data-cm-table data-cm-col-filters="1"{% if config.wrapper == "inner" %} id="cm-table-inner-{{ config.grid_id }}"{% endif %}{% if config.column_groups %} data-cm-grouped-headers="1"{% endif %}{% if config.th_header_actions != "inline" %} data-cm-th-actions="{{ config.th_header_actions }}"{% endif %}>
    <thead>
      {% for hrow in header_rows %}
      <tr>
        {% for h in hrow %}
        <th
          data-cm-align="{{ h.align }}"
          {% if h.key %}data-cm-sort="{{ h.key }}" data-cm-col-key="{{ h.key }}"{% endif %}
          {% if h.column_filter %}data-cm-column-filter="{{ h.column_filter }}"{% endif %}
          {% if h.filter_match %}data-cm-filter-match="{{ h.filter_match }}"{% endif %}
          {% if h.group_keys %}data-cm-col-group="1" data-cm-col-group-keys="{{ h.group_keys }}"{% endif %}
          {% if h.group_id %}data-cm-col-group-id="{{ h.group_id }}"{% endif %}
          {% if h.col_index != None %}data-cm-col="{{ h.col_index }}"{% endif %}
          {% if h.wrap %}data-cm-wrap="1"{% endif %}
          {% if h.hide %}data-cm-default-hide="1"{% endif %}
          {% if h.colspan > 1 %}colspan="{{ h.colspan }}"{% endif %}
          {% if h.rowspan > 1 %}rowspan="{{ h.rowspan }}"{% endif %}
          {% if h.width %}style="width:{{ h.width }}"{% endif %}
          class="cm-th-filterable{% if h.hide %} cm-col-hidden{% endif %}">
          {% if h.key %}
          <div class="cm-th-inner">
            <span class="cm-th-label">{{ h.label }}</span>
            <div class="cm-th-rails cm-th-actions-row">
              <span class="cm-th-rail cm-th-rail--left">
                <span class="cm-th-icon-slot cm-th-header-tools" data-cm-th-tools aria-hidden="true"></span>
                {% if h.sortable %}
                <span class="cm-th-icon-slot">
                  <button type="button" class="cm-sort-trigger" aria-label="{% translate 'column_filter.sort' %}">
                    <span class="cm-sort-arrow">&#8679;</span>
                  </button>
                </span>
                {% endif %}
              </span>
              <span class="cm-th-rail cm-th-rail--right">
                {% if h.column_filter != "nosearch" %}
                <span class="cm-th-icon-slot cm-th-icon-slot--filter">
                  <button type="button" class="cm-col-filter-btn" data-cm-col-filter-trigger aria-label="{% translate 'column_filter.open' %}" title="{% translate 'column_filter.tooltip' %}">
                    <svg class="cm-col-filter-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
                  </button>
                  <button type="button" class="cm-col-filter-clear" data-cm-col-filter-clear aria-label="{% translate 'column_filter.clear' %}" title="{% translate 'column_filter.clear' %}">
                    <svg class="cm-col-filter-clear-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                  </button>
                </span>
                {% endif %}
              </span>
            </div>
          </div>
          {% else %}
          <span class="cm-th-group-label">{{ h.label }}</span>{% if h.sortable %} <span class="cm-sort-arrow">&#8679;</span>{% endif %}
          {% endif %}
        </th>
        {% endfor %}
      </tr>
      {% endfor %}
    </thead>
    <tbody>
      {% for row in rows %}
      {% if row.section_header %}
      <tr class="cm-row-section">
        {% if row.section_cells %}
          {% for cell in row.section_cells %}
          <td
            data-cm-col="{{ cell.col_index }}"
            data-cm-col-key="{{ cell.col_key }}"
            data-cm-align="{{ cell.align }}"
            class="{{ cell.css_class }}{% if cell.hide %} cm-col-hidden{% endif %}"
            data-cm-sort-val="{{ cell.sort_val }}"
            data-cm-export-raw="{{ cell.export_raw }}"
            {% for k, v in cell.attrs.items %}{{ k }}="{{ v }}" {% endfor %}>
            {{ cell.html }}
          </td>
          {% endfor %}
        {% else %}
          <td colspan="{{ row.section_colspan|default:config.columns|length }}">{{ row.section_header }}</td>
        {% endif %}
      </tr>
      {% else %}
      <tr class="cm-row{% if row.row_class %} {{ row.row_class }}{% endif %}"
        {% if row.url %}data-cm-row-url="{{ row.url }}"{% endif %}
        {% if row.chart_row_json %}data-cm-chart-row="{{ row.chart_row_json|force_escape }}"{% endif %}
        {% if row.onclick %}onclick="{{ row.onclick }}"{% endif %}>
        {% for cell in row.cells %}
        <td
          data-cm-col="{{ cell.col_index }}"
          data-cm-col-key="{{ cell.col_key }}"
          data-cm-align="{{ cell.align }}"
          class="{{ cell.css_class }}{% if cell.hide %} cm-col-hidden{% endif %}"
          data-cm-sort-val="{{ cell.sort_val }}"
          data-cm-export-raw="{{ cell.export_raw }}"
          {% for k, v in cell.attrs.items %}{{ k }}="{{ v }}" {% endfor %}>
          {{ cell.html }}
        </td>
        {% endfor %}
      </tr>
      {% endif %}
      {% empty %}
      <tr data-cm-table-empty-server>
        <td colspan="{{ config.columns|length }}" class="cm-empty">
          {% if config.empty_message %}{{ config.empty_message }}{% else %}{% translate "tables.empty" %}{% endif %}
        </td>
      </tr>
      {% endfor %}
      {% if rows %}
      <tr data-cm-table-empty hidden>
        <td colspan="{{ config.columns|length }}" class="cm-empty">{% translate "tables.empty" %}</td>
      </tr>
      {% endif %}
    </tbody>
    {% if footer_cells %}
    <tfoot>
      <tr>
        {% for cell in footer_cells %}
        <td data-cm-align="{{ cell.align }}" {% if cell.colspan > 1 %}colspan="{{ cell.colspan }}"{% endif %}{% if cell.col_key %} data-cm-col-key="{{ cell.col_key }}" data-cm-footer-aggregate="1"{% endif %}{% if cell.export_raw %} data-cm-export-raw="{{ cell.export_raw }}"{% endif %}>{{ cell.html }}</td>
        {% endfor %}
      </tr>
    </tfoot>
    {% endif %}
  </table>
  </div>
  <div class="cm-col-filter-portal is-hidden" data-cm-col-filter-portal data-cm-col-filter-table="{{ config.grid_id }}" aria-hidden="true">
    <div class="cm-col-filter-set-host" data-cm-col-filter-set-host hidden></div>
    <div class="cm-col-filter-expr-row">
      <input
        type="search"
        class="cm-col-filter-input"
        data-cm-col-filter-input
        autocomplete="off"
        placeholder="{% translate 'column_filter.placeholder' %}"
      >
      {% include "django_grid_view/partials/search_syntax_help_btn.html" %}
    </div>
  </div>
{% if column_settings %}
{% render_django_grid_view_modal config.grid_id %}
{% endif %}
{% if config.wrapper == "full" or config.wrapper == "shell" %}
</div>
{% endif %}