{% load static %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<div class="form-container">
  <div class="form-inner">
    <div class="selected-message-container">
      <div class="selected-message-header">
        <i class="fas fa-reply reply-icon"></i>
        <span>Replying to message</span>
        <button type="button" class="clear-selection"><i class="fas fa-times"></i></button>
      </div>
      <div class="selected-message-content"></div>
    </div>

    <form method="post" action="" class="chat-form">
      {% csrf_token %}
      <input type="hidden" name="reply_to_id" id="reply_to_id">
      <input type="text" name="message_text" placeholder="Type your message here..." class="chat-input">
      <button type="submit" class="send-button"><i class="fas fa-paper-plane"></i></button>
    </form>
  </div>
</div>

<style>
.chat-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

.chat-input {
  flex-grow: 1;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 24px;
  background-color: var(--body-bg);
  color: var(--body-fg);
  font-size: 1em;
}

.send-button {
  background: none;
  border: none;
  color: var(--button-bg);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}

.send-button:hover {
  color: var(--button-hover-bg);
}
</style> 