{% load rich_text %}
{% if mails %}
<div id="accordion">
  {% for mail in mails %}
  <div class="card mail-card">
    <div class="card-header" id="subject-{{ mail.pk }}">
      <h5 class="mb-0 d-flex justify-content-between align-items-baseline w-100" data-toggle="collapse" data-target="#mail-{{ mail.pk }}" aria-controls="mail-{{ mail.pk }}">
        <span class="mb-2 mt-2">
        <i class="fa fa-envelope mr-2"></i>
            {{ mail.subject }}
        </span>
        <small class="text-muted">{{ mail.sent }}</small>
      </h5>
    </div>

    <div id="mail-{{ mail.pk }}" class="collapse" aria-labelledby="subject-{{ subject.pk }}" aria-expanded="false" data-parent="#accordion">
      <div class="card-body">
          {{ mail.text|rich_text }}
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}
