{% extends 'base.html.twig' %}{% block title %}{{ post.title }} | Avopy{% endblock %}{% block stylesheets %} <style> .intro-banner:after, .intro-banner:before { background: initial; background-color: white !important; } .blog-post-content { padding: 16px; } .comment-content { padding: initial; } .reply-comment { margin-top: 10px !important; } .report_comment { display: inline; background-color: #f0f0f0; padding: 5px 16px; line-height: 22px; font-size: 14px; color: #666; font-weight: 500; position: absolute; right: 72px; top: 15px; border-radius: 4px; } .report_post { display: inline; background-color: #f0f0f0; padding: 5px 16px; line-height: 22px; font-size: 14px; color: #666; font-weight: 500; position: absolute; right: 70px; top: 15px; border-radius: 4px; } .report_reply { display: inline; background-color: #f0f0f0; padding: 5px 16px; line-height: 22px; font-size: 14px; color: #666; font-weight: 500; position: absolute; right: 72px; top: 15px; border-radius: 4px; } .comments ul li, .comments ul li ul li, .comments ul li ul li ul li, .comments ul li ul li ul li { margin: 20px 0 0 0px; } .comments ul li ul { margin: 0 0 0 25px; } @media screen and (max-width: 500px) { .comment-content { padding: inherit; } } blockquote { margin: initial; } .comment-by span.date { display: initial; } .btn-small { padding: 6px 15px !important; line-height: 20px !important; font-size: 13px !important; font-weight: 600 !important; margin: 0 !important; display: inline-block !important; } </style> {% if post.closed %} <style> .is-closed { display: none !important; } </style> {% endif %} {#DIV POST CONTENT#} <style> #post_content p, #post_content ul, #post_content li, #post_content table, #post_content td, #post_content th, #post_content ol { font-size: 20px; /* Taille de police pour les listes */ } </style>{% endblock %}{% block body %} <div id="main-forum"> <div class="intro-banner " style="padding: inherit; padding-top: 31px; background-color: white;"> </div> <div class="col-12"> <!-- Breadcrumbs --> <nav id="breadcrumbs" class="dark"> <ul> <li> <a href="{{ path('forum_public_country', {'country' : "uae"}) }}">Forum</a> </li> <li> <a href="{{ path('app_forum_forum_topic_show',{ 'countryMin' : post.topic.countryMin, 'slug' : post.topic.slug }) }}"> {{ post.topic.name }} </a> </li> <li> {{ post.title }} </li> </ul> </nav> </div> <div class="section margin-bottom-20 margin-top-65 padding-left-20 padding-right-20"> <div class="container "> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12"> <div class="blog-post single-post"> {% if currentForumUser %} <span class="add-post-favorite bookmark-icon {{ post.favorite(currentForumUser) ? "bookmarked" : "" }}" data-post-id="{{ post.id }}" ></span> {% endif %} {% if not currentForumUser %} <a href="{{ path('register_freelance') }}" class="report_comment" data-tippy-placement="left" data-tippy="" data-original-title="Report" title="Report" > <span class="hide-on-mobile">Report this topic</span> <i class="icon-feather-alert-triangle"></i> </a> {% else %} <a href="#report-dialog" class="report_post popup-with-zoom-anim" data-tippy-placement="left" data-tippy="" data-original-title="Report" title="Report" data-post-id="{{ post.id }}" > <span class="hide-on-mobile">Report this topic</span> <i class="icon-feather-alert-triangle"></i> </a> {% endif %} <!-- Blog Post Content --> <div class="blog-post-content"> <div class="row"> <div class="col-md-9 col-lg-9"> <h1 class="margin-bottom-10" style="font-size: 40px">{{ post.title }}</h1> </div> </div> <div class="blog-post-info-list margin-bottom-20 "> <span class="forum_avatar ripple-effect-dark" style="top: 8px" title="{{ post.forumUser.alias }}" > {{ post.forumUser.avatarSpanName }} </span> <span class="blog-post-info">{{ post.timeCreateString }}</span> {% if post.closedAt %} <span class="blog-post-info text-blue" style="">{{ post.timeCloseString }}</span> {% endif %} {% if not post.actived %} <br> <span class="text-error blog-post-info " style="background-color: #de5959; color: white"> <b>Pending validation by the admin</b> </span> {% endif %} </div> <div id="post_content" class="margin-top-20 margin-bottom-10 margin-left-10 margin-left-10 text-black"> {{ post.content|raw }} </div> <div> <br> {% if not currentForumUser %} <a href="{{ path('register_freelance') }}" class="button btn-small is-closed"> <i class="icon-line-awesome-reply"></i> Reply this topic </a> {% elseif post.forumUser != currentForumUser %} <a href="#forum_comment_content" class="button btn-small is-closed"> <i class="icon-line-awesome-reply"></i> Reply this topic </a> {% endif %} {% if is_granted('ROLE_ADMIN') %} <a href="{{ path('forum_admin_post_not_active_delete', {'id' : post.id}) }}" onclick="if (confirm('Confirmer la suppression du post?')){return true;}else{event.stopPropagation(); event.preventDefault();}" class="delete button red ico" title="Supprimer le post"> <i class="icon-feather-trash-2"></i> Supprimer </a> {% endif %} {% if post.forumUser == currentForumUser and not post.closed %} <a href="{{ path('app_forum_forum_post_edit', { 'country' : post.topic.countryMin, 'id' : post.id }) }}" class="button btn-small gray"> <i class="icon-line-awesome-comment"></i> Edit this topic </a> {% endif %} {% if post.forumUser == currentForumUser and not post.closed %} <a href="#dialog-post-close" class="button btn-small skyblue popup-with-zoom-anim" style="float: right"> <i class="icon-line-awesome-close"></i> Close the topic </a> {% endif %} </div> </div> </div> </div> </div> </div> <div class="container "> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12"> <section class="comments"> <h3 class="margin-top-25 margin-bottom-0">Replies <span class="comments-amount">({{ post.comments|length }})</span> </h3> <ul> {% for comment in post.comments %} <li class="width-100"> <div class="comment-content"> <blockquote class="text-black"> <div class="comment-by"> <span class="forum_avatar ripple-effect-dark" style="top: 8px" title="{{ comment.forumUser.alias }}" > {{ comment.forumUser.avatarSpanName }} </span> <span class="date">{{ comment.timeCreateString }}</span> {% if not currentForumUser %} <a href="{{ path('register_freelance') }}" class="report_comment" data-tippy-placement="left" data-tippy="" data-original-title="Report" title="Report" > <span class="hide-on-mobile"></span> <i class="icon-feather-alert-triangle"></i> </a> {% else %} <a href="#report-dialog" class="report_comment popup-with-zoom-anim" data-tippy-placement="left" data-tippy="" data-original-title="Report" title="Report" data-comment-id="{{ comment.id }}" > <span class="hide-on-mobile"></span> <i class="icon-feather-alert-triangle"></i> </a> {% endif %} {% if is_granted('ROLE_ADMIN') %} <a href="{{ path('forum_admin_comment_delete', {'id' : comment.id, 'redirect' : 'post'}) }}" onclick="if (confirm('Confirmer la suppression du reply?')){return true;}else{event.stopPropagation(); event.preventDefault();}" class="delete red ico" title="Supprimer le reply" style="color: #e53038"> <i class="icon-feather-trash-2"></i> Supprimer </a> {% endif %} </div> <p>{{ comment.content|nl2br }}</p> {% if not currentForumUser %} <a href="{{ path('register_freelance') }}" class="button ripple-effect btn-small is-closed"> <i class="icon-line-awesome-reply"></i> Reply </a> {% else %} <a type="button" class="button ripple-effect btn_reply btn-small text-white is-closed" data-comment-id="{{ comment.id }}"> <i class="icon-line-awesome-reply"></i> Reply </a> {% endif %} {% if currentForumUser and not post.closedAt %} <div class="div_reply" data-reply-id="{{ comment.id }}" style="display: none"> <br> <div class="row"> <div class="col-lg-8 col-md-8 col-sm-12"> {% set formReply = formReplys['comment_'~comment.id] %} {{ form_start(formReply, { 'action' : path('app_forum_forum_comment_reply', {'id' : comment.id }) }) }} {{ form_widget(formReply.content, { 'attr' : { 'placeholder' : "Reply", 'cols' : "10", 'rows' : "1" } }) }} <!-- Button --> <button class="button button-sliding-icon ripple-effect margin-bottom-40" type="submit" style="width: 176.203px;"> Reply <i class="icon-material-outline-arrow-right-alt"></i> </button> {{ form_end(formReply) }} </div> </div> </div> {% endif %} <ul> {% for reply in comment.commentReplies %} <li class="reply-comment"> <div class="comment-content-reply"> <div class="arrow-comment"></div> <div class="comment-by"> <span class="forum_avatar ripple-effect-dark" style="top: 8px" title="{{ reply.forumUser.alias }}" > {{ reply.forumUser.avatarSpanName }} </span> <span class="date"> {{ reply.timeCreateString }} </span> </div> <p class="text-black"> {{ reply.content|nl2br }} </p> {% if not currentForumUser %} <a href="{{ path('register_freelance') }}" class="report_reply" data-tippy-placement="left" data-tippy="" data-original-title="Report" title="Report" > <span class="hide-on-mobile"></span> <i class="icon-feather-alert-triangle"></i> </a> {% else %} <a href="#report-dialog" class="report_reply popup-with-zoom-anim" data-tippy-placement="left" data-tippy="" data-original-title="Report" title="Report" data-reply-id="{{ comment.id }}" > <span class="hide-on-mobile"></span> <i class="icon-feather-alert-triangle"></i> </a> {% endif %} {% if is_granted('ROLE_ADMIN') %} <a href="{{ path('forum_admin_commentReply_delete', {'id' : reply.id, 'redirect' : 'post'}) }}" onclick="if (confirm('Confirmer la suppression du reply?')){return true;}else{event.stopPropagation(); event.preventDefault();}" class="delete red ico" title="Supprimer le reply" style="color: #e53038"> <i class="icon-feather-trash-2"></i> Supprimer </a> {% endif %} </div> </li> {% endfor %} </ul> </blockquote> </div> </li> {% endfor %} </ul> </section> </div> </div> </div> </div> {% if currentForumUser and not post.closedAt and post.forumUser != currentForumUser %} <div class="container "> <div class="row"> <div class="col-lg-8 col-md-8 col-sm-12"> <h3 class="margin-bottom-30">Add reply</h3> <!-- Form --> {{ form_start(formComment) }} {{ form_widget(formComment.content, { 'attr' : { 'placeholder' : "Reply", 'cols' : "30", 'rows' : "5" } }) }} <!-- Button --> <button class="button button-sliding-icon ripple-effect margin-bottom-40" type="submit" style="width: 176.203px;"> Reply <i class="icon-material-outline-arrow-right-alt"></i> </button> {{ form_end(formComment) }} </div> </div> </div> {% endif %} </div> <!-- Features Cities --> {% include('forum/forum_post/layout/_report_popup.html.twig') %} {#CLOSED POST#} <div id="dialog-post-close" class="zoom-anim-dialog mfp-hide dialog-with-tabs custom-dialog"> <div class="sign-in-form"> <ul class="popup-tabs-nav"> <li><a href="#tab1">Close</a></li> </ul> <div class="popup-tabs-container"> <div class="popup-tab-content" id="tab1"> <h3 class="margin-bottom-10">Are you sure you want to close this topic?</h3> <p> No one will be able to answer and you will not be able to reopen it. </p> <div class="d-flex justify-content-end"> <a href="{{ path('app_forum_forum_post_closed', {'id' : post.id}) }}" class="button">Close</a> </div> </div> </div> </div> </div>{% endblock %}{% block footer %}{% endblock %}{% block javascripts %} {# ------ REPLY COMMENT ------ #} <script> // Sélection de tous les boutons de réponse const replyButtons = document.querySelectorAll('.btn_reply'); // Ajouter un gestionnaire d'événement à chaque bouton de réponse replyButtons.forEach(button => { button.addEventListener('click', () => { const commentId = button.getAttribute('data-comment-id'); const replyDiv = document.querySelector(`.div_reply[data-reply-id="${commentId}"]`); if (replyDiv) { replyDiv.style.display = (replyDiv.style.display === 'none') ? 'block' : 'none'; // Mettre le focus sur le textarea dans le div de réponse const textarea = replyDiv.querySelector('textarea'); if (textarea) { textarea.focus(); } } }); }); </script> {# ------ FORUM FAVORITE# ----- #} {% include('forum/forum_post/_script.html.twig') %} {# ------ REPORT SCRIPT # ----- #} {% include('forum/forum_post/layout/_report_script.html.twig') %}{% endblock %}