{% extends "wagtailadmin/base.html" %}
{% load static i18n %}

{% block titletag %}
    {% trans "Chat with" %} {{ chat_user.email }}
{% endblock titletag %}

{% block extra_css %}
<style>
  .admin-chat-messages {
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
    max-height: 350px;
    overflow-y: auto;
    border-radius: 6px;
    border: 1px solid #e2e2e2;
  }
  .admin-chat-messages li {
    padding: 0.7em 1em;
    border-bottom: 1px solid #ececec;
    display: flex;
    align-items: baseline;
    font-size: 1.05em;
  }
  .admin-chat-messages li:last-child {
    border-bottom: none;
  }
  .admin-chat-message-meta {
    color: #888;
    font-size: 0.92em;
    margin-right: 0.5em;
    white-space: nowrap;
  }
  .admin-chat-form {
    display: flex;
    gap: 0.5em;
    margin-top: 1em;
  }
  .admin-chat-form input[type="text"] {
    flex: 1;
    padding: 0.5em;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 1em;
  }
  .admin-chat-form button {
    padding: 0.5em 1.2em;
    border-radius: 4px;
    border: none;
    background: #0073e6;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
  }
  .admin-chat-form button:hover {
    background: #005bb5;
  }
  .admin-message-admin {
    background: #334;
  }
  .admin-message-user {
  }
</style>
{% endblock extra_css %}

{% block content %}
  {% include "wagtailadmin/shared/header.html" with title="Chat" icon="mail" %}
  <div style="padding: 0 3em;">
    <a href="{% url 'user_chat' %}" class="button button-secondary">&larr; {% trans "Back" %}</a>
    <h1>{% trans "Chat with" %} <em>{{ chat_user.email }}</em></h1>

    <ul class="admin-chat-messages">
      {% for message in chat_messages %}
        <li class="{% if message.sender.id == chat_user.id %}admin-message-user{% else %}admin-message-admin{% endif %}">
          <span class="admin-chat-message-meta">{{ message.timestamp|date:"Y-m-d H:i" }}</span>
          <strong>{{ message.sender.email }}:&nbsp;</strong> {{ message.content }}
        </li>
      {% empty %}
        <li>{% trans "No messages found." %}</li>
      {% endfor %}
    </ul>
    <form action="/chat/send/{{ chat_user.id }}/" method="post" class="admin-chat-form">
      {% csrf_token %}
      <input type="text" name="content" placeholder="{% trans "Type your message here..." %}" required>
      <button type="submit">{% trans "Send" %}</button>
    </form>
  </div>
{% endblock content %}