bootstrap5_admin-1.0.1/templates/admin/system-themes-page.html.twig

{#
/**
 * @file
 * Theme override for the Appearance page.
 *
 * Available variables:
 * - attributes: HTML attributes for the main container.
 * - theme_groups: A list of theme groups. Each theme group contains:
 *   - attributes: HTML attributes specific to this theme group.
 *   - title: Title for the theme group.
 *   - state: State of the theme group, e.g. installed or uninstalled.
 *   - themes: A list of themes within the theme group. Each theme contains:
 *     - attributes: HTML attributes specific to this theme.
 *     - screenshot: A screenshot representing the theme.
 *     - description: Description of the theme.
 *     - name: Theme name.
 *     - version: The theme's version number.
 *     - is_default: Boolean indicating whether the theme is the default theme
 *       or not.
 *     - is_admin: Boolean indicating whether the theme is the admin theme or
 *       not.
 *     - notes: Identifies what context this theme is being used in, e.g.,
 *       default theme, admin theme.
 *     - incompatible: Text describing any compatibility issues.
 *     - module_dependencies: A list of modules that this theme requires.
 *     - operations: A list of operation links, e.g., Settings, Enable, Disable,
 *       etc. these links should only be displayed if the theme is compatible.
 *
 * @see template_preprocess_system_themes_page()
 */
#}
<div{{ attributes }}>
  {% for theme_group in theme_groups %}
    {% set theme_group_classes = [
      'system-themes-list',
      'system-themes-list-' ~ theme_group.state,
    ] %}
    <div{{ theme_group.attributes.addClass(theme_group_classes) }}>
      <h2 class="system-themes-list__header">{{ theme_group.title }}</h2>
      <div class="row row-cols-1 row-cols-md-{{ theme_group.state == 'installed'? 2 : 4 }} g-4">
        {% for theme in theme_group.themes %}
          <div class="col">
            {% set theme_classes = [
              theme.is_default ? 'theme-default',
              theme.is_admin ? 'theme-admin',
              'card'
            ] %}
            <div{{ theme.attributes.addClass(theme_classes) }}>
              {% if theme_group.state == 'installed' %}
              <div class="row g-0">
                <div class="col-md-4">
                  {% endif %}
                  {% if theme.screenshot %}
                    {% set screenshot = theme.screenshot|render %}
                    {{ screenshot|replace({'"screenshot"': '"card-img-top"'})|raw }}
                  {% endif %}
                  {% if theme_group.state == 'installed' %}
                </div>
                <div class="col-md-8">
                  {% endif %}
                  <div class="card-body theme-info">
                    <h3 class="card-title theme-info__header">
                      {{- theme.name }} {{ theme.version -}}
                      {% if theme.notes %}
                        ({{ theme.notes|safe_join(', ') }})
                      {%- endif -%}
                    </h3>
                    <div class="card-text theme-info__description">{{ theme.description }}</div>
                  </div>
                  {% if theme.module_dependencies %}
                    <div class="card-footer theme-info__requires">
                      {{ 'Requires: @module_dependencies'|t({ '@module_dependencies': theme.module_dependencies|render }) }}
                    </div>
                  {% endif %}
                  {# Display operation links if the theme is compatible. #}
                  {% if theme.incompatible %}
                    <div class="card-footer text-muted incompatible">{{ theme.incompatible }}</div>
                  {% else %}
                    <div class="card-footer">
                      {{ theme.operations }}
                    </div>
                  {% endif %}
                  {% if theme_group.state == 'installed' %}
                </div>
              </div>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endfor %}
</div>