<script setup>
    import moment from 'moment-timezone';
    import Modal from '../blocks/Modal.vue';
    import { mainStore } from '../../stores/MainStore.vue';


    const MainStore = mainStore();

    defineProps({
        item: {
            type: Object,
            required: true
        },
        index: {
            type: Number,
            require: true
        },
    })

</script>
        
<template>
    <div v-if="item.promo_type === 'Ja'" class="events p-5 m-2 max-w-lg art-text" :class="item.promo_type">
        <a :href="item.target_link">
            <h2 class="text-lg pb-2">
                {{ item.title }} 
            </h2>
        </a>
        <div class="p-5 font-bold underline">
            <a :href="item.target_link">{{ item.organization.name  }}</a>
        </div>
    </div>
    <div v-else-if="item.promo_type === ''" class="events p-5 m-2 max-w-lg" :class="item.promo_type">
        <a href="#!"
        @click="MainStore.changeGallery(MainStore.isOpen, 0, 2, item)"
        >
            <h2 class="text-2xl pb-2 underline ad-headline">
                {{ item.title }} 
            </h2>
        </a>
        <div class="p-5">
            {{ item.short_text }}
        </div>
    </div>
    <div v-else class="events p-5 m-2 max-w-lg" :class="item.promo_type">
        <a :href="item.target_link">
            <h2 class="text-2xl pb-2 underline ad-headline">
                {{ item.title }} 
            </h2>
        </a>
        <div class="p-5">
            {{ item.short_text }}
        </div>
    </div>
</template>

<style scoped>
    .events {
    border: .1em solid #666;
    border-radius: 25px;
    min-width: 325px;
    max-width: 400px;
    }

    .Ja, .Su, .An, .Su {
        background-color: hsla(202, 100%, 37%, 0.1);
    }

    .Sp, .Ma, .Ar {
        background-color: hsla(160, 100%, 37%, .1);
    }

    .Jo, .Re, .Fo, .Ev {
        background-color: hsla(0, 100%, 59%, 0.1);
    }


    @media (min-width: 800px) and (max-width:1023px) {
        .events {
            min-width: 300px;
            max-width: 300px;
        }
    }

    @media (min-width: 1024px) and (max-width: 1249) {
        .events {
            min-width: 300px;
            max-width: 400px;
        }
    }

    @media (min-width: 1250px) {
        .events {
            min-width: 325px;
            max-width: 475px;
        }
    }
</style>