{#
/**
 * @file
 * Adds a custom branded User interface kit inheriting styles from your theme.
 *
 * Available variables:
 * - All variables inherited from page.html.twig
 * - dev_mode: Allows developers to view code on how to implement a given element. (config)
 * - glossary: Declares sections in the sidebar.
 */
#}
{{ attach_library('bootstrap_ui_kit/bootstrap-ui-kit') }}

{% if dev_mode %}
  {{ attach_library('bootstrap_ui_kit/bootstrap-ui-kit.highlight-js') }}
{% endif %}

{# Setup our glossary of sections. #}
{% block page %}

  <div class="bootstrap-ui-kit d-flex flex-column flex-lg-row align-items-stretch gap-5">

    {# Tabs #}
    <div class="bootstrap-ui-kit__sidebar col-12 col-lg-2 h-100 overflow-scroll pb-lg-5">
      <div class="nav navbar navbar-expand-lg navbar-dark nav-pills" role="tablist" aria-orientation="vertical">
        <div class="d-flex flex-column w-100 mb-auto">

          {# UI Kit logo/page title #}
          <div class="p-4">
            <div class="d-flex justify-content-between align-items-center">

              {% block logo %}
                <a href="{{ url('<front>') }}" class="text-reset">
                  {{ source('@bootstrap_ui_kit/img/logo.svg') }}
                </a>
              {% endblock %}

              {% if access is same as (true) %}
                {% block navbar_toggler %}
                  <button class="navbar-toggler"
                          type="button"
                          data-bs-toggle="collapse"
                          data-bs-target="#bootstrap-ui-kit__nav"
                          aria-controls="bootstrap-ui-kit__nav"
                          aria-expanded="false"
                          aria-label="{{ 'Toggle navigation'|t }}">
                    <span class="navbar-toggler-icon"></span>
                  </button>
                {% endblock %}
              {% endif %}

            </div>
            <p class="mt-3 fw-lighter">
              {% if access is same as (true) %}
                {{ page['#title'] }}
                {% if dev_mode %}
                  <span
                    class="badge rounded-pill bg-light text-light bg-opacity-25 fw-normal ms-1">{{ 'Dev mode'|t }}</span>
                {% endif %}
              {% else %}
                {{ 'UI Kit Library'|t }}
              {% endif %}
            </p>
          </div>

          {% if access is same as (true) %}
            <div class="collapse navbar-collapse" id="bootstrap-ui-kit__nav">
              <ul class="list-unstyled list-style-lower-roman bootstrap-ui-kit__glossary w-100 mb-auto">
                {% for group_id, group_data in glossary %}
                  <li class="mb-4">
                    <strong class="d-block mb-3 px-4 gap-1 {{ not loop.first ? 'pt-4' }}">
                      {{ group_data.title|default(group_id|capitalize) }}
                    </strong>

                    {% if group_data.sections %}
                      {% for section_id, section_data in group_data.sections %}
                        {% set is_first = loop.parent.loop.first and loop.first %}
                        <button
                                class="nav-link py-2 px-4 text-start d-block w-100 rounded-0{{ is_first ? ' active' }}"
                                id="{{ section_id }}-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#{{ section_id }}"
                                type="button"
                                role="tab"
                                aria-controls="{{ section_id }}"
                                aria-selected="{{ is_first ? 'true' : 'false' }}">
                          {{ section_data.title }}
                        </button>
                      {% endfor %}
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}

        </div>
      </div>
    </div>
    {# / Tabs #}


    {# Content #}
    <div class="col-12 col-lg offset-lg-2 pt-5">
      <div class="tab-content p-5 pt-0">
        {{ page.content_top }}
        {{ page.highlighted }}
        {{ page.help }}
        {{ page.content }}

        {% if access is same as (true) %}
          {% for group_id, group_data in glossary %}
            {% if group_data.sections %}
              {% for section_id, section_data in group_data.sections %}

                {% set section = {
                  id: section_id,
                  title: section_data.title|default(section_id|replace({'_': ' '})|title),
                  path: 'bootstrap_ui_kit'
                } %}

                <div class="tab-pane fade {{ loop.parent.loop.first and loop.first ? 'show active' }}"
                     id="{{ section.id }}"
                     role="tabpanel"
                     aria-labelledby="{{ section.id }}-tab"
                     tabindex="0">

                  {% include [
                    ('@' ~ (active_theme|default('default')) ~ '/ui-kit/' ~ section.id ~ '/' ~ section.id ~ '.html.twig'),
                    ('@' ~ (base_themes|first|default('default')) ~ '/ui-kit/' ~ section.id ~ '/' ~ section.id ~ '.html.twig'),
                    ('@bootstrap_ui_kit/ui-kit/' ~ section.id ~ '/' ~ section.id ~ '.html.twig'),
                    '@bootstrap_ui_kit/ui-kit/boilerplate/boilerplate.html.twig'
                  ] with {
                    section: section,
                    dev_mode: dev_mode|default(false),
                    active_theme: active_theme|default('default'),
                    key: section_id|default('default'),
                    group_name: group_id|default('default')
                  } %}
                </div>

              {% endfor %}
            {% endif %}
          {% endfor %}
        {% endif %}
      </div>
    </div>
    {# / Content #}

  </div>
{% endblock %}
