<div id="page-wrapper" class="page-wrapper">
	<div id="page">

		{% if page.header or page.primary_menu or page.secondary_menu %}
			<header
				id="header" class="site-header" data-drupal-selector="site-header" role="banner">

				{# Gets fixed by JavaScript at wide widths. #}
				<div class="site-header__fixable" data-drupal-selector="site-header-fixable">
					<div class="site-header__initial">
						<button class="sticky-header-toggle" data-drupal-selector="sticky-header-toggle" role="switch" aria-controls="site-header__inner" aria-label="{{ 'Sticky header'|t }}" aria-checked="false">
							<span class="sticky-header-toggle__icon">
								<span></span>
								<span></span>
								<span></span>
							</span>
						</button>
					</div>

					{# Needs to extend full width so box shadow will also extend. #}
					<div id="site-header__inner" class="site-header__inner" data-drupal-selector="site-header-inner">
						<div class="container site-header__inner__container">

							{{ page.header }}

							{% if page.primary_menu or page.secondary_menu %}
								<div class="mobile-buttons" data-drupal-selector="mobile-buttons">
									<button class="mobile-nav-button" data-drupal-selector="mobile-nav-button" aria-label="{{ 'Main Menu'|t }}" aria-controls="header-nav" aria-expanded="false">
										<span class="mobile-nav-button__label">{{ 'Menu'|t }}</span>
										<span class="mobile-nav-button__icon"></span>
									</button>
								</div>

								<div id="header-nav" class="header-nav" data-drupal-selector="header-nav">
									{{ page.primary_menu }}
									{{ page.secondary_menu }}
								</div>
							{% endif %}
						</div>
					</div>
				</div>
			</header>
		{% endif %}

		<div id="main-wrapper" class="layout-main-wrapper layout-container">
			<div id="main" class="layout-main">
				<div class="main-content">
					<a id="main-content" tabindex="-1"></a>
					{{ page.hero }}
					<div class="main-content__container container">

                        {# =============================================================================================================== #}
                        {# =============================================================================================================== #}

						{# {{ page.highlighted }}
						{{ page.breadcrumb }}
						{% if page.sidebar %}
							<div class="sidebar-grid grid-full">
								<main role="main" class="site-main">
									{{ page.content_above }}
									{{ page.content }}
								</main>
								{{ page.sidebar }}
							</div>
						{% else %}
							<main role="main">
                            {{ page.content_above }}
                            {{ page.content }}
							</main>
						{% endif %}
						{{ page.content_below }} #}


                        <div style="min-height:60vh; display:flex; gap:10px; flex-wrap:wrap; padding-bottom:100px;">
                            <div class="vue-nuxt-ui-example" class="isolate" data-vue-component-type="card"></div>
                            <div class="vue-nuxt-ui-example" class="isolate" data-vue-component-type="calendar"></div>
                            <div class="vue-nuxt-ui-example" class="isolate" data-vue-component-type="color-picker"></div>

                            {% set carousel_items = {
                                data:{
                                    items: [
                                        'https://picsum.photos/640/640?random=1',
                                        'https://picsum.photos/640/640?random=2',
                                        'https://picsum.photos/640/640?random=3',
                                        'https://picsum.photos/640/640?random=4',
                                        'https://picsum.photos/640/640?random=5',
                                        'https://picsum.photos/640/640?random=6'
                                    ]
                                }
                            } %}
                            <div class="vue-nuxt-ui-example" class="isolate" data-vue-component-type="carousel" data-vue-carousel-items="{{ carousel_items|json_encode()}}"></div>

                            {% set avatar_images = {
                                data:{
                                    items: [
                                        {src:"https://github.com/benjamincanac.png",           hover_alt:"Benjamin Canac", chip:"success" },
                                        {src:"https://github.com/romhml.png",                  hover_alt:"Romain Hamel",   chip:"warning" },
                                        {src:"https://github.com/noook.png",                   hover_alt:"Neil Richter",   chip:"error"   },
                                        {src:"https://picsum.photos/200/200?random=123",       hover_alt:"More Name ...",  chip:"info"    },
                                        {src:"https://picsum.photos/200/200?random=124",       hover_alt:"More Name ...",  chip:"info"    },
                                        {src:"https://picsum.photos/200/200?random=125",       hover_alt:"More Name ...",  chip:"info"    },
                                        {src:"https://picsum.photos/200/200?random=126",       hover_alt:"More Name ...",  chip:"info"    },
                                        {src:"https://picsum.photos/200/200?random=127",       hover_alt:"More Name ...",  chip:"info"    },
                                        {src:"https://picsum.photos/200/200?random=128",       hover_alt:"More Name ...",  chip:"info"    },
                                        {src:"https://picsum.photos/200/200?random=129",       hover_alt:"More Name ...",  chip:"info"    },
                                        {src:"https://picsum.photos/200/200?random=130",       hover_alt:"More Name ...",  chip:"info"    },
                                        {src:"https://picsum.photos/200/200?random=131",       hover_alt:"More Name ...",  chip:"info"    },
                                        {src:"https://picsum.photos/200/200?random=132",       hover_alt:"More Name ...",  chip:"info"    },
                                        {src:"https://picsum.photos/200/200?random=133",       hover_alt:"More Name ...",  chip:"info"    },
                                        {src:"https://picsum.photos/200/200?random=134",       hover_alt:"More Name ...",  chip:"info"    },
                                    ]
                                }
                            } %}
                            <div class="vue-nuxt-ui-example" class="isolate" data-vue-component-type="avatar-group" data-vue-avatar-images="{{ avatar_images|json_encode()}}"></div>
                        </div>
                        {{ attach_library("olivero/vue-components") }}


                        {# =============================================================================================================== #}
                        {# =============================================================================================================== #}
					</div>
				</div>
				<div class="social-bar">
					{{ page.social }}
				</div>
			</div>
		</div>

		<footer class="site-footer">
			<div class="site-footer__inner container">
				{{ page.footer_top }}
				{{ page.footer_bottom }}
			</div>
		</footer>

		<div class="overlay" data-drupal-selector="overlay"></div>

	</div>
</div>
