fonctionnalité like and dislike of a post

templates/base.html.twig

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         {% block stylesheets %}
             <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+            <link rel="stylesheet" href="{{ asset('css/app.css') }}">
         {% endblock %}
 
         {% block javascripts %}

templates/post/index.html.twig

@@ -12,10 +12,25 @@
             <p class="card-text">{{ post.commentary }}</p>
         </div>
         <div class="card-footer">
-            {{ post.likes.count() }} ❤️
+            <span class="likes-count">{{ post.likes.count() }}</span>
+            {% if app.user %}
+                <button class="like-toggle btn no-style {% if post.likes.contains(app.user) %}liked{% else %}not-liked{% endif %}"
+                        data-post-id="{{ post.id }}"
+                        data-like-url="{{ path('app_posts_like', {id: post.id}) }}"
+                        data-unlike-url="{{ path('app_posts_unlike', {id: post.id}) }}">
+                    {% if post.likes.contains(app.user) %}❤️{% else %}♡{% endif %}
+                </button>
+            {% else %}
+                <span class="like-toggle no-style not-liked">♡</span>
+            {% endif %}
             {{ post.comments.count() }} 💬
         </div>
     </div>
 {% endfor %}
 {% include '_pagination.html.twig' %}
 {% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script src="{{ asset('js/like_toggle.js') }}"></script>
+{% endblock %}