<template>
<div class="footer-menu-container">
    <div class="footer-menu-wrapper">
        <div class="footer-menu-image-container">
            <div class="footer-menu-image">
                <img
                    :src="require('@/assets/img/powered-by-safelite-solutions.svg')"
                    alt="Powered by Safelite Solutions" />
            </div>
        </div>
        <div class="footer-menu-items-container">
            <!-- Footer menu items go here -->
            <div class="footer-menu-item">
                &copy; {{ new Date().getFullYear() }} Safelite Group
            </div>
            <div class="footer-menu-item">
                <textLink
                    linkType="newWindowLink"
                    text="Terms of service"
                    href="//www.safelite.com/terms-of-use"
                    target="_blank" />
            </div>
            <div class="footer-menu-item">
                <textLink
                    linkType="newWindowLink"
                    text="Your privacy choices"
                    href="//www.safelite.com/privacy-center"
                    target="_blank">
                    <template #after-text>
                        <img
                            class="ccpa-icon"
                            src="~@/assets/img/icons/ccpa-icon.svg"
                            alt="Your privacy choices" />
                    </template>
                </textLink>
            </div>
            <div class="footer-menu-item">
                <a
                    href=""
                    target="_blank"
                    @click="openCookiePreferences">Cookie preferences</a>
            </div>
            <div class="footer-menu-item">
                <textLink
                    linkType="newWindowLink"
                    text="Notice at collection"
                    href="https://www.safelite.com/ccpa-privacy-policy"
                    target="_blank" />
            </div>
        </div>
    </div>
</div>
</template>

<script>
import textLink from '@/ux-components/text-link/text-link.vue';

export default {
    name: 'footer-menu',
    components: {
        textLink
    },
    methods: {
        openCookiePreferences(event) {
            event.preventDefault();
            if (window.OneTrust) {
                window.OneTrust.ToggleInfoDisplay();
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.footer-menu-container {
    display: flex;
    border-top: solid 0.125rem #d3d3d3;

    @include media-breakpoint-up(xs) {
        padding: 1rem 0 1.25rem 0; // Heritage 1.250rem 0
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    @include media-breakpoint-up(xl) {
        padding: 3rem 0;
        .footer-menu-wrapper {
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
            align-items: center;
        }
    }

    .footer-menu-items-container {
        @include media-breakpoint-up(xs) {
            display: flex;
            width: 100%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 1.25rem;

            .footer-menu-item:not(:first-child) {
                margin-top: 0.75rem;
            }
        }

        @include media-breakpoint-up(xl) {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: 0;

            .footer-menu-item {
                margin-top: 0;
                margin-right: 1.75rem;

                &:not(:first-child) {
                    margin-top: 0;
                }
                &:last-child {
                    margin-right: 5rem;
                }
            }
        }

        .footer-menu-item {
            display: flex;
            text-align: center;
            font-size: 0.875rem;

            .ccpa-icon {
                width: 2.0625rem;
                height: 1rem;
                margin-left: 0.5rem;
            }

            a {
                color: #525656;
                text-decoration: none;
                line-height: 1.56;
                font-weight: 400;
                padding: 0;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}
</style>
