<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)" 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>
            <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 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>

    <ecl-site-footer>
        <div eclSiteFooterRow>
            <div eclSiteFooterColumn>
                <div eclSiteFooterSection isSiteInfo>
                    <div eclSiteFooterTitle>
                        <a  eclLink
                            variant="standalone"
                            eclSiteFooterTitleLink
                            routerLink="/">Site name
                        </a>
                    </div>
                    <div eclSiteFooterDescription>This site is managed by the Directorate-General for &quot;DG
                        identification&quot;
                    </div>
                </div>
            </div>
            <div eclSiteFooterColumn>
                <div eclSiteFooterSection>
                    <div eclSiteFooterTitle
                        [isSeparator]="true">
                        Contact us
                    </div>
                    <ul eclSiteFooterList>
                        <li eclSiteFooterListItem>
                            <a eclLink
                                isInverted
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                {{ 'ecl.footer.CONTACT-INFO-DG' | translate }}
                            </a>
                        </li>
                    </ul>
                </div>
                <div eclSiteFooterSection>
                    <div eclSiteFooterTitle
                        [isSeparator]="true">
                        Follow us on
                    </div>
                    <ul eclSiteFooterList
                        [isInline]="true">
                        <li eclSiteFooterListItem>
                            <a  eclLink
                                isInverted
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                <ecl-icon iconSet="social-media"
                                    icon="facebook-negative"
                                    size="xs">
                                </ecl-icon>
                                <span eclLinkLabel>Facebook</span>
                            </a>
                        </li>
                        <li eclSiteFooterListItem>
                            <a eclLink
                                isInverted
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                <ecl-icon iconSet="social-media"
                                    icon="twitter-negative"
                                    size="xs">
                                </ecl-icon>
                                <span eclLinkLabel>Twitter</span>
                            </a>
                        </li>
                        <li eclSiteFooterListItem>
                            <a eclLink
                                isInverted
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                <ecl-icon iconSet="social-media"
                                    icon="linkedin-negative"
                                    size="xs">
                                </ecl-icon>
                                <span eclLinkLabel>Linkedin</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div eclSiteFooterColumn>
                <div eclSiteFooterSection>
                    <div eclSiteFooterTitle
                        [isSeparator]="true">
                        {{ 'ecl.footer.ABOUT-US' | translate }}
                    </div>
                    <ul eclSiteFooterList>
                        <li eclSiteFooterListItem>
                            <a eclLink
                                isInverted
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                {{ 'ecl.footer.INFO-ABOUT-DG' | translate }}
                            </a>
                        </li>
                    </ul>
                </div>
                <div eclSiteFooterSection>
                    <div eclSiteFooterTitle
                        [isSeparator]="true">
                        {{ 'ecl.footer.RELATED-SITES' | translate }}
                    </div>
                    <ul eclSiteFooterList>
                        <li eclSiteFooterListItem>
                            <a eclLink
                                isInverted
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                Related link 1
                            </a>
                        </li>
                        <li eclSiteFooterListItem>
                            <a eclLink
                                isInverted
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                Related link 2
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div eclSiteFooterRow>
            <div eclSiteFooterColumn>
                <div eclSiteFooterSection
                    [isCondensed]="true">
                    <div eclSiteFooterContent>{{ 'ecl.footer.MORE-INFO' | translate }}:</div>
                    <ul eclSiteFooterList>
                        <li eclSiteFooterListItem>
                            <a eclLink
                                isInverted
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                Class name 1
                            </a>
                        </li>
                        <li eclSiteFooterListItem>
                            <a eclLink
                                isInverted
                                eclSiteFooterLink
                                variant="standalone"
                                routerLink="/">
                                Class name 2
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </ecl-site-footer>
</ecl-app>
