{#
/**
 * @file
 * UI Pattern library page template, override this in your theme.
 */
#}

{% if groups is not empty %}

{% set content = include('ui-patterns-overview-quicklinks.html.twig', {groups: groups}, with_context=false) %}
<button class="btn btn-primary position-fixed bottom-0 end-0 mb-2 me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#menu-components" aria-controls="menu-components">
  {{ 'Navigation'|t }}
</button>
{{ include('ui_suite_bootstrap:offcanvas', {
  title: 'Available components'|t,
  body: content,
  variant: 'start',
  offcanvas_id: 'menu-components',
  backdrop: 'false',
  scroll: true,
  heading_level: 2,
}, with_context = false) }}

<div class="row">
  <div class="col col-12">
    <p>{{ 'Below, you will find a list of components that can be used on this website. These components can be used to render most of the entities manipulated in Drupal, whether they are fields, blocks, or even views.'|t }}</p>
    <p>{{ 'For each component, the following details are provided:'|t }}</p>
    <ul>
      <li>{{ 'The slots that make up the component and are available to receive data/Drupal entities.'|t }}</li>
      <li>{{ 'The parameters (props) that allow you to configure its behavior or display.'|t }}</li>
      <li>{{ 'One or more examples of the visual rendering of the component if available.'|t }}</li>
    </ul>
    <p>{{ 'To learn more, refer to the documentation of your design system.'|t }}</p>
    <p><a href="https://getbootstrap.com/docs/5.3/" class="btn btn-sm btn-primary">{{ 'View the design system'|t }}</a></p>
    <hr>
  </div>

  <div data-bs-spy="scroll" data-bs-target="#components-library" data-bs-smooth-scroll="true" tabindex="0" class="col col-12">
  {% for components in groups %}
    {% for component in components %}
      <div class="ui_patterns_component" id="{{ component.id|clean_id }}">
        <h2 class="ui_patterns_component__title my-3">
          <a href="{{ url('ui_patterns_library.single', {provider: component.provider, machineName: component.machineName}) }}"
             class="component__link display-3">{{ component.name }}</a>
        </h2>
        {{ include('ui_suite_bootstrap:accordion', {
          'content': [
            include('ui_suite_bootstrap:accordion_item', {
              'title': 'Metadata'|t,
              'content': include('ui-patterns-component-metadata.html.twig', {component: component}, with_context=false),
            }, with_context = false),
            include('ui_suite_bootstrap:accordion_item', {
              'title': 'Structure'|t,
              'content': include('ui-patterns-component-table.html.twig', {component: component}, with_context=false),
            }, with_context = false),
          ],
          'attributes': {
            'class': [
              'mb-4',
            ],
          },
          'variant': 'default',
          'keep_open': true,
        }, with_context = false) }}
        {% if component.stories %}
          {{ include('ui-patterns-stories-compact.html.twig', {component: component}, with_context: false) }}
        {% endif %}
      </div>
      <hr class="my-4">
    {% endfor %}
  {% endfor %}
   </div>
</div>
{% endif %}
