{#
/**
 * @file
 * Theme override of grouped status report requirements.
 *
 * - grouped_requirements: Contains grouped requirements.
 *   Each group contains:
 *   - title: The title of the group.
 *   - type: The severity of the group.
 *   - items: The requirement instances.
 *     Each requirement item contains:
 *     - title: The title of the requirement.
 *     - value: (optional) The requirement's status.
 *     - description: (optional) The requirement's description.
 *     - severity_title: The title of the severity.
 *     - severity_status: Indicates the severity status.
 */
#}

<div class="row">
  {% for group in grouped_requirements %}
    <div class="col s12 m12">
      <h2 class="small-header" id="{{ group.type }}">{{ group.title }}</h3>
      <ul class="system-status-report__entry collapsible">
      {% for requirement in group.items %}
          {%
            set summary_classes = [
              'system-status-report__status-title',
              group.type in ['warning', 'error', 'checked'] ? 'system-status-report__status-icon system-status-report__status-icon--' ~ group.type
            ]
          %}
          <li{{ create_attribute({'class': summary_classes}) }} role="button">
          <div class="collapsible-header right-arrows">
            {% if requirement.severity_title  %}
              <span class="visually-hidden">{{ requirement.severity_title }}</span>
            {% endif %}
            {{ requirement.title }}
          </div>
          <div class="system-status-report__entry__value collapsible-body ">
            {{ requirement.value }}
            {% if requirement.description %}
              <div class="description">{{ requirement.description }}</div>
            {% endif %}
          </div>
          </li>
      {% endfor %}
      </ul>
    </div>
  {% endfor %}
</div>