{#
/**
 * @file
 * UI Pattern library page template, override this in your theme.
 */
#}
 {% if groups is not empty %}
   <div class="grid-row grid-gap-4">
     <div class="grid-col-8">
       <hr>
       {% for group_name, components in groups %}
         <div class="ui_patterns_component">
           <h2 class="ui_patterns_component__title">
             {{ group_name }}
           </h2>
           <div class="usa-accordion usa-accordion--bordered pattern-preview">
             {% for component in components %}
               <h2 class="usa-accordion__heading">
                 <button type="button" class="usa-accordion__button ui_patterns_component"
                         aria-expanded="false"
                         aria-controls="pattern_item-{{ component.name|lower }}"
                         id="{{ component.id }}">
                   {{ component.name }}
                 </button>
               </h2>
               <div id="pattern_item-{{ component.name|lower }}" class="usa-accordion__content usa-prose">

                 {# Link to standalone pattern preview page. #}
                 <p class="margin-y-2">
                   <a
                     href="{{ url('ui_patterns_library.single', {'provider': component.provider, 'machineName': component.machineName }) }}"
                     class="component__link">View {{ component.name }} as stand-alone</a>
                 </p>

                 {{ include('ui-patterns-component-metadata.html.twig', {'component': component}, with_context = false) }}
                 {{ include('ui-patterns-component-table.html.twig', {'component': component}, with_context = false) }}
                 {% if component.stories %}
                   {{ include('ui-patterns-stories-compact.html.twig', {'component': component}, with_context = false) }}
                 {% endif %}
               </div>
             {% endfor %}
           </div>
         </div>
       {% endfor %}
     </div>
     <div class="grid-col-auto">
       {{ include('ui-patterns-overview-quicklinks.html.twig', {'groups': groups}, with_context = false) }}
     </div>
   </div>
 {% endif %}
