{#
/**
 * @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.
 *
 * @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,
        'clearfix',
      ]
    %}
   <div class="row"><h2 class="small-header col s12">{{ theme_group.title }}</h2></div>
    <div{{ theme_group.attributes.addClass(theme_group_classes) }}>
      
      {% for theme in theme_group.themes %}
        {%
          set theme_classes = [
            theme.is_default ? 'theme-default',
            theme.is_admin ? 'theme-admin',
            'theme-selector',
            'col',
            's12',
            'm6',
            'l4',
            'xl3'
          ]
        %}
        <div{{ theme.attributes.addClass(theme_classes) }}>
          <div class="card large sticky-action">
                         {% if theme.notes and theme.is_admin %}
                 <span class="theme-status-indicator"> <i class="material-icons">edit</i> {{ theme.notes|safe_join(', ') }}</span>
                {% endif %}
              {% if theme.notes and theme.is_default %}
                 <span class="theme-status-indicator"><i class="material-icons">star</i> {{ theme.notes|safe_join(', ') }}</span>
              {%- endif -%}
            <div class="card-image waves-effect waves-block waves-light">
              {% if theme.screenshot %} <span class="activator">{{ theme.screenshot}}</span> {% endif %}
            </div>
            <div class="card-content theme-info">
              <span class="card-title activator grey-text text-darken-4"><span class="theme-name">{{- theme.name }}</span><i class="material-icons right" aria-hidden="true">more_vert</i></span>
            </div>
            <div class="card-reveal">
              <span class="card-title grey-text text-darken-4">{{- theme.name }}<i class="material-icons right" aria-hidden="true">close</i></span>
              <p>{{ theme.description }}</p>
              <p> {{ theme.version -}} </p>
            </div>
            <div class="card-action">
              {# Display operation links if the theme is compatible. #} 
              {% if theme.incompatible %}
              <div class="incompatible">{{ theme.incompatible }}</div>
              {% else %} {{ theme.operations }} {% endif %}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% endfor %}
</div>