{% extends 'base.html' %}
{% block content %}

<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<br><br><br>

<h2 style="opacity: 80%; padding-left:40px">General Chat</h2>

<style>
  .chat-container{
/*    width:420px;*/
    height:470px;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .messages{
    flex:1;
    overflow-y:auto;
    padding: 10px 40px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .message{
    background:#334155;
    padding:2px 5px;
    border-radius:2px;
  }

  .message-author{
    font-size:15px;
    padding: 0px 5px;
    opacity:0.7;
/*    margin-bottom:4px;*/
  }

  p {
    font-size: 18px;
    padding: 0px 5px;
    margin: 0;
  }

  .input-area{
    display:flex;
    height: 60px;
    padding:20px 40px;
    border-top:1px solid rgba(255,255,255,0.05);
  }

  .input-area input{
    flex: 1;
    padding:10px;
    font-size: 30px;
    border-radius:8px;
    border:none;
    outline:none;
    background:#0f172a;
    color:white;
  }

  .input-area button{
/*    flex: 1;*/
    margin-left:8px;
    padding:10px 14px;
    border:none;
    border-radius:8px;
    background:#3b82f6;
    color:white;
    cursor:pointer;
  }

    footer {;
      margin-top: 10px;
    }
</style>

<div class="chat-container">
  <div
  id="post-list"
  class="messages"
  hx-get="{% url 'ChatPartial' %}"
  hx-trigger="every 3s"
  hx-swap="innerHTML">
    {% include "blog/partials/postList.html" %}
  </div>

  <form
  class="input-area"
  id="post-form"
  hx-post="{% url 'Chat' %}"
  hx-target="#post-list"
  hx-swap="beforeend">
    {% csrf_token %}
    {{ form.content }}
    <button type="submit">Send</button>
  </form>
</div>

<script>

var container = document.getElementById("post-list");
let autoScroll = true
function isAtBottom(){
    return container.scrollHeight - container.scrollTop - container.clientHeight < 50;
}

container.addEventListener("scroll", () => {
    autoScroll = isAtBottom();
});

document.body.addEventListener("htmx:afterSwap", (e) => {
    if(e.target.id !== "post-list") return
    if(autoScroll){ container.scrollTop = container.scrollHeight; }
});

</script>
{% endblock %}