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

{% block head %}
    {{ parent() }}
    <meta name="description" content="Profil de {{ user.fullname }} sur AMA - découvrez les contributions et les intérêts de {{ user.firstname }} dans notre communauté de partage de connaissances.">
{% endblock %}

{% block title %}{{ user.fullname }}{% endblock %}

{% block body %}

  <div class="block mb-20">
    <h2 class="pb-30">{{ user.fullname }}</h2>
    <div class="d-flex flex-row-nowrap">
      <img src="{{ user.picture }}" class="mr-10 profile-picture">
      <ul>
      <li class="mb-10">
        <strong class="mr-10">Prénom:</strong>{{user.firstname }}
      </li>
      <li class="mb-10">
        <strong class="mr-10">Nom:</strong>{{user.lastname }}
      </li>
      <li class="mb-10">
        <strong class="mr-10">Email:</strong>{{user.email }}</li>
      </li>
      </ul>
    </div>
  </div>

  <div class="block mb-20">
    <h3 class="pb-30">Les questions de {{user.fullname}}</h3>
    <ul>
      {% for question in user.questions %}
        <li>
          <strong>{{ question.title }}</strong>
          {% if question.comments|length > 0 %}
            <ul>
              {% for comment in question.comments %}
                <li><em>Réponses :</em> {{ comment.content | slice(0, 50) | nl2br }}</li><br>
              {% endfor %}
            </ul>
          {% else %}
            <p>Pas de réponses pour l'instant.</p>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>

    <div class="block">
    <h3 class="pb-30">Les réponses de {{user.fullname}}</h3>
    <ul>
      {% for comment in user.comments %}
        <li>
          <em>Question :</em> {{ comment.question.title }}<br>
          <strong>Réponse :</strong> {{ comment.content | slice(0, 100) | nl2br }}
        </li><br>
      {% endfor %}
    </ul>
  </div>

{% endblock %}