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

{% if styles is not empty %}
  {% set content %}
    <div id="styles-library" class="overflow-auto">
      {# List of available styles with anchor links. #}
      {% for group_name, group_styles in styles %}
        {% if styles|length > 1 %}
          <h3>{{ group_name }}</h3>
        {% endif %}
        <ul class="nav nav-pills flex-column">
          {% for style in group_styles %}
            <li class="nav-item">
              <a href="#{{ style.id }}" class="nav-link p-1">{{ style.label }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endfor %}
    </div>
  {% endset %}

  <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-styles" aria-controls="menu-styles">
    {{ 'Navigation'|t }}
  </button>
  {{ pattern('offcanvas', {
    variant: 'start',
    offcanvas_id: 'menu-styles',
    backdrop: 'false',
    scroll: true,
    heading_level: 2,
    title: 'Available styles'|t,
    body: content
  }) }}

  <div class="row">
    <div class="col col-12">
      <p>{{ 'Below, you will find a list of CSS properties that can be configured on this website. These properties are configurable at the theme, section, block, block title, and block content levels. Whenever possible, the different values that these properties can take are formatted to illustrate their effect.'|t }}</p>
      <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="#styles-library" data-bs-smooth-scroll="true" tabindex="0" class="col col-12">
      {% for group_styles in styles %}
        {% for style in group_styles %}
          <h3 id="{{ style.id }}" class="display-6">{{ style.label }}</h3>
          {% if style.description %}
            <p>{{ style.description }}</p>
          {% endif %}
          {# External documentation links. #}
          {% if style.render_links %}
            <p>
              {% for renderLink in style.render_links %}
                {{ renderLink|add_class('btn btn-sm btn-primary') }}
              {% endfor %}
            </p>
          {% endif %}
          {% for id, option in style.preview_options %}
            {% set option_attributes = create_attribute()
              .addClass(id)
              .addClass(option.previewed_with) %}
            {% set previewed_as = option.previewed_as %}
            {% set label = option.label %}

            {% if previewed_as == 'aside' %}
              <p>{{ label }} (<code>{{ id }}</code>)</p>
              <div{{ option_attributes }}>{{ 'Example'|t }}</div>
            {% elseif previewed_as == 'hidden' %}
              <p>{{ label }} (<code>{{ id }}</code>)</p>
            {% else %}
              <p{{ option_attributes }}>{{ label }} (<code>{{ id }}</code>)</p>
            {% endif %}

            {% if option.description is not empty %}
              <p>{{ option.description }}</p>
            {% endif %}
          {% endfor %}
          <hr>
        {% endfor %}
      {% endfor %}
    </div>
  </div>
{% endif %}
