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

{% block styleSheets %}
  {{ parent() }}
  <link rel="stylesheet" href="{{ asset('css/question_show.css') }}">
{% endblock %}

{% block title %}{{ question.title }}{% endblock %}

{% block body %}
<div class="block">
  <div class="d-flex flex-row-nowrap">
    {% include "partials/_rating.html.twig" with { rating: question.rating, from: 'question', id: question.id } %}
    <div class="d-flex flex-column">
      <div class="d-flex flex-row-nowrap align-items-center pb-30">
        <h3 class="mr-10">{{ question.title }}</h3>
        <div class="question-tag">QUESTION</div>

        {# Bouton Effacer #}
        {% if app.user and (question.author.id == app.user.id or is_granted('ROLE_ADMIN')) %}
        <form method="post" action="{{ path('question_delete', {'id': question.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette question ?');">
            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ question.id) }}">
            <button class="delete-tag btn">Effacer</button>
          </form>
        {% endif %}
            <img class="avatar ml-auto" src="{{ asset(question.author.picture) }}">
          </div>
          <p class="question-text">{{ question.content }}</p>
          {% if question.comments is not empty %}
          <div class="separator"></div>
          {% endif %}
          {% for comment in question.comments %}
          <div class="d-flex flex-row-nowrap mb-20">
            {% include "partials/_rating.html.twig" with { rating: comment.rating, from: 'comment', id: comment.id} %}
            <div class="mb-20">
              <a href="{{ path('user', {id : comment.author.id }) }}" class="d-flex flex-row-nowrap align-items-center pb-10">
                <img class="avatar mr-10" src="{{ asset(comment.author.picture) }}">
                <p class="clickable">{{ comment.author.fullname }}</p>

            {# Bouton Effacer #}
            {% if app.user and (comment.author.id == app.user.id or is_granted('ROLE_ADMIN'))%}
              <form method="post" action="{{ path('comment_delete', {'id': comment.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette réponse ?');">
                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ comment.id) }}">
                <button class="delete-tag btn">Effacer</button>
              </form>
            {% endif %}

            {# Bouton Modifier #}
            {% if app.user and comment.author.id == app.user.id %}
              <form method="get" action="{{ path('comment_edit_form', {'id': comment.id}) }}">
                <button class="edit-tag btn">Modifier 📝</button>
              </form>
            {% endif %}
            <small class="ml-auto">{{ comment.createdAt | ago(locale="fr") }}</small>
          </a>
          <p class="question-response-text">{{ comment.content }}</p>
        </div>
      </div>
      {% endfor %}
      {% if form is defined %}
      <div class="separator"></div>
      <h3 class="pb-20">Votre réponse</h3>
      <div class="comment-form">
        {{ form_start(form)}}
        {{ form_rest(form) }}
        <button class="btn btn-primary">Soumettre</button>
        {{ form_end(form)}}
      </div>
      {% endif %}
    </div>
  </div>
</div>

{% endblock %}