{% extends 'layout.twig' %}

{% block title %}

    {{ad.titre}}

{% endblock %}

{% block body %}
    
{% if message is defined %}
<div class="alert alert-success" role="alert">
  {{message}}
</div>
{% endif %}


        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" style="width: 50rem; margin-top:50px">
            <div class="carousel-indicators">
              {% for image in ad.images %}
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{loop.index0}}" {% if loop.first %} class="active" {% endif %}  aria-current="true" aria-label="Slide {{loop.index}}"></button>
              {% endfor %}
            </div>
            <div class="carousel-inner">
              {% for image in ad.images%}
              <div class="carousel-item {% if loop.first %} active {% endif %}">
                <img src="../../uploads/{{image}}" style="height: 30rem; border-radius: 30px;"  class="d-block w-100 thumb-post" alt="...">
              </div>
              {% endfor %}
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
            <br/>
          <div class="desc_index">
            <div class="jumbotron mt-3">
              <h1 class="display-5">{{ad.titre}}</h1><br/>
            <button type="button" class="btn btn-primary position-relative">
              Prix : <strong "style="color: green;"">{{ad.prix}}&euro;</strong>
              <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
              {{ad.type}}
            <span class="visually-hidden">unread messages</span>
            </span>
            </button>    


            <button type="button" class="btn btn-primary position-relative mx-5">
              <strong "style="color: green;"">{{ad.statusBien}}</strong>
              <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
              {{ad.statusPublication}}
            <span class="visually-hidden">unread messages</span>
            </span>
            </button> 

            </div>
          </div>
          <br/>
            
                <p class="">Disponible le : <strong>{{ad.date|date('Y-m-d')}} </strong></p>
                <br/><hr/>
                <h3 class="display-3">Description:</h3>
                <p class="">{{ad.description}}</p>
                
            
            <br/> <hr/>
            <!--Les Commentaire -->
            <div class="container mt-5 mb-5">
              <h1>Commentaires : </h1>
                <div class="d-flex justify-content-center row">
                    <div class="d-flex flex-column col-md-8">

                      {% if login is defined %}

                      {% else %}

                        <form class="commented-section mt-2" action="/ads/ad/comment/{{ad.id}}" method="POST">
                            <div>
                              <label for="username"><strong>Nom et Prénom</strong></label> <br/>
                              <input type="text" id="username" name="username" required>
                            </div>
                            <div>
                              <label for="message"><strong>Question</strong></label> <br/>
                              <textarea id="question" name="question" placeholder="Question" rows="3" required>

                              </textarea>
                            </div>
                            <button class="btn btn-primary" type="submit">Envoyer</button>
                        </form>
                        {% endif %}
                        <div class="coment-bottom bg-white p-2 px-4">
                          <hr/>
                            {% for question in ad.questions %}
                            <div class="commented-section mt-2">
                                <div class="d-flex flex-row align-items-center commented-user">
                                    <h5 class="mr-2">{{question.username}}</h5><span class="dot mb-1"></span>
                                </div>
                                <div class="comment-text-sm"><span>{{question.question}}</span></div>
                                <div class="reply-section">
                                    <div class="d-flex flex-row align-items-center voting-icons"><i class="fa fa-sort-up fa-2x mt-3 hit-voting"></i><i class="fa fa-sort-down fa-2x mb-3 hit-voting"></i><span class="ml-2">Réponse : </span><span class="dot ml-2"></span>
                                      {% if question.reponse is defined %} 
                                      <h6 class="ml-2 mt-1">{{question.reponse}}</h6>
                                      {% else %}
                                      {% if login is defined %}
                                        <form action="/ad/user/{{ad.id}}/{{question.id}}" method="POST">
                                          <input type="text" name="reponse" id="reponse">
                                          <button type="submit">Répondre</button>

                                        </form>
                                      {% else %}
                                      <h6 class="ml-2 mt-1">pas de reponse pour l'instant</h6>
                                      {% endif %}
                                      {% endif %}
                                      
                                    </div>
                                </div>
                            </div>
                            <hr/>
                            {% endfor %}

                            

                        </div>
                    </div>
                </div>
            </div>
{% endblock %}

<script>
    $('.carousel').carousel()
</script>