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

div(class="page-container")
    //- Состояние загрузки
    div(v-if="loading" class="container mx-auto px-4 py-16 text-center")
        div(class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto")
        p(class="mt-4 text-gray-600") {{ getLocalizedString('loading') }}
    
    //- Состояние ошибки
    div(v-else-if="error" class="container mx-auto px-4 py-16")
        div(class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded max-w-2xl mx-auto")
            p {{ error }}
            app-link(
                to="/" 
                class="mt-4 inline-block bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition-colors"
            ) {{ getLocalizedString('back_to_home') }}
    
    //- Страница не найдена
    div(v-else-if="notFound" class="container mx-auto px-4 py-16 text-center")
        div(class="max-w-2xl mx-auto")
            h1(class="text-6xl font-bold text-gray-300 mb-4") 404
            h2(class="text-2xl font-semibold text-gray-800 mb-4") {{ getLocalizedString('not_found') }}
            p(class="text-gray-600 mb-8") {{ getLocalizedString('page_not_found_description', 'Запрашиваемая страница не существует или была перемещена') }}
            app-link(
                to="/" 
                class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors inline-block"
            ) {{ getLocalizedString('back_to_home') }}
    
    //- Отображение страницы
    div(v-else-if="page" class="page-content")
        //- Кастомный компонент если указан
        component(
            v-if="renderCustomComponent()"
            :is="renderCustomComponent()"
            :page="page"
            :settings="pageSettings"
        )
        
        //- Стандартное отображение
        div(v-else)
            //- Hero секция если есть изображение
            section(v-if="page.image" class="page-hero relative bg-gray-900")
                img(
                    :src="getMultilingualText(page.image)" 
                    :alt="getMultilingualText(page.title)"
                    class="w-full h-64 md:h-96 object-cover opacity-70"
                )
                div(class="absolute inset-0 flex items-center justify-center")
                    div(class="text-center text-white")
                        h1(class="text-4xl md:text-6xl font-bold mb-4") {{ getMultilingualText(page.title) }}
                        p(v-if="getMultilingualText(page.excerpt)" class="text-xl opacity-90 max-w-2xl mx-auto") {{ getMultilingualText(page.excerpt) }}
            
            //- Контент страницы
            div(:class="{ 'container mx-auto px-4 py-16': !page.image }")
                //- Заголовок если нет hero изображения
                div(v-if="!page.image" class="text-center mb-12")
                    h1(class="text-4xl font-bold text-gray-800 mb-4") {{ getMultilingualText(page.title) }}
                    p(v-if="getMultilingualText(page.excerpt)" class="text-xl text-gray-600 max-w-2xl mx-auto") {{ getMultilingualText(page.excerpt) }}
                
                //- Основной контент
                article(
                    class="prose prose-lg max-w-none prose-headings:text-gray-800 prose-p:text-gray-600 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-ul:text-gray-600 prose-ol:text-gray-600 prose-strong:text-gray-800 prose-blockquote:border-blue-600 prose-blockquote:text-gray-600"
                    v-html="processedContent"
                    @click="handleContentClick"
                )
                
                //- Галерея если есть
                div(v-if="page.gallery && page.gallery[0] && page.gallery[0].length > 0" class="mt-12")
                    h2(class="text-2xl font-semibold text-gray-800 mb-6") {{ getLocalizedString('gallery', 'Галерея') }}
                    div(class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4")
                        img(
                            v-for="(image, index) in getMultilingualText(page.gallery, [])" 
                            :key="index"
                            :src="image"
                            :alt="getMultilingualText(page.title) + ' - изображение ' + (index + 1)"
                            class="w-full h-48 object-cover rounded-lg shadow-md hover:shadow-lg transition-shadow cursor-pointer"
                            @click="openImageGallery(index)"
                        )
    
    //- Модальное окно для галереи
    div(v-if="showGalleryModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 p-4")
        div(class="relative max-w-4xl max-h-full")
            button(
                @click="showGalleryModal = false"
                class="absolute -top-12 right-0 text-white text-2xl hover:text-gray-300 transition-colors"
            ) ×
            img(
                :src="currentGalleryImage"
                class="max-w-full max-h-full object-contain"
            )
            div(v-if="getMultilingualText(page.gallery, []).length > 1" class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2")
                button(
                    v-for="(image, index) in getMultilingualText(page.gallery, [])"
                    :key="index"
                    @click="currentGalleryIndex = index"
                    :class="{ 'bg-blue-600': currentGalleryIndex === index, 'bg-white': currentGalleryIndex !== index }"
                    class="w-3 h-3 rounded-full transition-colors"
                )