section(class="min-h-screen bg-gray-50 dark:bg-gray-900 py-8")
    div(class="container mx-auto px-4")
        div(v-if="loading" class="text-center")
            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(v-else-if="event" class="max-w-4xl mx-auto")
            div(class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden")
                div(class="relative")
                    img(:src="event.image" :alt="event.title" class="w-full h-64 md:h-80 object-cover")
                    div(class="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="p-8")
                    div(class="flex flex-col md:flex-row md:justify-between md:items-start mb-6")
                        div(class="mb-4 md:mb-0")
                            h1(class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-2") {{ event.title }}
                            p(class="text-xl text-accent font-semibold") {{ event.price }} сомони
                        
                        div(class="text-right")
                            p(class="text-lg font-semibold text-gray-800 dark:text-white") {{ formatDateTime(event.date, event.time) }}
                            p(class="text-gray-600 dark:text-gray-400") {{ event.venue }}
                    
                    div(class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8")
                        div(class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
                            div(class="text-2xl font-bold text-accent mb-1") {{ event.availableTickets }}
                            div(class="text-sm text-gray-600 dark:text-gray-400") Осталось билетов
                        
                        div(class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
                            div(class="text-xl font-bold text-gray-800 dark:text-white mb-1") {{ event.duration }}
                            div(class="text-sm text-gray-600 dark:text-gray-400") Продолжительность
                        
                        div(class="text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
                            div(class="text-xl font-bold text-gray-800 dark:text-white mb-1") {{ event.ageRestriction }}
                            div(class="text-sm text-gray-600 dark:text-gray-400") Возраст
                    
                    div(class="prose prose-lg dark:prose-invert max-w-none mb-8")
                        p(class="text-gray-700 dark:text-gray-300 leading-relaxed") {{ event.description }}
                    
                    div(class="flex flex-col sm:flex-row gap-4")
                        button(
                            @click="bookTickets"
                            class="bg-accent text-white px-8 py-4 rounded-lg font-medium hover:bg-yellow-600 transition-colors flex items-center justify-center"
                        )
                            svg(class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z")
                            span Купить билеты
                        
                        button(
                            @click="$router.back()"
                            class="border border-gray-300 text-gray-700 px-6 py-4 rounded-lg font-medium hover:bg-gray-50 transition-colors dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
                        ) Назад к мероприятиям
        
        div(v-else class="text-center")
            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") Запрошенное мероприятие не существует или было удалено
            app-link(
                to="/events"
                class="bg-accent text-white px-6 py-2 rounded-lg hover:bg-yellow-600 transition-colors inline-block"
            ) Вернуться к мероприятиям