{#
/**
 * @file
 * Default theme implementation for the modules listing page.
 *
 * Displays a list of all packages in a project.
 *
 * Available variables:
 * - modules: Contains multiple module instances. Each module contains:
 *   - attributes: Attributes on the row.
 *   - checkbox: A checkbox for enabling the module.
 *   - name: The human-readable name of the module.
 *   - id: A unique identifier for interacting with the details element.
 *   - enable_id: A unique identifier for interacting with the checkbox element.
 *   - description: The description of the module.
 *   - machine_name: The module's machine name.
 *   - version: Information about the module version.
 *   - requires: A list of modules that this module requires.
 *   - required_by: A list of modules that require this module.
 *   - links: A list of administration links provided by the module.
 *
 * @see template_preprocess_system_modules_details()
 *
 * @ingroup themeable
 */
#}
<table class="responsive-enabled" data-striping="1">
  <thead>
  <tr>
    <th class="checkbox visually-hidden">{{ 'Installed'|t }}</th>
    <th class="name visually-hidden">{{ 'Name'|t }}</th>
    <th class="description visually-hidden priority-low">{{ 'Description'|t }}</th>
  </tr>
  </thead>
  <tbody>
  {% for module in modules %}
    {% set zebra = cycle(['odd', 'even'], loop.index0) %}
    <tr{{ module.attributes.addClass(zebra) }}>
      <td class="checkbox">
        {{ module.checkbox }}
      </td>
      <td class="module">
        <label id="{{ module.id }}" for="{{ module.enable_id }}" class="module-name table-filter-text-source">{{ module.name }}</label>
      </td>
      <td class="description expand priority-low">
        <details class="js-form-wrapper form-wrapper" id="{{ module.enable_id }}-description">
          <summary aria-controls="{{ module.enable_id }}-description" role="button" aria-expanded="false"><span class="text module-description">{{ module.description }}</span></summary>
          <div class="details-wrapper">
            <div class="details-description">
              <div class="requirements">
                <div class="admin-requirements">{{ 'Machine name: <span dir="ltr" class="module-machine-name table-filter-text-source">@machine-name</span>'|t({'@machine-name': module.machine_name }) }}</div>
                {% if module.version %}
                  <div class="admin-requirements">{{ 'Version: @module-version'|t({'@module-version': module.version }) }}</div>
                {% endif %}
                {% if module.requires %}
                  <div class="admin-requirements requires">{{ 'Requires: @module-list'|t({'@module-list': module.requires }) }}</div>
                {% endif %}
                {% if module.required_by %}
                  <div class="admin-requirements required-by">{{ 'Required by: @module-list'|t({'@module-list': module.required_by }) }}</div>
                {% endif %}
                {% if module.path %}
                  <div class="admin-requirements module-path">{{ 'Module path: @module-list'|t({'@module-list': module.path }) }}</div>
                {% endif %}
              </div>
              {% if module.links %}
                <div class="links">
                  {% for link_type in ['help', 'permissions', 'configure'] %}
                    {{ module.links[link_type] }}
                  {% endfor %}
                </div>
              {% endif %}
            </div>
          </div>
        </details>
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>