{% extends "comments/base.html" %}

{% load i18n %}
{% load comments_ink %}

{% block title %}{% blocktrans %}Who reacted with {{ reaction }}{% endblocktrans %}{% endblock %}

{% block content %}
<main>
  <article>
    <div class="container">
      <h2 class="text-center">{% blocktrans with reaction_icon=reaction.icon %}Who reacted with <span class="emoji">&{{ reaction_icon }};</span> to this comment?{% endblocktrans %}</h2>
      <h6 class="text-center pb24">
        {% trans "Comment sent to:" %}<br/>
        <a href="{{ comment.content_object.get_absolute_url }}">{{ comment.content_object }}</a>
      </h6>
    </div>
    <div class="central-column">
      <div class="{% dci_custom_selector %} pb32">
        <div id="c{{ comment.id }}" class="comment-box">
          <div class="comment">
            <div class="header">
              <div>{% if comment.url and not comment.is_removed %}<a href="{{ comment.url }}" target="_new">{{ comment.name }}</a>{% else %}{{ comment.name }}{% endif %}&nbsp;&sdot;&nbsp;<span class="muted">{{ comment.submit_date }}</span>&nbsp;&nbsp;<a class="permalink" title="comment permalink" href="{% get_inkcomment_permalink comment page_number %}">¶</a></div>
            </div>
            <div class="body body-bordered">
              {{ comment.comment|linebreaks|escape }}
            </div>
            <div class="feedback feedback-bordered"></div>
          </div>
        </div>

        <section class="reaction-form">
          {% if authors|length > 0 %}
            <h5 class="text-center">{% blocktrans with reaction_icon=reaction.icon %}List of users that reacted with <span class="emoji">&{{ reaction_icon }};</span>{% endblocktrans %}</h5>
            <ul>
              {% for name in authors %}
                <li>{{ name }}</li>
              {% endfor %}
            </ul>
          {% else %}
            <h5 class="text-center">{% blocktrans %}No user reacted yet with {{ reaction }}{% endblocktrans %}</h5>
          {% endif %}
        </section>
      </div>
    </div>
  </article>
</main>
{% endblock %}
