{#
/**
 * @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.
 *     - operations: A list of operation links, e.g., Settings, Enable, Disable,
 *       etc. these links should only be displayed if the theme is compatible.
 *
 * @ingroup templates
 *
 * @see template_preprocess_system_themes_page()
 */
#}
<div{{ attributes.addClass('form-group') }}>
  {% for theme_group in theme_groups %}
    {%
      set theme_group_classes = [
        'system-themes-list',
        'system-themes-list-' ~ theme_group.state,
        'clearfix',
        'panel',
        'panel-default',
      ]
    %}
    <div{{ theme_group.attributes.addClass(theme_group_classes) }}>
      <div class="panel-heading">
        <a class="panel-title" href="#system-themes-list--{{ theme_group.state }}" aria-controls="#system-themes-list--{{ theme_group.state }}" aria-expanded="false" aria-pressed="false" data-toggle="collapse" role="button">
          {{ theme_group.title }} ({{ theme_group.themes|length }})
        </a>
      </div>
      {%
        set table_classes = [
          'table',
          'panel-collapse',
          theme_group.state == 'uninstalled' ? 'collapse',
          'fade',
          theme_group.state != 'uninstalled' ? 'in',
      ]
      %}
      <table id="system-themes-list--{{ theme_group.state }}" class="{{ table_classes|join(' ')}}">
        {% for theme in theme_group.themes %}
          {%
            set theme_classes = [
              theme.is_default ? 'theme-default',
              theme.is_admin ? 'theme-admin',
              'theme-selector',
              'clearfix',
            ]
          %}
          <tr{{ theme.attributes.addClass(theme_classes) }}>
            <td class="col-sm-3">
              {% if theme.screenshot %}
                {{ theme.screenshot }}
              {% endif %}
            </td>
            <td class="theme-info col-sm-9">
              <h4 class="theme-info__header">
                {{- theme.name }} {{ theme.version -}}
                {% if theme.notes %}
                  ({{ theme.notes|safe_join(', ') }})
                {%- endif -%}
              </h4>
              <div class="theme-info__description help-block">{{ theme.description }}</div>
              {# Display operation links if the theme is compatible. #}
              {% if theme.incompatible %}
                <div class="incompatible">{{ theme.incompatible }}</div>
              {% else %}
                {{ theme.operations }}
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      </table>
    </div>
  {% endfor %}
</div>