<template>
    <div class="mx-2 p-2">
        <div class="flex justify-between items-center flex-wrap flex-center mb-4">
            <a href="#" class="btn" @click="$router.back()">Back</a>
            <router-link :to="'/events/create'" class="btn-primary">Add New Event</router-link>
        </div>
        <Loader v-if="loading" />
        <div v-else class="flex flex-wrap -m-2">
            <div v-if="events === []">
                <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
            </div>
            <router-link v-for="event in events" :key="event.data.event_id" :to="'/events/' + event.data.event_id" class="flex-initial sm:mx-auto md:w-1/2 md:mx-0 lg:w-1/3 xl:w-1/4 mb-4 no-underline">
                <div class="card sm:max-w-124">
                    <div class="h-full flex flex-col justify-between">
                        <div class="flex justify-between flex-wrap">
                            <h1 class="text-xl text-marine">{{ event.data.attributes.data.name }}</h1>
                            <h2 class="text-sm text-marine">{{ event.data.attributes.data.location }}</h2>
                        </div>
                        <div v-if="event.data.attributes.data.description">{{ event.data.attributes.data.description }}</div>
                        <div class="flex justify-between">
                            <span class="mt-auto self-end bg-gray-400 text-white tag">{{ event.data.attributes.data.category.data.attributes.data.name }}</span>
                            <span class="mt-auto self-end bg-gray-400 text-white tag">{{ event.data.attributes.data.start_date }}</span>
                        </div>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
import Loader from '../../components/Loader'

export default {
    name: 'EventIndex',
    components: {
        Loader
    },
    data: function () {
        return {
            loading: true,
            events: null,
        }
    },
    mounted() {
        // eslint-disable-next-line no-undef
        axios.get('/api/events')
            .then(response => {
                this.events = response.data.data
                this.loading = false
            })
            .catch(() => {
                this.loading = false
                console.log('Unable to fetch events.')
            })
    },
}
</script>
