borbad.s5l.ru/vue/app/pages/Events/index.pug

section(class="min-h-screen bg-gray-50 dark:bg-gray-900 py-8")
    div(class="container mx-auto px-4")
        div(class="text-center mb-12")
            h1(class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-4") Мероприятия
            p(class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto") Откройте для себя богатую палитру культурных событий в концертном зале "Кохи Борбад"
        
        div(class="mb-8")
            FilterSort(
                :items="allEvents"
                :filters="eventFilters"
                :sortOptions="sortOptions"
                :multipleFilters="true"
                @filter-changed="handleFilterChange"
            )
        
        div(class="events-grid")
            transition-group(name="events-list" tag="div")
                div(
                    v-for="event in displayedEvents"
                    :key="event._id"
                    class="event-card bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 cursor-pointer transform hover:-translate-y-2 animate-fade-in-up"
                    :class="'animation-delay-' + (($index % 6) * 100)"
                    @click="showEventDetails(event)"
                )
                    div(class="event-image relative overflow-hidden")
                        img(
                            :src="event.image"
                            :alt="event.title"
                            class="w-full h-48 md:h-56 object-cover transition-transform duration-500 hover:scale-105"
                        )
                        div(class="event-badge absolute top-4 right-4")
                            span(
                                :class="getCategoryBadgeClass(event.category)"
                                class="px-3 py-1 rounded-full text-xs font-bold text-white"
                            ) {{ getCategoryLabel(event.category) }}
                        div(class="event-date absolute top-4 left-4 bg-white dark:bg-gray-900 text-gray-800 dark:text-white px-3 py-2 rounded-lg shadow-md")
                            div(class="text-sm font-bold") {{ formatDate(event.date) }}
                        
                    div(class="event-content p-6")
                        h3(class="text-xl font-bold text-gray-800 dark:text-white mb-3 line-clamp-2") {{ event.title }}
                        p(class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3") {{ event.description }}
                        
                        div(class="event-meta flex items-center justify-between mb-4")
                            div(class="event-time flex items-center text-sm text-gray-500 dark:text-gray-400")
                                svg(class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z")
                                span {{ event.time }}
                            
                            div(class="event-venue flex items-center text-sm text-gray-500 dark:text-gray-400")
                                svg(class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z")
                                span {{ event.venue }}
                        
                        div(class="event-price-and-button flex items-center justify-between")
                            div(class="price text-2xl font-bold text-accent") {{ event.price }}
                                span(class="text-sm font-normal text-gray-500 dark:text-gray-400")  сомони
                            button(
                                class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors text-sm font-medium"
                                @click.stop="bookTicket(event)"
                            ) Купить билет
        
        div(class="load-more text-center mt-12" v-if="hasMoreEvents && !loading")
            button(
                @click="loadMoreEvents"
                class="bg-accent text-white px-8 py-3 rounded-lg hover:bg-yellow-600 transition-colors font-medium text-lg"
            ) Показать еще мероприятия
        
        div(class="loading-state text-center mt-8" v-if="loading")
            div(class="animate-spin rounded-full h-12 w-12 border-b-2 border-accent mx-auto")
            p(class="text-gray-600 dark:text-gray-400 mt-4") Загрузка мероприятий...
        
        div(class="empty-state text-center mt-12" v-if="!loading && displayedEvents.length === 0")
            div(class="empty-icon mx-auto mb-4")
                svg(class="w-24 h-24 text-gray-400 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z")
            h3(class="text-xl font-bold text-gray-600 dark:text-gray-400 mb-2") Мероприятия не найдены
            p(class="text-gray-500 dark:text-gray-500 mb-6") Попробуйте изменить параметры фильтрации
            button(
                @click="resetFilters"
                class="bg-accent text-white px-6 py-2 rounded-lg hover:bg-yellow-600 transition-colors"
            ) Сбросить фильтры

    EventDetailModal(
        v-if="selectedEvent"
        :isVisible="showEventModal"
        :event="selectedEvent"
        @update:isVisible="showEventModal = false"
        @ticket-booking="handleTicketBooking"
    )