<% content_for :javascript do %>
<script>
const SUPERTABLE_WORKER_FILE = "<%= javascript_path 'supertable3_worker' %>";
let GLOBAL_SUPERTABLE_INSTANCE = null;
</script>

<%= javascript_include_tag 'bundles/modal_popup' %>
<%= javascript_include_tag 'bundles/supertable3' %>
<%= javascript_include_tag 'i18n/supertable3' %>
<% end %>

<%= render 'shared/supertable_controls' %>
<div class="superTable" id="tableGroups"></div>

<% content_for :post_load_javascript do %>
<script>
"use strict;"

<%= render :partial => 'shared/group_tables_common.js' %>

const DEFAULT_COLUMNS = ["name", "abbr", "type", "members_count", "eid"];
const DEFAULT_SORTING = { column: "name", dir: ST.SortOrder.ASCENDING };

document.addEventListener("DOMContentLoaded", function() {
    modalPopup.setupGlobalEvents();

    GLOBAL_SUPERTABLE_INSTANCE = new ST.SuperTable(
        // Main container DIV
        document.getElementById("tableGroups"),

        // Settings
        {
            id: "orgGroups",
            locale: "<%= supertable_sorting_locale %>",
            csvPrefix: `<%= LdapOrganisation.current.o %>-<%= @school.cn %>-groups`,
            columnDefinitions: COLUMN_DEFINITIONS,
            columnOrder: COLUMN_ORDER,
            actions: userActions,
            openCallback: openCallback,
            massSelects: MASS_SELECTS,
            massOperations: MASS_OPERATIONS,
            massOperationsEndpoint: "<%= groups_mass_operations_path %>",
            defaultColumns: DEFAULT_COLUMNS,
            defaultSorting: DEFAULT_SORTING,
            dynamicData: "/users/<%= @school.id %>/get_school_groups_list",
        }
    );
});

</script>
<% end %>

<% content_for :tools do %>
<ul>
  <li>
    <%= link_to new_group_path(@school), class: 'btn' do %>
      <i class='icon-plus'></i><%= t('link.new_group') %>
    <% end %>
  </li>
</ul>
<% end %>
