{#
 # For the full copyright and license information, please view the
 # docs/licenses/LICENSE.txt file that was distributed with this source code.
 #}

<ul class="list-unstyled ml-5">
  {% for message in customerThreadView.messages %}
    {% if not loop.first %}
      <li>
        <hr class="mb-3 mt-0">
      </li>
    {% endif %}

    <li class="media">
      {% if message.type == 'customer' %}
        <i class="material-icons thread-message-icon">person</i>
      {% else %}
        <img class="rounded-circle thread-message-employee-image" src="{{ message.employeeImage }}">
      {% endif %}

      <div class="media-body ml-2">
        <h4 class="mt-0 mb-1">
          <i class="material-icons text-muted">reply</i>

          {% if message.type == constant('PrestaShop\\PrestaShop\\Core\\Domain\\CustomerService\\ValueObject\\CustomerThreadMessageType::CUSTOMER') %}
            {{ message.customerName }}
          {% else %}
            {{ message.employeeName }}
          {% endif %}

          <span class="text-muted">
            <i class="material-icons text-muted font-16">calendar_today</i>
            -
            {{ format_date(message.date) }}
            <i class="material-icons text-muted font-16">access_time</i>
            -
            {{ message.date|date('H:i') }}
          </span>

          {% if message.attachmentFile %}
            <i class="material-icons font-16">attachment</i>
            <a href="{{ path('admin_common_secured_file_image_reader', {fileName: message.attachmentFile}) }}" target="_blank">
              {{ 'Attachment'|trans({}, 'Admin.Catalog.Feature') }}
            </a>
          {% endif %}

          {% if message.productId %}
            <i class="material-icons font-16">library_books</i>
            <a href="{{ path('admin_products_edit', {productId: message.productId}) }}">
              {{ 'Product'|trans({}, 'Admin.Global') }}
              {{ message.productName }}
            </a>
          {% endif %}
        </h4>
        <p class="pl-2 thread-message">{{ message.message|nl2br }}</p>
      </div>
    </li>
  {% endfor %}
</ul>
