<head>
    <link href="https://fonts.googleapis.com/css2?family=Podkova:wght@400;700&display=swap" rel="stylesheet">
</head>

<div class="footer">
    <!--    Logo and copyrights-->
    <div class="rights">
        <img class="sandkasten-logo" routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
            [src]="sandkasten_logo" alt="Logo-Sandkasten" />
        <div class="title">Sandkasten</div>
        <div class="copyright">{{ 'FooterPage.Rights' | translate}}</div>
    </div>

    <!--    Navigation-->
    <div class="navigation">
        <div class="about">
            <span class="title">{{ 'FooterPage.About' | translate}}</span>
            <div class="links">
                <!-- TODO - Add the router links -->
                <a routerLink="our_story" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{
                    'FooterPage.Story' | translate}}</a>
                <a routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{
                    'FooterPage.Contact' | translate}}</a>
            </div>
        </div>

        <div class="legals">
            <span class="title">{{ 'FooterPage.Legal' | translate}}</span>
            <div class="links">
                <a routerLink="terms_of_service" routerLinkActive="active"
                    [routerLinkActiveOptions]="{ exact: true }">{{ 'FooterPage.Terms' | translate}}</a>
                <a routerLink="privacy_policy" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{
                    'FooterPage.Privacy' | translate}}</a>
            </div>
        </div>
    </div>

    <!--    Socials-->
    <div class="socials">
        <!--        TODO - Add the socials icons-->
        <a href="https://twitter.com/Sandkasten3a">
            <img class="tiwtter-logo" class="image" routerLink="" routerLinkActive="active"
                [routerLinkActiveOptions]="{ exact: true }" [src]="twitter_logo" alt="Logo-Twitter" />
        </a>

        <a href="https://instagram.com">
            <img class="instagram-logo" class="image" routerLink="" routerLinkActive="active"
                [routerLinkActiveOptions]="{ exact: true }" [src]="instagram_logo" alt="Logo-Instagram" />
        </a>

        <a href="https://www.facebook.com/profile.php?id=61555217444337">
            <img class="facebook-logo" class="image" routerLink="" routerLinkActive="active"
                [routerLinkActiveOptions]="{ exact: true }" [src]="facebook_logo" alt="Logo-Facebook" />
        </a>
    </div>

</div>