<template>
    <div class="tb-map-info-window-wrapper">
        <div class="tb-map-info-window">
            <button class="tb-map-info-window__close-button" @click="$emit('close')">
                <svg class="c-icon" aria-hidden="true">
                    <use xlink:href="#tb-map-close" />
                </svg>
            </button>

            <div class="tb-map-info-window__image-wrapper" v-if="marker.image">
                <img :src="marker.image.url" :alt="marker.image.alt">
            </div>

            <div class="tb-map-info-window__text">
                <h2 class="tb-map-info-window__title">
                    {{ marker.title }}
                </h2>

                <div class="tb-map-info-window__attribute">
                    {{ marker.categoryTitle }}

                    <template v-if="marker.tour">
                        <template v-if="marker.tour.difficultyRating">
                            {{ lang[ `difficultyRating${marker.tour.difficultyRating}` ] }}
                        </template>
                    </template>
                </div>

                <p class="tb-map-info-window__description">
                    {{ marker.description }}
                </p>

                <tb-info-window-opening-times
                    v-if="displayOpeningTimes"
                    :marker="marker"
                    :lang="lang"
                />
            </div>

            <div class="tb-map-info-window__button-wrapper">
                <a
                    v-if="marker.url"
                    :href="marker.url"
                    :target="marker.urlTarget !== null ? marker.urlTarget : linkTarget"
                    class="tb-map-info-window__button"
                >

                    {{ lang.moreLink }}
                </a>
            </div>
        </div>
    </div>
</template>
<script>
import TbInfoWindowOpeningTimes from './info-window-opening-times.vue';

export default {
    name: 'TbInfoWindow',
    components: {
        TbInfoWindowOpeningTimes,
    },
    props: {
        marker: { type: Object, required: true },
        lang: { type: Object, required: true },
        linkTarget: { type: String, required: true },
        displayOpeningTimes: { type: Boolean, default: false },
    },
};
</script>
