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

{% block title %}Mon profil{% endblock %}

{% block body %}

<div class="block mb-20">
  <div class="d-flex align-items-center">
    <h2 class="mb-0">Mon profil</h2>
    <img src="{{ app.user.picture }}" class="profile-picture ml-auto"> 
  </div>
  {{ form_start(form) }}
  {{ form_rest(form) }}
  <div class="d-flex flex-row-nowrap">
    <button class="btn btn-primary flex-fill">Mettre à jour</button>
    <a href="{{ path('deactivate_account') }}" class="btn flex-fill" onclick="return confirm('Êtes-vous sûr de vouloir désactiver votre compte (de Bouderbala 🤡) ?');">Désactiver mon compte</a>
    <a href="{{ path('logout') }}" class="btn btn-logout flex-fill p-20">Déconnexion</a>
  </div>
  {{ form_end(form) }}
</div>

  <div class="block mb-20">
    <h3 class="pb-30">Mes questions</h3>
    <ul>
      {% for question in app.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">Mes réponses</h3>
    <ul>
      {% for comment in app.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>

<div class="block">
    <h3>Contacter un Administrateur</h3><br><br>
    {{ form_start(contactForm) }}
    {{ form_row(contactForm.name) }}
    {{ form_row(contactForm.email) }}
    {{ form_row(contactForm.subject) }}
    {{ form_row(contactForm.message) }}
    <button type="submit" class="btn btn-primary mr-10">Envoyer</button>
    {{ form_end(contactForm) }}
</div>
{% endblock %}