templates/comments.html.twig line 1

Open in your IDE?
  1. <section class="comments-section mt-4 mb-4" id="comments" style="text-align: left; max-width: 700px; margin-left: auto; margin-right: auto;">
  2.     <h3 class="text-white mb-3">
  3.         Comments
  4.         {% if comments|length > 0 %}
  5.             <span class="badge bg-secondary">{{ comments|length }}</span>
  6.         {% endif %}
  7.     </h3>
  9.     {% for message in app.flashes('comment') %}
  10.         <div class="alert alert-success alert-dismissible fade show" role="alert">
  11.             {{ message }}
  12.             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  13.         </div>
  14.     {% endfor %}
  16.     {% if app.user %}
  17.         <div class="mb-4 p-3 rounded" style="background: rgba(255,255,255,0.05);">
  18.             {{ form_start(formComment) }}
  19.             <div style="width: 100%;">
  20.                 {{ form_widget(formComment.comment, {'attr': {'class': 'form-control bg-dark text-white border-secondary comment-form-textarea mb-2', 'placeholder': 'Write a comment...', 'rows': '2', 'style': 'width: 100%;'}}) }}
  21.                 {{ form_errors(formComment.comment) }}
  22.             </div>
  23.             <div class="d-flex align-items-center gap-2 flex-wrap">
  24.                 {{ form_widget(formComment.captcha) }}
  25.                 {{ form_widget(formComment.submit, {'attr': {'class': 'btn btn-primary btn-sm ms-auto'}}) }}
  26.             </div>
  27.             {{ form_end(formComment) }}
  28.         </div>
  29.     {% else %}
  30.         <p class="mb-4">
  31.             <a href="{{ path('security_login') }}" class="btn btn-outline-light btn-sm">Log in to leave a comment</a>
  32.         </p>
  33.     {% endif %}
  35.     {% if comments|length > 0 %}
  36.         {% for comment in comments %}
  37.             <div class="d-flex gap-2 mb-3 pb-3 {% if not loop.last %}border-bottom border-secondary{% endif %}">
  38.                 <a href="{{ path('user_user', {username: comment.user.username}) }}" title="{{ comment.user.username }}" class="flex-shrink-0">
  39.                     {% if comment.user.picture == 1 %}
  40.                         <img class="rounded-circle" src="{{ asset('images/user/' ~ comment.user.username ~ '.jpg') }}" width="36" height="36" alt="{{ comment.user.username }}"/>
  41.                     {% else %}
  42.                         <picture>
  43.                             <source srcset="{{ asset('images/generic-avatar-comment.webp') }}" type="image/webp">
  44.                             <img class="rounded-circle" src="{{ asset('images/generic-avatar-comment.jpg') }}" width="36" height="36" alt="{{ comment.user.username }}"/>
  45.                         </picture>
  46.                     {% endif %}
  47.                 </a>
  48.                 <div class="flex-grow-1" style="min-width: 0;">
  49.                     <div class="d-flex justify-content-between align-items-center">
  50.                         <div>
  51.                             <a href="{{ path('user_user', {username: comment.user.username}) }}" class="text-white text-decoration-none fw-bold small">{{ comment.user.username }}</a>
  52.                             <small class="text-muted ms-1">{{ comment.createdAt|ago }}</small>
  53.                         </div>
  54.                         {% if app.user == comment.user or is_granted('ROLE_ADMIN') %}
  55.                             <div class="dropdown">
  56.                                 <button class="btn btn-sm btn-link text-muted p-0 comment-dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  57.                                     <i class="fas fa-ellipsis-v"></i>
  58.                                 </button>
  59.                                 <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
  60.                                     <li><a class="dropdown-item" href="{{ path('user_edit_comment', {id: comment.id}) }}"><i class="fas fa-edit me-2"></i>Edit</a></li>
  61.                                     <li><a class="dropdown-item text-danger" href="{{ path('user_remove_comment', {id: comment.id}) }}" onclick="return confirm('Are you sure you want to delete this comment?');"><i class="fas fa-trash me-2"></i>Delete</a></li>
  62.                                 </ul>
  63.                             </div>
  64.                         {% endif %}
  65.                     </div>
  66.                     <p class="mb-0 mt-1 text-light small">{{ comment.comment|e }}</p>
  67.                 </div>
  68.             </div>
  69.         {% endfor %}
  70.     {% else %}
  71.         <p class="text-muted fst-italic small">No comments yet. Be the first to comment!</p>
  72.     {% endif %}
  73. </section>