<template>
  <div class="footer" id="footer">
        <div class="footer-top">
            <b-container class="footer-top-content">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="footer-top-content-text">
                        {{texts.socialText}}
                    </div>
                    <div class="footer-top-content-links d-flex">
                        <b-link
                            class="footer-top-content-link-item mr-2"
                            v-if="social.twitter"
                            :href="social.twitter.link"
                            target="_blank"
                        >
                            <img :src="social.twitter.icon" alt="twitter">
                        </b-link>
                        <b-link
                            class="footer-top-content-link-item mr-2"
                            v-if="social.facebook"
                            :href="social.facebook.link"
                            target="_blank"
                        >
                            <img :src="social.facebook.icon" alt="facebook">
                        </b-link>
                        <b-link
                            class="footer-top-content-link-item mr-2"
                            v-if="social.instagram"
                            :href="social.instagram.link"
                            target="_blank"
                        >
                            <img :src="social.instagram.icon" alt="instagram">
                        </b-link>
                        <b-link
                            class="footer-top-content-link-item ml-1 mr-2"
                            v-if="social.youtube"
                            :href="social.youtube.link"
                            target="_blank"
                        >
                            <img :src="social.youtube.icon" alt="youtube">
                        </b-link>
                        <b-link
                            class="footer-top-content-link-item ml-1 mr-1"
                            v-if="social.linkedin"
                            :href="social.linkedin.link"
                            target="_blank"
                        >
                            <img :src="social.linkedin.icon" alt="linkedin">
                        </b-link>
                        <b-link
                            class="footer-top-content-link-item ml-2"
                            v-if="social.rss"
                            :href="social.rss.link"
                            target="_blank"
                        >
                            <img :src="social.rss.icon" alt="rss">
                        </b-link>
                    </div>
                </div>
            </b-container>
        </div>
        <div class="footer-menu">
            <b-container>
                <div
                    class="footer-menu-row
                           d-flex
                           justify-content-between
                           align-items-start
                           flex-wrap"
                >
                    <b-col cols="12" sm="6" class="footer-menu-row-titles d-flex flex-column pt-4 pl-0 d-md-none">
                        <div>
                            <b-link
                                :href="column.path"
                                :target="column.linkTarget"
                                class="d-block footer-menu-row-title pl-0"
                                :class="{'mt-2': index != 0}"
                                v-for="(column, index) of menu"
                                :key="index"
                            >
                                {{column.title}}
                            </b-link>
                        </div>
                    </b-col>
                    <b-col
                        cols="12"
                        sm="9"
                        class="footer-menu-row-center justify-content-start flex-wrap d-none d-md-flex"
                    >
                        <div
                            class="footer-menu-row-center-column d-flex flex-column pt-4"
                            v-for="(column, index) of menu"
                            :key="index"
                        >
                            <b-link
                                :href="column.path"
                                :target="column.linkTarget"
                                class="footer-menu-row-title"
                            >
                                {{column.title}}
                            </b-link>
                            <b-link
                                :href="link.path"
                                :target="link.linkTarget"
                                class="footer-menu-row-item mt-3"
                                v-for="(link, index) of column.links"
                                :key="index"
                            >
                                {{link.text}}
                            </b-link>
                        </div>
                    </b-col>
                    <b-col
                        cols="12"
                        sm="6"
                        md="3"
                        class="footer-menu-row-contact
                               d-flex
                               flex-column
                               justify-content-between
                               align-self-stretch
                               pl-0
                               pt-sm-4
                               pl-xs-auto"
                    >
                        <div
                            class="footer-menu-row-contact-top d-flex flex-column mt-0"
                            v-if="hasContact"
                        >
                            <div class="footer-menu-row-contact-title mb-1 mb-md-0">
                                {{contact.title}}
                            </div>
                            <div
                                class="footer-menu-row-contact-link
                                       footer-menu-row-contact-link-address
                                       d-flex align-items-start
                                       mt-2
                                       mt-md-3
                                       mb-1
                                       mb-md-0"
                                v-if="hasAddress"
                            >
                                <div class="footer-menu-row-contact-link-icon">
                                    <img src="/img/address.svg" alt="address icon">
                                </div>
                                <div>
                                    <div>
                                        <span class="text-nowrap">{{contact.address}},</span>
                                    </div>
                                    <div>
                                        <span class="text-nowrap">{{contact.city}},</span>
                                        <span class="text-nowrap">{{contact.country}}</span>
                                    </div>
                                </div>
                            </div>
                            <b-link
                                v-if="contact.email"
                                :to="`mailto:${contact.email}?subject=${contact.email_subject}&body=${contact.email_text}`"
                                class="footer-menu-row-contact-link mt-2 mt-md-3 mb-1 mb-md-0 d-flex align-items-start"
                            >
                                <div class="footer-menu-row-contact-link-icon">
                                    <img src="/img/mail.svg" alt="mail icon">
                                </div>
                                {{contact.email}}
                            </b-link>
                            <b-link
                                v-if="contact.phone"
                                :to="`tel:${contact.phone}`"
                                class="footer-menu-row-contact-link mt-2 mt-md-3 mb-1 mb-md-0 d-flex align-items-start"
                            >
                                <div class="footer-menu-row-contact-link-icon">
                                    <img src="/img/phone.svg" alt="phone icon">
                                </div>
                                {{contact.phone}}
                            </b-link>
                        </div>
                        <div class="footer-menu-row-contact-bottom d-flex flex-column mt-col-4 mt-md-0">
                            <b-link
                                :href="texts.termsLink"
                                target="_blank"
                                class="footer-menu-row-contact-bottom-link mt-3"
                            >
                                {{texts.termsText}}
                            </b-link>
                            <b-link
                                :href="texts.policyLink"
                                target="_blank"
                                class="footer-menu-row-contact-bottom-link mt-3"
                            >
                                {{texts.policyText}}
                            </b-link>
                        </div>
                    </b-col>
                </div>
            </b-container>
        </div>
        <div>
            <b-container class="d-flex align-items-center justify-content-start justify-content-sm-center">
                <b-link class="footer-copyright" :href="texts.copyrightLink" target="_blank">
                    © IARC 1965–{{actualYear}} — {{ texts.copyrightText }}
                </b-link>
            </b-container>
        </div>
  </div>
</template>

<script>
module.exports = {
    name: 'Footer',
    props: {
        news: Object,
        social: Object,
        contact: Object,
        texts: Object,
        menu: Array,
        actualYear: String,
    },
    computed: {
        hasAddress: function() {
            let contact = this.contact;
            return contact.address || contact.city || contact.country;
        },
        hasContact: function() {
            let contact = this.contact;
            return this.hasAddress || contact.email || contact.phone;
        }
    },
};
</script>

<style lang="stylus">
#app
    .footer
        background-color #F0F0F0
        &-top
            padding 18px 0
            background-color #1E7FB8
            color #ffffff
            &-content-link
                &-item
                    width 16px
                    filter opacity(0.7)
                    &:hover
                        filter opacity(1)

        &-menu
            &-row
                &-title
                    color #3C3C3C
                    font-size 13px
                    font-weight bold
                    line-height 150%
                    letter-spacing 1.44px
                    text-transform uppercase
                    &:hover
                        color #1E7FB8
                        text-decoration none
                &-item
                    color #3C3C3C
                    font-size 14px
                    line-height 90%
                    &:hover
                        color #1E7FB8
                        text-decoration none
                &-center
                    padding-left 0px
                    &-column
                        width 160px
                        margin-right 30px
                        @media (max-width 1199px)
                            width 130px
                        @media (max-width 991px)
                            width 90px

                &-contact
                    &-title
                        color #3C3C3C
                        font-size 13px
                        font-weight bold
                        line-height 150%
                        letter-spacing 1.44px
                        text-transform uppercase
                        &:hover
                            text-decoration none
                    &-top
                      @media (max-width 577px)
                          margin-top 8px !important
                    &-link
                        font-size 14px
                        line-height 150%
                        color #3C3C3C
                        &:hover
                            text-decoration none
                            color #1E7FB8
                        &-icon
                            width 16px
                            height 16px
                            margin-right 12px
                        &-address
                            &:hover
                                color #3C3C3C
                    &-bottom
                        &-link
                            font-size 14px
                            line-height 150%
                            color #808080
                            &:hover
                                text-decoration none
                                color #1E7FB8

        &-copyright
            color #808080
            font-size 10px
            line-height 15px
            padding 32px 0

</style>
