{% extends 'domain/frontend/layouts/base.html.twig' %}

{% block title %}{{ post.titre }}{% endblock %}
{% block main_title %}{{ post.titre }}{% endblock %}
{% block sub_title %}{{ post.titre }}{% endblock %}
{% block style %}
    {% form_theme form 'form_div_layout.html.twig' %}
    <style>
        /* News Section Animations */
        .news-section {
            position: relative;
            overflow: hidden;
        }

        .news-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.05), transparent);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        /* Blog Post Details */
        .blog-post-details {
            animation: fadeInUp 0.8s ease-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .single-blog-post {
            transition: transform 0.3s ease;
        }

        .post-featured-thumb {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            animation: scaleIn 0.8s ease-out;
        }

        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .post-featured-thumb::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.3));
            transition: opacity 0.4s ease;
        }

        .single-blog-post:hover .post-featured-thumb::after {
            opacity: 0.7;
        }

        /* Post List Items */
        .post-list li {
            animation: slideInLeft 0.6s ease-out backwards;
            transition: transform 0.3s ease;
        }

        .post-list li:nth-child(1) { animation-delay: 0.1s; }
        .post-list li:nth-child(2) { animation-delay: 0.2s; }
        .post-list li:nth-child(3) { animation-delay: 0.3s; }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .post-list li:hover {
            transform: translateX(5px);
        }

        .post-list li img {
            transition: transform 0.3s ease;
        }

        .post-list li:hover img {
            transform: rotate(360deg);
        }

        /* Post Content */
        .post-content h3 {
            animation: fadeIn 0.8s ease-out 0.3s backwards;
        }

        .post-content p {
            animation: fadeIn 0.8s ease-out 0.5s backwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Comments Area */
        .comments-area {
            animation: fadeInUp 0.8s ease-out 0.4s backwards;
        }

        .comments-heading h3 {
            position: relative;
            display: inline-block;
        }

        .comments-heading h3::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #4a90e2, #357abd);
            transition: width 0.6s ease;
        }

        .comments-heading:hover h3::after {
            width: 100%;
        }

        /* Comment Items */
        .blog-single-comment {
            animation: commentSlideIn 0.6s ease-out backwards;
            transition: all 0.3s ease;
            padding: 20px;
            border-radius: 12px;
        }

        .blog-single-comment:nth-child(1) { animation-delay: 0.1s; }
        .blog-single-comment:nth-child(2) { animation-delay: 0.2s; }
        .blog-single-comment:nth-child(3) { animation-delay: 0.3s; }
        .blog-single-comment:nth-child(4) { animation-delay: 0.4s; }

        @keyframes commentSlideIn {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .blog-single-comment:hover {
            background: #f8f9fa;
            transform: translateX(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .blog-single-comment .image img {
            transition: all 0.4s ease;
            border: 3px solid transparent;
        }

        .blog-single-comment:hover .image img {
            transform: scale(1.1) rotate(5deg);
            border-color: #4a90e2;
        }

        /* Star Rating Animation */
        .star i {
            display: inline-block;
            transition: all 0.3s ease;
            animation: starPulse 1.5s ease-in-out infinite;
        }

        .star i:nth-child(1) { animation-delay: 0s; }
        .star i:nth-child(2) { animation-delay: 0.1s; }
        .star i:nth-child(3) { animation-delay: 0.2s; }
        .star i:nth-child(4) { animation-delay: 0.3s; }
        .star i:nth-child(5) { animation-delay: 0.4s; }

        @keyframes starPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        .star:hover i {
            color: #ffc107;
            transform: rotate(360deg);
        }

        /* Comment Form */
        .comment-form-wrap {
            animation: fadeInUp 0.8s ease-out 0.6s backwards;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        .comment-form-wrap h3 {
            position: relative;
            padding-bottom: 15px;
            margin-bottom: 25px;
        }

        .comment-form-wrap h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #4a90e2, #357abd);
            animation: expandLine 1s ease-out;
        }

        @keyframes expandLine {
            from { width: 0; }
            to { width: 60px; }
        }

        .form-clt {
            animation: formFieldIn 0.6s ease-out backwards;
        }

        .form-clt:nth-child(1) { animation-delay: 0.1s; }
        .form-clt:nth-child(2) { animation-delay: 0.2s; }
        .form-clt:nth-child(3) { animation-delay: 0.3s; }

        @keyframes formFieldIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .form-clt input,
        .form-clt textarea {
            transition: all 0.3s ease;
            border: 2px solid #e0e0e0;
        }

        .form-clt input:focus,
        .form-clt textarea:focus {
            border-color: #4a90e2;
            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
            transform: translateY(-2px);
        }

        .theme-btn-2 {
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .theme-btn-2::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .theme-btn-2:hover::before {
            width: 300px;
            height: 300px;
        }

        .theme-btn-2:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(74, 144, 226, 0.3);
        }

        .theme-btn-2 .shape-img {
            transition: transform 0.3s ease;
        }

        .theme-btn-2:hover .shape-img {
            transform: translateX(10px);
        }

        /* Sidebar Animations */
        .main-sidebar {
            animation: fadeInRight 0.8s ease-out 0.3s backwards;
        }

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .single-sidebar-widget {
            animation: widgetSlideIn 0.6s ease-out backwards;
            transition: all 0.3s ease;
            margin-bottom: 30px;
        }

        .single-sidebar-widget:nth-child(1) { animation-delay: 0.2s; }
        .single-sidebar-widget:nth-child(2) { animation-delay: 0.4s; }
        .single-sidebar-widget:nth-child(3) { animation-delay: 0.6s; }

        @keyframes widgetSlideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .single-sidebar-widget:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .wid-title h5 {
            position: relative;
            padding-bottom: 12px;
        }

        .wid-title h5::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background: linear-gradient(90deg, #4a90e2, #357abd);
            transition: width 0.4s ease;
        }

        .single-sidebar-widget:hover .wid-title h5::after {
            width: 100%;
        }

        /* Category Items */
        .widget-categories ul li {
            transition: all 0.3s ease;
            animation: categoryFadeIn 0.5s ease-out backwards;
        }

        .widget-categories ul li:nth-child(1) { animation-delay: 0.1s; }
        .widget-categories ul li:nth-child(2) { animation-delay: 0.15s; }
        .widget-categories ul li:nth-child(3) { animation-delay: 0.2s; }
        .widget-categories ul li:nth-child(4) { animation-delay: 0.25s; }
        .widget-categories ul li:nth-child(5) { animation-delay: 0.3s; }

        @keyframes categoryFadeIn {
            from {
                opacity: 0;
                transform: translateX(-15px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .widget-categories ul li:hover {
            transform: translateX(10px);
            background: #f0f4f8;
            border-radius: 8px;
        }

        .widget-categories ul li i {
            transition: transform 0.3s ease;
        }

        .widget-categories ul li:hover i {
            transform: translateX(5px);
        }

        /* Popular Posts */
        .single-post-item {
            animation: postItemSlide 0.6s ease-out backwards;
            transition: all 0.3s ease;
            border-radius: 8px;
            padding: 10px;
        }

        .single-post-item:nth-child(1) { animation-delay: 0.1s; }
        .single-post-item:nth-child(2) { animation-delay: 0.2s; }
        .single-post-item:nth-child(3) { animation-delay: 0.3s; }

        @keyframes postItemSlide {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .single-post-item:hover {
            background: #f8f9fa;
            transform: translateX(-5px);
        }

        .single-post-item .thumb {
            transition: all 0.4s ease;
            border-radius: 8px;
            overflow: hidden;
        }

        .single-post-item:hover .thumb {
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .single-post-item h6 a {
            transition: color 0.3s ease;
            position: relative;
        }

        .single-post-item:hover h6 a {
            color: #4a90e2;
        }

        /* Tags */
        .tagcloud a {
            animation: tagFadeIn 0.5s ease-out backwards;
            transition: all 0.3s ease;
            display: inline-block;
        }

        .tagcloud a:nth-child(1) { animation-delay: 0.1s; }
        .tagcloud a:nth-child(2) { animation-delay: 0.15s; }
        .tagcloud a:nth-child(3) { animation-delay: 0.2s; }
        .tagcloud a:nth-child(4) { animation-delay: 0.25s; }
        .tagcloud a:nth-child(5) { animation-delay: 0.3s; }
        .tagcloud a:nth-child(6) { animation-delay: 0.35s; }

        @keyframes tagFadeIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .tagcloud a:hover {
            background: #4a90e2;
            color: white;
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .blog-single-comment:hover {
                transform: translateX(5px);
            }

            .single-sidebar-widget:hover {
                transform: translateY(-2px);
            }
        }
    </style>
{% endblock %}

{% block body %}
    <!-- News Details Start -->
    <section class="news-section fix section-padding">
        <div class="container">
            <div class="news-details-area">
                <div class="row g-5">
                    <div class="col-12 col-lg-8">
                        <div class="blog-post-details">
                            <div class="single-blog-post">
                                <div class="post-featured-thumb bg-cover"
                                     style="background-image: url('{{ asset(post.imageCouverture) }}');"></div>
                                <div class="post-content">
                                    <ul class="post-list d-flex align-items-center">
                                        {% for tag in post.tags %}
                                            <li>
                                                <img src="{{ asset('templates/frontend/img/icon/construct.svg') }}"
                                                     alt="icon-img">
                                                {{ tag.libelle }}
                                            </li>
                                        {% endfor %}
                                        <li>
                                            <img src="{{ asset('templates/frontend/img/icon/comments.svg') }}"
                                                 alt="icon-img">
                                            0 Commentaires
                                        </li>
                                    </ul>
                                    <h3>{{ post.titre }}</h3>
                                    <p>{{ post.contenu }}</p>
                                </div>
                            </div>
                            <div class="comments-area">
                                <div class="comments-heading">
                                    <h3>{{ post.comments.count }} Commentaire(s)</h3>
                                </div>
                                <hr>
                                {% for comment in post.comments %}
                                    <div class="blog-single-comment d-flex gap-4 mt-5 pb-5 bor-bottom">
                                        <div class="image">
                                            {% set initials = comment.fullName|split(' ')|map(word => word|slice(0, 1))|join('') %}
                                            <img style="border-radius: 100px"
                                                 src="https://placehold.co/96x96?text={{ initials }}" alt="image">
                                        </div>
                                        <div class="content w-100">
                                            <div class="head d-flex flex-wrap gap-2 align-items-center justify-content-between">
                                                <div class="con">
                                                    <h5><a href="#">{{ comment.fullName }}</a></h5>
                                                    <span>{{ comment.createdAt|date("d-m-Y") }}</span>
                                                </div>
                                                <div class="star d-block">
                                                    <i class="fa-solid fa-star"></i>
                                                    <i class="fa-solid fa-star"></i>
                                                    <i class="fa-solid fa-star"></i>
                                                    <i class="fa-solid fa-star"></i>
                                                    <i class="fa-solid fa-star"></i>
                                                </div>
                                            </div>
                                            <p class="mt-30 mb-4">{{ comment.message }}</p>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="comment-form-wrap mt-5">
                                <h3>Laissez un commentaire</h3>
                                {{ form_start(form) }}
                                <div class="row g-4">
                                    <div class="col-lg-6">
                                        <div class="form-clt">
                                            {{ form_row(form.fullName) }}
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-clt">
                                            {{ form_row(form.email) }}
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-clt">
                                            {{ form_row(form.message) }}
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <button type="submit" class="theme-btn-2 padding-style">
                                            Commenter
                                            <span class="shape-img">
                                                <img src="{{ asset('templates/frontend/img/arrow-shape.png') }}"
                                                     alt="shape-img">
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                <style>textarea {
                                        color: white
                                    }</style>
                                {{ form_end(form) }}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-4">
                        <div class="main-sidebar">
                            <div class="single-sidebar-widget">
                                <div class="wid-title">
                                    <h5>Categories</h5>
                                </div>
                                <div class="widget-categories">
                                    <ul>
                                        {% for category in categories %}
                                            <li><a href="#"><span class="text"><i
                                                                class="fa-solid fa-arrow-right-long"></i>{{ category.nom }}</span>
                                                    <span>({{ category.posts.count }})</span></a></li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            <div class="single-sidebar-widget">
                                <div class="wid-title">
                                    <h5>Posts récents</h5>
                                </div>
                                <div class="popular-posts">
                                    {% for key, postsResent in postsResents %}
                                    {% if key == (postsResents|length - 1) %}
                                    <div class="single-post-item border-none pb-0 mb-0">
                                        {% else %}
                                        <div class="single-post-item">
                                            {% endif %}
                                            <div class="thumb bg-cover"
                                                 style="background-image: url('{{ asset(postsResent.imageCouverture) }}');"></div>
                                            <div class="post-content">
                                                <div class="post-date">
                                                    <i class="far fa-calendar-alt"></i>{{ postsResent.datePublication|date('d-M-Y') }}
                                                </div>
                                                <h6>
                                                    <a href="{{ path('front.post.details', {'slug':postsResent.slug}) }}">{{ postsResent.titre }}</a>
                                                </h6>
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                <div class="single-sidebar-widget">
                                    <div class="wid-title">
                                        <h5>Tags</h5>
                                    </div>
                                    <div class="tagcloud">
                                        {% for tag in tags %}
                                            <a href="#">{{ tag.libelle }}</a>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>
{% endblock %}