<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 (search)="onSearch($event)"></ecl-site-header-search>
        </ecl-site-header-action>

        <ecl-menu (menuItemSelect)="onMenuItemSelected($event)">
            <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>
            <ecl-breadcrumb-segment>Home</ecl-breadcrumb-segment>
            <ecl-breadcrumb-segment>European Commission</ecl-breadcrumb-segment>
            <ecl-breadcrumb-segment [isCurrentPage]="true">ECL</ecl-breadcrumb-segment>
        </ecl-breadcrumb>

        <div eclPageHeaderMeta>
            <span eclPageHeaderMetaItem>
                Auto generated template
            </span>
        </div>
        <h1 eclPageHeaderTitle>Europa Component Library</h1>
        <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>

    <ecl-site-footer>
        <div eclSiteFooterRow>
            <div eclSiteFooterColumn>
                <div eclSiteFooterSection>
                    <h2 eclSiteFooterTitle>
                        <a eclLink
                            variant="standalone"
                            eclSiteFooterTitleLink
                            routerLink="/">Site name
                        </a>
                    </h2>
                    <div eclSiteFooterDescription>
                        This site is managed by <a routerLink="/" eclLink variant="standalone">site owner name</a>
                        and is an official website of the European Union
                    </div>
                </div>
            </div>
            <div eclSiteFooterColumn>
                <div eclSiteFooterSection>
                    <h2 eclSiteFooterTitle
                        [isSeparator]="true">
                        Contact site name
                    </h2>
                    <ul eclSiteFooterList>
                        <li eclSiteFooterListItem>
                            <a eclLink
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                Link
                            </a>
                        </li>
                    </ul>
                </div>
                <div eclSiteFooterSection>
                    <h2 eclSiteFooterTitle
                        [isSeparator]="true">
                        Follow us
                    </h2>
                    <ul eclSiteFooterList
                        [isInline]="true">
                        <li eclSiteFooterListItem>
                            <a eclLink
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                <span eclLinkLabel>Social 1</span>
                            </a>
                        </li>
                        <li eclSiteFooterListItem>
                            <a eclLink
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                <span eclLinkLabel>Social 2</span>
                            </a>
                        </li>
                        <li eclSiteFooterListItem>
                            <a eclLink
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                <span eclLinkLabel>Social 3</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div eclSiteFooterColumn>
                <div eclSiteFooterSection>
                    <h2 eclSiteFooterTitle
                        [isSeparator]="true">
                        Optional links
                    </h2>
                    <ul eclSiteFooterList>
                        <li eclSiteFooterListItem>
                            <a eclLink
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                {{ 'ecl.footer.ACCESSIBILITY' | translate }}
                            </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>
    </ecl-site-footer>
</ecl-app>
