<?php
/**
 * @var \kernel\modules\post\models\Post $post
 */
?>

<main class="container my-5">
    <!-- Хлебные крошки -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Главная</a></li>
            <li class="breadcrumb-item"><a href="#">Новости</a></li>
            <li class="breadcrumb-item active" aria-current="page"><?= $post->title ?></li>
        </ol>
    </nav>

    <!-- Заголовок новости -->
    <article>
        <header class="mb-4">
            <h1 class="font-weight-bold"><?= $post->title ?></h1>
            <div class="d-flex align-items-center text-muted mt-3">
                <span class="mr-3"><i class="fa fa-calendar mr-2"></i><?= $post->created_at ?></span>
                <span class="mr-3"><i class="fa fa-eye mr-2"></i>12 543 просмотра</span>
                <span><i class="fa fa-comments-o mr-2"></i>24 комментария</span>
            </div>
        </header>

        <!-- Основное изображение -->
        <figure class="mb-4">
            <img src="https://via.placeholder.com/1200x600" alt="Иллюстрация к новости" class="img-fluid rounded">
            <figcaption class="text-center mt-2 text-muted">Иллюстрация: создание 3D-модели с помощью ИИ</figcaption>
        </figure>

        <!-- Текст новости -->
        <div class="news-content mb-5">
            <p class="lead">Компания OpenAI представила новую версию своего алгоритма, способного генерировать трехмерные объекты на основе текстовых описаний.</p>

            <p>Новая технология, получившая название 3D-GPT, позволяет создавать высокодетализированные модели всего за несколько секунд. Пользователю достаточно ввести описание объекта, например, "красный спортивный автомобиль с черными полосами", и система сгенерирует соответствующую 3D-модель.</p>

            <h2 class="mt-4 mb-3">Как это работает</h2>

            <p>Алгоритм основан на комбинации нескольких нейросетевых архитектур:</p>

            <ul>
                <li>Текстовая модель анализирует описание и выделяет ключевые характеристики</li>
                <li>Генеративная сеть создает базовую геометрию объекта</li>
                <li>Дополнительные модули добавляют текстуры, материалы и освещение</li>
            </ul>

            <p>По словам разработчиков, система особенно хорошо справляется с органическими формами и архитектурными объектами.</p>

            <div class="alert alert-info mt-4">
                <h3 class="alert-heading">Экспертное мнение</h3>
                <p>"Эта технология может революционизировать индустрию 3D-моделирования, значительно сократив время и стоимость создания цифровых активов", - отмечает Джон Смит, профессор компьютерной графики в MIT.</p>
            </div>

            <h2 class="mt-4 mb-3">Практическое применение</h2>

            <p>Технология уже тестируется в нескольких областях:</p>

            <div class="row mt-3">
                <div class="col-md-4 mb-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">Игровая индустрия</h5>
                            <p class="card-text">Быстрое прототипирование персонажей и объектов для видеоигр.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">Архитектура</h5>
                            <p class="card-text">Создание 3D-моделей зданий по словесным описаниям заказчиков.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">Образование</h5>
                            <p class="card-text">Визуализация исторических объектов и научных концепций.</p>
                        </div>
                    </div>
                </div>
            </div>

            <p class="mt-4">Ожидается, что коммерческая версия продукта будет выпущена в начале следующего года. Бета-тестирование начнется уже в сентябре для ограниченного круга разработчиков.</p>
        </div>

        <!-- Теги и соцсети -->
        <div class="d-flex flex-wrap justify-content-between align-items-center border-top border-bottom py-3 mb-5">
            <div class="tags mb-2 mb-md-0">
                <span class="badge badge-secondary mr-2">#искусственный_интеллект</span>
                <span class="badge badge-secondary mr-2">#3d_моделирование</span>
                <span class="badge badge-secondary mr-2">#технологии</span>
                <span class="badge badge-secondary">#openai</span>
            </div>
            <div class="social-share">
                <button class="btn btn-outline-primary btn-sm mr-2"><i class="fab fa-facebook-f mr-1"></i> Поделиться</button>
                <button class="btn btn-outline-info btn-sm mr-2"><i class="fab fa-twitter mr-1"></i> Твитнуть</button>
                <button class="btn btn-outline-danger btn-sm"><i class="fab fa-telegram-plane mr-1"></i> Отправить</button>
            </div>
        </div>

        <!-- Автор и источник -->
        <footer class="bg-light p-3 rounded mb-5">
            <div class="row">
                <div class="col-md-8">
                    <h5>Об авторе</h5>
                    <div class="d-flex align-items-center">
                        <img src="https://via.placeholder.com/50" alt="Автор" class="rounded-circle mr-3">
                        <div>
                            <h6 class="mb-0">Александра Петрова</h6>
                            <p class="text-muted mb-0">Технологический обозреватель с 10-летним опытом</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mt-3 mt-md-0">
                    <h5>Источник</h5>
                    <p>По материалам пресс-релиза OpenAI и эксклюзивного интервью с разработчиками</p>
                </div>
            </div>
        </footer>

        <!-- Похожие новости -->
        <section class="mb-5">
            <h3 class="mb-4">Похожие новости</h3>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card h-100">
                        <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">Нейросети научились анимировать 2D-рисунки</h5>
                            <p class="card-text text-muted">12 июля 2023</p>
                            <a href="#" class="btn btn-outline-primary btn-sm">Читать</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card h-100">
                        <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">ИИ в дизайне: как алгоритмы меняют творческие профессии</h5>
                            <p class="card-text text-muted">8 июля 2023</p>
                            <a href="#" class="btn btn-outline-primary btn-sm">Читать</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card h-100">
                        <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">Обзор новых инструментов для 3D-художников в 2023 году</h5>
                            <p class="card-text text-muted">3 июля 2023</p>
                            <a href="#" class="btn btn-outline-primary btn-sm">Читать</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Комментарии -->
        <section class="mb-5">
            <h3 class="mb-4">Комментарии (24)</h3>

            <div class="mb-4">
                <form>
                    <div class="form-group">
                        <textarea class="form-control" rows="3" placeholder="Оставьте ваш комментарий..."></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Отправить</button>
                </form>
            </div>

            <div class="comment-list">
                <div class="comment mb-4">
                    <div class="d-flex">
                        <img src="https://via.placeholder.com/40" alt="Аватар" class="rounded-circle mr-3">
                        <div>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Иван Иванов</h6>
                                <small class="text-muted">2 часа назад</small>
                            </div>
                            <p>Очень интересная технология! Интересно, насколько она будет доступна для индивидуальных разработчиков по цене.</p>
                            <button class="btn btn-link btn-sm p-0 text-muted">Ответить</button>
                        </div>
                    </div>
                </div>

                <div class="comment mb-4 ml-5">
                    <div class="d-flex">
                        <img src="https://via.placeholder.com/40" alt="Аватар" class="rounded-circle mr-3">
                        <div>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Мария Смирнова</h6>
                                <small class="text-muted">1 час назад</small>
                            </div>
                            <p>@Иван Иванов, по предварительной информации, будет несколько тарифных планов, включая бесплатный с ограничениями.</p>
                            <button class="btn btn-link btn-sm p-0 text-muted">Ответить</button>
                        </div>
                    </div>
                </div>

                <div class="comment mb-4">
                    <div class="d-flex">
                        <img src="https://via.placeholder.com/40" alt="Аватар" class="rounded-circle mr-3">
                        <div>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="mb-0">Алексей Технарев</h6>
                                <small class="text-muted">30 минут назад</small>
                            </div>
                            <p>Жду не дождусь, когда можно будет попробовать! Уже есть несколько идей, как это можно применить в нашем проекте.</p>
                            <button class="btn btn-link btn-sm p-0 text-muted">Ответить</button>
                        </div>
                    </div>
                </div>

                <button class="btn btn-outline-secondary">Показать еще комментарии</button>
            </div>
        </section>
    </article>
</main>
