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

div(class="page-view")
    //- Состояние загрузки
    div(v-if="loading" class="container mx-auto px-4 py-8")
        div(class="flex justify-center items-center py-12")
            div(class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600")
    
    //- Состояние ошибки
    div(v-else-if="error" class="container mx-auto px-4 py-8")
        div(class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded")
            p {{ error }}
            app-link(to="/" class="text-blue-600 hover:text-blue-800 mt-2 inline-block") Вернуться на главную
    
    //- Контент страницы
    div(v-else-if="page" class="page-content")
        //- Хидер страницы
        header(class="bg-white dark:bg-gray-800 shadow-sm")
            div(class="container mx-auto px-4 py-6")
                div(class="flex items-center justify-between")
                    div
                        h1(class="text-3xl font-bold text-gray-800 dark:text-white") {{ getText(page.title) }}
                        p(v-if="page.excerpt" class="text-gray-600 dark:text-gray-300 mt-2") {{ getText(page.excerpt) }}
                    
                    div(class="flex items-center space-x-4")
                        span(class="text-sm text-gray-500") {{ formatDate(page.created_at) }}
        
        //- Основной контент
        main(class="container mx-auto px-4 py-8")
            div(v-if="page.image" class="mb-8")
                img(
                    :src="getText(page.image)" 
                    :alt="getText(page.title)"
                    class="w-full h-64 object-cover rounded-lg shadow-md"
                )
            
            //- Динамический контент с компонентами
            div(
                class="prose prose-lg max-w-none dark:prose-invert"
                v-html="processedContent"
            )
        
        //- Дополнительная информация
        footer(v-if="page.tags || page.author" class="border-t border-gray-200 dark:border-gray-700 mt-8 pt-8")
            div(class="container mx-auto px-4")
                div(class="flex flex-wrap gap-4 items-center justify-between")
                    div(v-if="page.tags" class="flex flex-wrap gap-2")
                        span(
                            v-for="tag in getText(page.tags)"
                            :key="tag"
                            class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded"
                        ) {{ tag }}
                    
                    div(v-if="page.author" class="text-sm text-gray-500")
                        | Автор: {{ getText(page.author) }}
    
    //- Страница не найдена
    div(v-else class="container mx-auto px-4 py-8")
        div(class="text-center")
            h2(class="text-2xl font-bold text-gray-800 dark:text-white mb-4") Страница не найдена
            p(class="text-gray-600 dark:text-gray-300 mb-6") Запрошенная страница не существует или была перемещена
            app-link(
                to="/" 
                class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
            ) Вернуться на главную