{% extends 'base.html.twig' %}

{% block title %}Forum{% endblock %}

{% block customNavigation %}
    {% include "base/nav-customer.html.twig" %}
{% endblock %}

{% block customStyle %}
    <!-- Style Forum-->
    <link rel="stylesheet" href="/css/forum.css">
{% endblock %}

{% block body %}
    
    {# {{ include("base/ban-customer.html.twig", {name_page: "Messages"}) }} #}
   

   <!-- 
    <div class="container-forum">

        <div class="row">

            <div class="col-lg-4 col-sm-12" style="padding:3%">
                <h4 style="color:black;">Poster un nouveau message</h4>
                <hr />
                {{ form(message_form) }}
            </div>

            <div class="col-lg-8 col-sm-12" style="padding:3%;border-left:1px solid gray;width:100%;">

                {% if messages|length > 0 %}

                    {% for message in messages %}

                        <div class="comment mt-4 text-justify float-left" style="width: 100%;">

                            <img src="https://i.imgur.com/yTFUilP.jpg" alt="Avatar" class="rounded-circle" width="40" height="40">

                            {% if message.author.firstname != "" %}
                                <h5>{{ message.author.firstname }}</h5>
                            {% elseif message.author.pseudo != "" %}
                                <h5>{{ message.author.pseudo }}</h5>
                            {% else %}
                                <h5>Inconnu{{ message.author.id }}</h5>
                            {% endif%}
                            
                            <span> - {{ message.createdAt|date("d/m/Y H:i:s", "Europe/Paris") }}</span>
                            <br>
                            <p>{{ message.message }} - {{ message.id }} - {{ user.id }} </p>
                            <div class="row">
                                <div class="col-12">
                                    <hr />
                                </div>
                                <div class="col-6">
                                    <p>
                                        {% set break = false %}
                                        {% for messageLike in message.messageLikes %}
                                            {% if not break %}
                                                {% if messageLike.customer.id == user.id %}
                                                    {% set break = true %}
                                                    <i class="fa-solid fa-heart"></i>
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}

                                        {% if not break %}
                                            <i class="fa-regular fa-heart"></i>
                                        {% endif %}

                                        | {{ message.likes }} like(s) 
                                        
                                    </p>
                                </div>
                                <div class="col-6" align="right">
                                    <a data-toggle="collapse" href="#divCom{{ message.id }}" role="button" aria-expanded="false" aria-controls="divCom{{ message.id }}">
                                        <p class="numComs" >{{ message.comments|length }} commentaire(s)</p>
                                    </a>
                                </div>
                            </div>
                            <br /><br />
                            {% for comments in message.comments %}
                                <div class="row divCom collapse" id="divCom{{ message.id }}">
                                    <div class="col-1">
                                        <img src="{{ comments.author.avatar }}" alt="avatar" width="100%" height="auto"/>
                                    </div>
                                    <div class="col-11">
                                        {% if comments.author.firstname != "" %}
                                            <h6>{{ comments.author.firstname }}</h6>
                                        {% else %}
                                            <h6>Inconnu{{ comments.author.id }}</h6>
                                        {% endif %}
                                        <p>{{ comments.comment }}</p>
                                    </div>



                                    <hr />
                                    <div class="col-12">
                                        <br />
                                        <form class="coms">
                                            <div class="form-group">
                                                <input type="text" placeholder="Ajoutez un commentaire...."  value="" name="newcoms" id="newcoms" class="form-control">
                                            </div>
                                        </form>
                                        <br /><br />
                                    </div>
                                </div>
                            {% endfor %}
                        </div>

                    {% endfor %}

                {% else %}

                    <div class="text-center pb-2">
                        <p>
                            Il n'y a pas encore de messages sur le forum<br />
                        </p>
                    </div>

                {% endif %}

            </div>

        </div>

    </div>

    

    <script type="text/javascript">

        function showComs(numMessage) {
            
        }

    </script>

    <div class="d-flex justify-content-center" style="margin-top:3%">
      {% do messages.setPageRange(2)  %}
      {{ knp_pagination_render(messages, 'base/pagination.html.twig') }}
    </div>

-->


<div class="col-12" align="center">
    <p>
        <br /><br />
        Le forum est en maintenance...
    </p>
</div>

{% endblock %}