Twig\Error\RuntimeError {#2188
  -lineno: 174
  -name: "agent_property/index.html.twig"
  -rawMessage: "Impossible to access an attribute ("name") on a null variable."
  -sourcePath: "/home/clients/bd8cd111e9f750c60744e1a2ea7ccf8e/sites/beta.smartimmo-app.com/SmartImmoWeb/templates/agent_property/index.html.twig"
  -sourceCode: """
    {% extends 'base.html.twig' %}\r\n
    \r\n
    {% block title %}\r\n
        {{ 'meta.title'|trans({'%firstname%': agent.firstname, '%lastname%': agent.name}, 'agent_property_index') }}\r\n
    {% endblock %}\r\n
    \r\n
    {% block description %}\r\n
        {{ 'meta.description'|trans({}, 'agent_property_index') }}\r\n
    {% endblock %}\r\n
    \r\n
    {% block style %}\r\n
        <link href="{{ asset('assets/css/agent-listing.css') }}" rel="stylesheet">\r\n
        <style>\r\n
            .agent-sidebar-sticky { position: static; }\r\n
    \r\n
            @media (min-width: 992px) {\r\n
                .agent-sidebar-sticky {\r\n
                    position: sticky;\r\n
                    top: 30px;\r\n
                    z-index: 10;\r\n
                }\r\n
            }\r\n
        </style>\r\n
    {% endblock %}\r\n
    \r\n
    {% block body %}\r\n
    \r\n
        <div class="container-lg py-3 py-lg-4">\r\n
            <div class="row g-3">\r\n
    \r\n
                <!-- LEFT: Profile & facts -->\r\n
                <div class="col-lg-7">\r\n
                    <div class="bg-white border rounded-4 p-3 p-lg-4">\r\n
                        <div class="d-flex align-items-center gap-3">\r\n
                            <img\r\n
                                src="{{ agent.picture ?? asset('assets/img/imageIcon.png') }}"\r\n
                                alt="{{ agent.firstname }} {{ agent.name }}"\r\n
                                class="rounded-3"\r\n
                                style="width:96px;height:96px;object-fit:cover;"\r\n
                            >\r\n
                            <div class="flex-grow-1">\r\n
                                <div class="d-flex flex-wrap align-items-center gap-2">\r\n
                                    <h1 class="h4 fw-bold mb-0">{{ agent.firstname }} {{ agent.name }}</h1>\r\n
    \r\n
                                    {% if agent.agency %}\r\n
                                        <span class="badge bg-light text-dark border rounded-pill">\r\n
                                            <i class="mdi mdi-domain me-1"></i>{{ agent.agency.name }}\r\n
                                        </span>\r\n
                                    {% endif %}\r\n
    \r\n
                                    <span class="badge bg-success-subtle text-success border rounded-pill">\r\n
                                        <i class="mdi mdi-shield-check-outline me-1"></i>\r\n
                                        {{ 'profile.verified'|trans({}, 'agent_property_index') }}\r\n
                                    </span>\r\n
                                </div>\r\n
    \r\n
                                <div class="text-muted small mt-1">\r\n
                                    {{ 'profile.status_label'|trans({}, 'agent_property_index') }}\r\n
                                    <strong> {{ 'profile.status_active'|trans({}, 'agent_property_index') }}</strong>\r\n
                                    ·\r\n
                                    {% if agent.coveredCities %}\r\n
                                        {{ 'profile.zones_label'|trans({}, 'agent_property_index') }}\r\n
                                        {% for c in agent.coveredCities %}\r\n
                                            <strong>{{ c.name|join(', ') }}</strong>\r\n
                                        {% endfor %}\r\n
                                    {% endif %}\r\n
                                    ·\r\n
                                    {{ 'profile.specialties_label'|trans({}, 'agent_property_index') }}\r\n
                                    <strong>{{ 'profile.specialties_value'|trans({}, 'agent_property_index') }}</strong>\r\n
                                </div>\r\n
                            </div>\r\n
                        </div>\r\n
    \r\n
                        <hr>\r\n
    \r\n
                        <!-- Quick metrics -->\r\n
                        {% set totalActive = (properties|length)|default(0) %}\r\n
                        <div class="row text-center g-3">\r\n
                            <div class="col-4">\r\n
                                <div class="fw-bold fs-5">{{ totalActive }}</div>\r\n
                                <div class="small text-muted">{{ 'metrics.active_listings'|trans({}, 'agent_property_index') }}</div>\r\n
                            </div>\r\n
                            <div class="col-4">\r\n
                                <div class="fw-bold fs-5">{{ (agent.propertyReports|length)|default(0) }}</div>\r\n
                                <div class="small text-muted">{{ 'metrics.reviews'|trans({}, 'agent_property_index') }}</div>\r\n
                            </div>\r\n
                            <div class="col-4">\r\n
                                <div class="fw-bold fs-5">{{ agent.metrics.years|default(1) }}</div>\r\n
                                <div class="small text-muted">{{ 'metrics.years_exp'|trans({}, 'agent_property_index') }}</div>\r\n
                            </div>\r\n
                        </div>\r\n
    \r\n
                        <hr>\r\n
    \r\n
                        <!-- About -->\r\n
                        <div class="mb-3">\r\n
                            <h6 class="fw-bold mb-2">{{ 'sections.about'|trans({}, 'agent_property_index') }}</h6>\r\n
                            <p class="mb-0">{{ agent.bio|default('-') }}</p>\r\n
                        </div>\r\n
    \r\n
                        <!-- Contact -->\r\n
                        {% set phone = agent.agentPhone ?? agent.phone ?? '' %}\r\n
                        <div class="mb-2">\r\n
                            <h6 class="fw-bold mb-2">{{ 'sections.contact'|trans({}, 'agent_property_index') }}</h6>\r\n
                            <div class="d-flex flex-wrap gap-2">\r\n
                                {% if phone %}\r\n
                                    <a href="tel:+243{{ phone }}" class="btn btn-outline-dark btn-sm rounded-pill">\r\n
                                        <i class="mdi mdi-phone"></i> {{ 'contact.call'|trans({}, 'agent_property_index') }}\r\n
                                    </a>\r\n
                                    <a class="btn btn-success btn-sm rounded-pill"\r\n
                                       href="https://wa.me/243{{ phone }}?text={{ absolute_url(app.request.uri)|url_encode }}%0AJe suis intéressé(e) par vos offres."\r\n
                                       target="_blank">\r\n
                                        <i class="mdi mdi-whatsapp"></i> {{ 'contact.whatsapp'|trans({}, 'agent_property_index') }}\r\n
                                    </a>\r\n
                                {% endif %}\r\n
    \r\n
                                {% if agent.email %}\r\n
                                    <a href="mailto:{{ agent.email }}" class="btn btn-light btn-sm rounded-pill">\r\n
                                        <i class="mdi mdi-email-outline"></i> {{ 'contact.email'|trans({}, 'agent_property_index') }}\r\n
                                    </a>\r\n
                                {% endif %}\r\n
                            </div>\r\n
                        </div>\r\n
    \r\n
                        {% if agent.fbckLink or agent.instaGLink or agent.linkedInLink %}\r\n
                            <div class="d-flex align-items-center gap-2">\r\n
                                {% if agent.fbckLink %}\r\n
                                    <a class="text-muted h5 mb-0" href="{{ agent.fbckLink }}" target="_blank"><i class="mdi mdi-facebook"></i></a>\r\n
                                {% endif %}\r\n
                                {% if agent.instaGLink %}\r\n
                                    <a class="text-muted h5 mb-0" href="{{ agent.instaGLink }}" target="_blank"><i class="mdi mdi-instagram"></i></a>\r\n
                                {% endif %}\r\n
                                {% if agent.linkedInLink %}\r\n
                                    <a class="text-muted h5 mb-0" href="{{ agent.linkedInLink }}" target="_blank"><i class="mdi mdi-linkedin"></i></a>\r\n
                                {% endif %}\r\n
                            </div>\r\n
                        {% endif %}\r\n
                    </div>\r\n
    \r\n
                    {# Fallbacks if not already set #}\r\n
                    {% set forSale   = forSale   is defined ? forSale   : (properties is defined ? properties : []) %}\r\n
                    {% set forRent   = forRent   is defined ? forRent   : [] %}\r\n
                    {% set pastSales = pastSales is defined ? pastSales : [] %}\r\n
    \r\n
                    <div class="row g-3 mt-3 mb-3">\r\n
    \r\n
                        {# ========== CARD: FOR SALE | FOR RENT ========== #}\r\n
                        <div class="col-12 col-lg-12">\r\n
                            <div class="rounded-4 h-100 d-flex flex-column">\r\n
                                <div class="p-3 border-bottom d-flex justify-content-between align-items-center">\r\n
                                    <h3 class="fw-bold mb-0">{{ 'sections.rent_sell'|trans({}, 'agent_property_index') }}</h3>\r\n
                                    <span class="badge bg-secondary-subtle text-primary border">{{ forSale|length }}</span>\r\n
                                </div>\r\n
    \r\n
                                <div class="list-group list-group-flush flex-grow-1" id="list-sale" data-page-size="6">\r\n
                                    {% if forSale|length == 0 %}\r\n
                                        <div class="p-4 text-center text-muted">{{ 'sections.no_listing'|trans({}, 'agent_property_index') }}</div>\r\n
                                    {% else %}\r\n
                                        {% for p in forSale %}\r\n
                                            <a class="list-group-item list-group-item-action py-3"\r\n
                                               href="{{ path('app_property_details', {propertyUuid: p.uuidProperty}) }}"\r\n
                                               data-item data-idx="{{ loop.index0 }}">\r\n
                                                <div class="d-flex gap-2">\r\n
                                                    <div class="ratio ratio-1x1 rounded-3 overflow-hidden bg-light" style="width:84px;">\r\n
                                                        {% if p.image %}\r\n
                                                            <img src="{{ p.image }}" alt="" class="w-100 h-100" style="object-fit:cover;">\r\n
                                                        {% else %}\r\n
                                                            <img src="{{ p.cover ?? asset('assets/img/imageIcon.png') }}" alt="" class="w-100 h-100" style="object-fit:cover;">\r\n
                                                        {% endif %}\r\n
                                                    </div>\r\n
                                                    <div class="flex-grow-1">\r\n
                                                        <div class="d-flex justify-content-between">\r\n
                                                            <strong class="text-dark small">\r\n
                                                                {{ p.address ?? ((p.city ?? '') ~ (p.commune.name ? ', ' ~ p.commune.name : '')) }}\r\n
                                                            </strong>\r\n
                                                            <h6 class="mb-0">{{ p.price|format_currency('USD', {fraction_digit: 0}) }}</h6>\r\n
                                                        </div>\r\n
                                                        <div class="text-muted small">\r\n
                                                            {% if p.bedroom %}{{ p.bedroom }} ch{% else %}— ch{% endif %} ·\r\n
                                                            {% if p.bathroom %}{{ p.bathroom }} sdb{% else %}— sdb{% endif %}\r\n
                                                        </div>\r\n
                                                        <span class="badge rounded-pill text-bg-success text-uppercase text-white small">{{ p.type }}</span>\r\n
                                                    </div>\r\n
                                                </div>\r\n
                                            </a>\r\n
                                        {% endfor %}\r\n
                                    {% endif %}\r\n
                                </div>\r\n
    \r\n
                                <div class="p-2 border-top d-flex align-items-center justify-content-between">\r\n
                                    <button class="btn btn-sm btn-outline-primary rounded-pill" data-pg-prev="#list-sale">\r\n
                                        {{ 'sections.previous'|trans({}, 'agent_property_index') }}\r\n
                                    </button>\r\n
                                    <div class="small text-muted">\r\n
                                        <span data-pg-cur="#list-sale">1</span>/<span data-pg-total="#list-sale">1</span>\r\n
                                    </div>\r\n
                                    <button class="btn btn-sm btn-outline-primary rounded-pill" data-pg-next="#list-sale">\r\n
                                        {{ 'sections.next'|trans({}, 'agent_property_index') }}\r\n
                                    </button>\r\n
                                </div>\r\n
                            </div>\r\n
                        </div>\r\n
    \r\n
                        {% if pastSales|length != 0 %}\r\n
                            {# ========== CARD: PAST SALES ========== #}\r\n
                            <div class="col-12 col-lg-12">\r\n
                                <div class="rounded-4 h-100 d-flex flex-column">\r\n
                                    <div class="p-3 border-bottom d-flex justify-content-between align-items-center">\r\n
                                        <h3 class="fw-bold mb-0">{{ 'sections.past'|trans({}, 'agent_property_index') }}</h3>\r\n
                                        <span class="badge bg-secondary-subtle text-secondary border">{{ pastSales|length }}</span>\r\n
                                    </div>\r\n
    \r\n
                                    <div class="list-group list-group-flush flex-grow-1" id="list-sold" data-page-size="6">\r\n
                                        {% if pastSales|length == 0 %}\r\n
                                            <div class="p-4 text-center text-muted">{{ 'sections.no_past_sales'|trans({}, 'agent_property_index') }}</div>\r\n
                                        {% else %}\r\n
                                            {% for p in pastSales %}\r\n
                                                <div class="list-group-item py-2" data-item data-idx="{{ loop.index0 }}">\r\n
                                                    <div class="d-flex gap-2">\r\n
                                                        <div class="ratio ratio-1x1 rounded-3 overflow-hidden bg-light" style="width:64px;">\r\n
                                                            <img src="{{ p.cover ?? asset('assets/img/imageIcon.png') }}" alt="" class="w-100 h-100" style="object-fit:cover;">\r\n
                                                        </div>\r\n
                                                        <div class="flex-grow-1">\r\n
                                                            <div class="d-flex justify-content-between">\r\n
                                                                <strong class="text-dark small">\r\n
                                                                    {{ p.address ?? ((p.city ?? '') ~ (p.commune ? ', ' ~ p.commune : '')) }}\r\n
                                                                </strong>\r\n
                                                                <span class="badge bg-secondary-subtle text-secondary border">Vendu</span>\r\n
                                                            </div>\r\n
                                                            <div class="text-muted small">\r\n
                                                                {% if p.bedrooms %}{{ p.bedrooms }} ch{% else %}— ch{% endif %} ·\r\n
                                                                {% if p.bathrooms %}{{ p.bathrooms }} sdb{% else %}— sdb{% endif %}\r\n
                                                            </div>\r\n
                                                        </div>\r\n
                                                    </div>\r\n
                                                </div>\r\n
                                            {% endfor %}\r\n
                                        {% endif %}\r\n
                                    </div>\r\n
    \r\n
                                    <div class="p-2 border-top d-flex align-items-center justify-content-between">\r\n
                                        <button class="btn btn-sm btn-outline-primary rounded-pill" data-pg-prev="#list-sold">\r\n
                                            {{ 'sections.previous'|trans({}, 'agent_property_index') }}\r\n
                                        </button>\r\n
                                        <div class="small text-muted">\r\n
                                            <span data-pg-cur="#list-sold">1</span>/<span data-pg-total="#list-sold">1</span>\r\n
                                        </div>\r\n
                                        <button class="btn btn-sm btn-outline-primary rounded-pill" data-pg-next="#list-sold">\r\n
                                            {{ 'sections.next'|trans({}, 'agent_property_index') }}\r\n
                                        </button>\r\n
                                    </div>\r\n
                                </div>\r\n
                            </div>\r\n
                        {% endif %}\r\n
                    </div>\r\n
    \r\n
                    <style>\r\n
                        .list-group-item .ratio { min-width:64px; }\r\n
                    </style>\r\n
    \r\n
                    <script>\r\n
                        (function(){\r\n
                            function initPager(listSel){\r\n
                                var list = document.querySelector(listSel);\r\n
                                if(!list) return;\r\n
                                var size = parseInt(list.getAttribute('data-page-size') || '10', 10);\r\n
                                var items = Array.prototype.slice.call(list.querySelectorAll('[data-item]'));\r\n
                                var totalPages = Math.max(1, Math.ceil(items.length / size));\r\n
                                var cur = 1;\r\n
    \r\n
                                function render(){\r\n
                                    items.forEach(function(it, idx){\r\n
                                        var page = Math.floor(idx / size) + 1;\r\n
                                        it.style.display = (page === cur) ? '' : 'none';\r\n
                                    });\r\n
                                    var curEl = document.querySelector('[data-pg-cur="'+listSel+'"]');\r\n
                                    var totEl = document.querySelector('[data-pg-total="'+listSel+'"]');\r\n
                                    if(curEl) curEl.textContent = String(cur);\r\n
                                    if(totEl) totEl.textContent = String(totalPages);\r\n
                                }\r\n
    \r\n
                                var prevBtn = document.querySelector('[data-pg-prev="'+listSel+'"]');\r\n
                                var nextBtn = document.querySelector('[data-pg-next="'+listSel+'"]');\r\n
                                if(prevBtn) prevBtn.addEventListener('click', function(){\r\n
                                    cur = (cur > 1) ? cur - 1 : totalPages;\r\n
                                    render();\r\n
                                });\r\n
                                if(nextBtn) nextBtn.addEventListener('click', function(){\r\n
                                    cur = (cur < totalPages) ? cur + 1 : 1;\r\n
                                    render();\r\n
                                });\r\n
    \r\n
                                render();\r\n
                            }\r\n
    \r\n
                            ['#list-sale','#list-rent','#list-sold'].forEach(initPager);\r\n
                        })();\r\n
                    </script>\r\n
                </div>\r\n
    \r\n
                <!-- RIGHT: YouTube + contact card -->\r\n
                <div class="col-lg-5">\r\n
                    <div class="agent-sidebar-sticky">\r\n
    \r\n
                        <div class="bg-white border rounded-4 p-3 p-lg-4 mb-3">\r\n
                            <h6 class="fw-bold mb-2">{{ 'right.video_title'|trans({}, 'agent_property_index') }}</h6>\r\n
    \r\n
                            <div class="ratio ratio-16x9 rounded-3 overflow-hidden mb-3">\r\n
                                {% if agent.videoUrl %}\r\n
                                    <iframe id="agentVideo"\r\n
                                            src="{{ agent.videoUrl }}"\r\n
                                            title="{{ 'right.video_iframe_title'|trans({}, 'agent_property_index') }}"\r\n
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"\r\n
                                            allowfullscreen\r\n
                                            loading="lazy"\r\n
                                            referrerpolicy="strict-origin-when-cross-origin"></iframe>\r\n
                                {% else %}\r\n
                                    <div class="d-flex flex-column align-items-center justify-content-center bg-light text-muted py-4 rounded-3">\r\n
                                        <i class="mdi mdi-video-off-outline fs-1 mb-2 text-secondary"></i>\r\n
                                        <span class="small">{{ 'right.no_video'|trans({}, 'agent_property_index') }}</span>\r\n
                                        \r\n
                                        {% if app.user and agent and app.user.id == agent.id %}\r\n
    \r\n
                                            <button class="btn btn-outline-danger btn-sm rounded-pill mt-3"\r\n
                                                    data-bs-toggle="modal"\r\n
                                                    data-bs-target="#agentVideoModal">\r\n
                                                <i class="mdi mdi-video-plus-outline me-1"></i>\r\n
                                                {{ 'right.add_video'|trans({}, 'agent_property_index') }}\r\n
                                            </button>\r\n
                                        {% endif %}\r\n
                                    </div>\r\n
                                {% endif %}\r\n
                            </div>\r\n
    \r\n
                            <h6 class="fw-bold mb-2">{{ 'right.contact_agent_title'|trans({}, 'agent_property_index') }}</h6>\r\n
    \r\n
                            <div class="d-grid gap-2 mb-2">\r\n
                                {% set fullPhone = (agent.agentPhoneCode ~ agent.agentPhone)|replace({' ': ''}) %}\r\n
    \r\n
                                {% if agent.agentPhone %}\r\n
                                    <a href="https://wa.me/{{ fullPhone }}?text={{ 'Bonjour, je suis intéressé par vos services immobiliers.'|url_encode }}"\r\n
                                       target="_blank"\r\n
                                       class="btn btn-success rounded-pill d-flex align-items-center justify-content-center gap-2">\r\n
                                        <i class="mdi mdi-whatsapp"></i>\r\n
                                        {{ 'right.contact_whatsapp'|trans({}, 'agent_property_index') }}\r\n
                                    </a>\r\n
    \r\n
                                    <a href="tel:{{ fullPhone }}"\r\n
                                       class="btn btn-outline-dark rounded-pill d-flex align-items-center justify-content-center gap-2">\r\n
                                        <i class="mdi mdi-phone"></i>\r\n
                                        {{ 'right.call_agent'|trans({}, 'agent_property_index') }}\r\n
                                    </a>\r\n
                                {% else %}\r\n
                                    <div class="alert alert-light border small mb-2 rounded-3">\r\n
                                        <i class="mdi mdi-phone-off text-muted me-1"></i>\r\n
                                        {{ 'right.phone_unavailable'|trans({}, 'agent_property_index') }}\r\n
                                    </div>\r\n
                                {% endif %}\r\n
                            </div>\r\n
    \r\n
                            <small class="text-muted d-block small">\r\n
                                {{ 'right.disclaimer'|trans({}, 'agent_property_index') }}\r\n
                            </small>\r\n
                        </div>\r\n
    \r\n
                        <div class="bg-white border rounded-4 p-3 p-lg-4">\r\n
                            <h6 class="fw-bold mb-2">{{ 'quick.title'|trans({}, 'agent_property_index') }}</h6>\r\n
                            <ul class="list-unstyled mb-0 small">\r\n
                                <li class="mb-1"><strong>{{ 'quick.response_time'|trans({}, 'agent_property_index') }}</strong> {{ agent.metrics.responseTime|default('1h') }}</li>\r\n
                                <li class="mb-1"><strong>{{ 'quick.rating'|trans({}, 'agent_property_index') }}</strong> {{ agent.metrics.rating|default('4.8/5') }}</li>\r\n
                                <li class="mb-1"><strong>{{ 'quick.languages'|trans({}, 'agent_property_index') }}</strong> {{ agent.languages|default(['Français'])|join(', ') }}</li>\r\n
                                <li class="mb-1"><strong>{{ 'quick.updated'|trans({}, 'agent_property_index') }}</strong> {{ "now"|date('d/m/Y') }}</li>\r\n
                            </ul>\r\n
                        </div>\r\n
    \r\n
                    </div>\r\n
                </div>\r\n
            </div>\r\n
        </div>\r\n
    \r\n
        {# ================= VALUE PROPS ================= #}\r\n
        <section class="container mb-4 px-0">\r\n
            <div class="row g-3">\r\n
                <div class="col-md-4">\r\n
                    <div class="vp card-soft">\r\n
                        <i class="mdi mdi-flash fs-2"></i>\r\n
                        <h6 class="fw-bold mb-1">{{ 'value_props.title1'|trans({}, 'agent_property_index') }}</h6>\r\n
                        <p class="text-muted small mb-0">{{ 'value_props.text1'|trans({}, 'agent_property_index') }}</p>\r\n
                    </div>\r\n
                </div>\r\n
                <div class="col-md-4">\r\n
                    <div class="vp card-soft">\r\n
                        <i class="mdi mdi-shield-home-outline fs-2"></i>\r\n
                        <h6 class="fw-bold mb-1">{{ 'value_props.title2'|trans({}, 'agent_property_index') }}</h6>\r\n
                        <p class="text-muted small mb-0">{{ 'value_props.text2'|trans({}, 'agent_property_index') }}</p>\r\n
                    </div>\r\n
                </div>\r\n
                <div class="col-md-4">\r\n
                    <div class="vp card-soft">\r\n
                        <i class="mdi mdi-finance fs-2"></i>\r\n
                        <h6 class="fw-bold mb-1">{{ 'value_props.title3'|trans({}, 'agent_property_index') }}</h6>\r\n
                        <p class="text-muted small mb-0">{{ 'value_props.text3'|trans({}, 'agent_property_index') }}</p>\r\n
                    </div>\r\n
                </div>\r\n
            </div>\r\n
    \r\n
            <div class="col-lg-12">\r\n
                <div class="bg-white border rounded-4 p-3 p-lg-4 mt-3 position-relative">\r\n
                    <h3 class="fw-bold mb-3">{{ 'reviews.title'|trans({}, 'agent_property_index') }}</h3>\r\n
    \r\n
                    {% set reviews = agent.ratings|default([]) %}\r\n
                    {% if reviews|length > 0 %}\r\n
                        <div id="reviewContainer" class="position-relative">\r\n
                            {% for t in reviews %}\r\n
                                <div class="review-item {% if loop.first %}active{% endif %} border rounded-3 p-3">\r\n
                                    <div class="small fw-semibold">{{ t.user.firstname }} {{ t.user.name }}</div>\r\n
                                    <div class="small text-muted">{{ t.createdAt|date('d/m/Y') }}</div>\r\n
                                    <div class="small mt-2">{{ t.comment }}</div>\r\n
                                </div>\r\n
                            {% endfor %}\r\n
    \r\n
                            <button class="btn btn-light btn-sm rounded-circle shadow position-absolute top-50 start-0 translate-middle-y"\r\n
                                    id="prevReview" style="width:32px;height:32px;">\r\n
                                <i class="mdi mdi-chevron-left"></i>\r\n
                            </button>\r\n
                            <button class="btn btn-light btn-sm rounded-circle shadow position-absolute top-50 end-0 translate-middle-y"\r\n
                                    id="nextReview" style="width:32px;height:32px;">\r\n
                                <i class="mdi mdi-chevron-right"></i>\r\n
                            </button>\r\n
                        </div>\r\n
                    {% else %}\r\n
                        <div class="text-muted py-3 text-center">{{ 'reviews.none'|trans({}, 'agent_property_index') }}</div>\r\n
                    {% endif %}\r\n
                </div>\r\n
            </div>\r\n
    \r\n
            <style>\r\n
                #reviewContainer { overflow: hidden; min-height: 140px; }\r\n
                .review-item { display: none; transition: opacity 0.4s ease; }\r\n
                .review-item.active { display: block; opacity: 1; }\r\n
            </style>\r\n
    \r\n
            <script>\r\n
                (function(){\r\n
                    const items = document.querySelectorAll('.review-item');\r\n
                    if (!items.length) return;\r\n
                    let current = 0;\r\n
    \r\n
                    const show = (i) => {\r\n
                        items.forEach((el, idx) => el.classList.toggle('active', idx === i));\r\n
                    };\r\n
    \r\n
                    document.getElementById('nextReview')?.addEventListener('click', () => {\r\n
                        current = (current + 1) % items.length;\r\n
                        show(current);\r\n
                    });\r\n
    \r\n
                    document.getElementById('prevReview')?.addEventListener('click', () => {\r\n
                        current = (current - 1 + items.length) % items.length;\r\n
                        show(current);\r\n
                    });\r\n
                })();\r\n
            </script>\r\n
        </section>\r\n
    \r\n
    {% endblock %}\r\n
    """
}