<template>
    <div>
        <CMyPage imgbackground="../../statics/images/calendario_eventi.jpg" :title="gettitle" sizes="max-height: 110px;"
                 styleadd="bottom: -36px !important;">

            <span>{{ setmeta({
                title: gettitle,
                description: "",
                keywords: '' } ) }}
            </span>

            <CEventsCalendar :mysingleevent="myevent" v-if="myevent">

            </CEventsCalendar>

            <q-separator>
            </q-separator>

            <div class="q-pa-md text-center" style="max-width: 380px; margin: auto auto 2px; " v-if="nextevents.length > 0">
                <q-list bordered>
                    <q-item>
                        <q-item-section>
                            <q-item-label overline>PROSSIME DATE:</q-item-label>
                        </q-item-section>
                    </q-item>
                    <q-item clickable v-ripple
                            v-for="(ev, index) in nextevents"
                            v-if="isnotmyevent(ev)"
                            :to="`/event/${ev.typol}/${ev._id}`"
                            :key="index">
                        <q-item-section avatar v-if="tools.getimgev(ev)">
                            <q-avatar>
                                <img :src="tools.getimgev(ev)" :alt="ev.title">
                            </q-avatar>
                        </q-item-section>
                        <q-item-section>{{ev.title}}</q-item-section>
                        <q-item-section side top>{{tools.getstrDateTimeEventShort(mythis, ev)}}</q-item-section>
                    </q-item>
                </q-list>
            </div>

            <div class="q-ma-md text-center">
                <q-btn rounded outline type="a" to="/calendario-eventi" color="primary" icon="event"
                       :label="$t('pages.calendarioeventi')">
                </q-btn>

            </div>

        </CMyPage>
    </div>
</template>
<script lang="ts" src="./evento.ts">
</script>
<style lang="scss" scoped>
    @import './evento.scss';
</style>
