{namespace fsc=Sitegeist\FluidStyleguide\Components}
{namespace fsv=Sitegeist\FluidStyleguide\ViewHelpers}

<f:layout name="Styleguide" />

<f:section name="Header">
    <div class="actions">
        <f:comment>
            <f:if condition="{styleguideConfiguration.Features.Languages}">
                <fsc:Atom.languageNavigation listView="1" languages="{styleguideConfiguration.languages}" />
            </f:if>
        </f:comment>
        <f:if condition="{styleguideConfiguration.Features.ResponsiveBreakpoints}">
            <fsc:Atom.viewportNavigation listView="1" viewPorts="{styleguideConfiguration.responsiveBreakpoints}" />
        </f:if>
    </div>
</f:section>


<f:section name="Content">
    <div class="fluidStyleguideList">
        <div class="fluidStyleguideIntro">
            <h1 class="fluidStyleguideTitle">{styleguideConfiguration.brandingTitle}</h1>
            <fsv:format.markdown>{styleguideConfiguration.brandingIntro}</fsv:format.markdown>
        </div>

        <div id="components"></div>
        <f:for each="{packages}" as="components" key="namespace">
            <div class="fluidStyleguidePackageItem">
                <h2 class="fluidStyleguidePackageName">Package: {namespace}</h2>
                <div class="fluidStyleguideComponent-items">
                    <f:for each="{components}" as="component">
                        <f:variable name="iframeUri" value="{fsv:uri.styleguide(
                            action: 'component',
                            arguments: {component: component.name.identifier}
                        )}" />
                        <div class="fluidStyleguideComponentVariants">
                            <div class="fluidStyleguideComponentExample">
                                <h3 class="fluidStyleguideComponentName">{component.name.displayName}</h3>
                                <div class="fluidStyleguideListIframeWrapper">
                                    <iframe class="fluidStyleguideComponent iframeResize" src="{iframeUri}" loading="lazy"></iframe>
                                </div>
                                <a href="{fsv:uri.styleguide(action: 'show', arguments: {component: component.name.identifier})}" class="fluidStyleguideBtn">
                                    <span>Show</span>
                                </a>
                            </div>
                        </div>
                    </f:for>
                </div>
            </div>
        </f:for>
    </div>

    <fsc:atom.styleguideScrollTop class="blue"/>

</f:section>