<ecl-app>
    <ecl-site-header siteName="Site name">

        <div eclSiteHeaderEnvironment>Environment</div>

        <ecl-site-header-action>
            <ecl-site-header-login [isLoggedIn]="isLoggedIn" (login)="onLogin($event)">
                <p eclSiteHeaderLoginDescription>
                    {{ 'ecl.site-header.LOGGED-IN-AS' | translate }} {{ userInfos?.fullName }}
                </p>
                <hr eclSiteHeaderLoginSeparator />
                <a eclLink variant="standalone" href="#" (click)="onLogout($event)">
                    {{ 'ecl.site-header.LOGOUT' | translate }}
                </a>
            </ecl-site-header-login>

            <ecl-site-header-language></ecl-site-header-language>

            <ecl-site-header-search (searchEvent)="onSearch($event)"></ecl-site-header-search>
        </ecl-site-header-action>

        <ecl-menu (menuItemSelect)="onMenuItemSelected($event)" aria-label="Main navigation">
            <ecl-menu-item label="Home"></ecl-menu-item>
            <ecl-menu-item label="Item 1">
                <ecl-menu-mega>
                    <ecl-menu-mega-item label="Item 1.1"></ecl-menu-mega-item>
                    <ecl-menu-mega-item label="Item 1.2"></ecl-menu-mega-item>
                    <ecl-menu-mega-item label="Item 1.3" [isCurrent]="true"></ecl-menu-mega-item>
                </ecl-menu-mega>

            </ecl-menu-item>

            <ecl-menu-item label="Item 2">
                <ecl-menu-mega>
                    <ecl-menu-mega-item label="Item 2.1"></ecl-menu-mega-item>
                    <ecl-menu-mega-item label="Item 2.2"></ecl-menu-mega-item>
                    <ecl-menu-mega-item label="Item 2.3"></ecl-menu-mega-item>
                </ecl-menu-mega>
            </ecl-menu-item>

            <ecl-menu-item label="Item 3">
                <ecl-menu-mega>
                    <ecl-menu-mega-item label="Item 3.1"></ecl-menu-mega-item>
                    <ecl-menu-mega-item label="Item 3.2"></ecl-menu-mega-item>
                    <ecl-menu-mega-item label="Item 3.3"></ecl-menu-mega-item>
                </ecl-menu-mega>
            </ecl-menu-item>
        </ecl-menu>
    </ecl-site-header>

    <ecl-page-header>
        <ecl-breadcrumb>
            <ol eclBreadcrumbContainer>
                <li eclBreadcrumbSegment>Home</li>
                <li eclBreadcrumbSegment>European Commission</li>
                <li eclBreadcrumbSegment [isCurrentPage]="true">ECL</li>
            </ol>
        </ecl-breadcrumb>

        <div eclPageHeaderInfo>
            <div eclPageHeaderMeta>
                <span eclPageHeaderMetaItem>
                    Auto generated template
                </span>
            </div>
            <h1 eclPageHeaderTitle>Europa Component Library</h1>
        </div>
        <div eclPageHeaderDescriptionContainer>
            <p eclPageHeaderDescription>
                The Europa Component Library (ECL) is a comprehensive style guide containing the design elements and
                visual standards that make up all Europa websites and applications.
            </p>
        </div>
    </ecl-page-header>

    <div class="ecl-u-pv-xl">
        <router-outlet></router-outlet>
    </div>

    <footer eclSiteFooter>
        <div eclSiteFooterRow>
            <div eclSiteFooterColumn>
                <div eclSiteFooterSection variant="site-info">
                    <div eclSiteFooterTitle>
                        <a eclLink variant="standalone" eclSiteFooterTitleLink routerLink="/">
                            <span eclLinkLabel>Site name</span>
                            <ecl-icon icon="arrow-left" size="s" transform="flip-horizontal">
                            </ecl-icon>
                        </a>
                    </div>
                    <div eclSiteFooterDescription>
                        This site is managed by: [name of the manager of the site]
                    </div>
                    <ul eclSiteFooterList>
                        <li eclSiteFooterListItem>
                            <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
                                {{ 'ecl.footer.ACCESSIBILITY-STATEMENT' | translate }}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div eclSiteFooterColumn>
                <div eclSiteFooterSection>
                    <div eclSiteFooterTitle isSeparator>
                        Contact site name
                    </div>
                    <ul eclSiteFooterList>
                        <li eclSiteFooterListItem>
                            <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
                                Link
                            </a>
                        </li>
                    </ul>
                </div>
                <div eclSiteFooterSection>
                    <div eclSiteFooterTitle isSeparator>
                        Follow us
                    </div>
                    <ul eclSiteFooterList isInline>
                        <li eclSiteFooterListItem>
                            <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
                                <ecl-icon iconSet="social-media" icon="facebook" size="xs">
                                </ecl-icon>
                                <span eclLinkLabel>Social 1</span>
                            </a>
                        </li>


                        <li eclSiteFooterListItem>
                            <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
                                <ecl-icon iconSet="social-media" icon="twitter" size="xs">
                                </ecl-icon>
                                <span eclLinkLabel>Social 2</span>
                            </a>
                        </li>
                        <li eclSiteFooterListItem>
                            <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
                                <ecl-icon iconSet="social-media" icon="mastodon" size="xs">
                                </ecl-icon>
                                <span eclLinkLabel>Social 3</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div eclSiteFooterColumn>
                <div eclSiteFooterSection>
                    <div eclSiteFooterTitle isSeparator>
                        Optional links
                    </div>
                    <ul eclSiteFooterList>
                        <li eclSiteFooterListItem>
                            <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
                                Link 1
                            </a>
                        </li>
                        <li eclSiteFooterListItem>
                            <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
                                Link 2
                            </a>
                        </li>
                        <li eclSiteFooterListItem>
                            <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
                                Link 3
                            </a>
                        </li>
                        <li eclSiteFooterListItem>
                            <a eclLink eclSiteFooterLink variant="standalone" routerLink="/">
                                Link 4
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</ecl-app>