{% extends 'webapp/base.html' %}
{% load static %}

{% block title %} #{{ channel }} {% endblock title %}


{% block header %}
  <h2 id="channel-name">{{ channel }}</h2>
{% endblock header %}

{% block form %}
<form id="new-message-form">
    {% csrf_token %}
    <div>
      <textarea placeholder="Type your message here" id="content" name="content" rows="4" cols="40" autofocus required></textarea>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
</form>
{% endblock form %}

{% block content %}
<ul>
    {% for message in dummy_channel.messages.all %}
    {% with msg_id=message.id  content=message.content %}
    <li>
        <div class="message-content">
            <div>
                <span class="date">{{ message.created }}</span>
                <p>{{ content }}</p>
            </div>
            
            <form class="edit-message-form" data-id="{{ msg_id }}">
                {% csrf_token %}
                <textarea name="content" value="{{content}}">{{ content }}</textarea>
                <button data-id="{{msg_id}}" class="edit-message">Save changes</button>
            </form>
        </div>
        <div class="btn-group">
            <button data-id="{{msg_id}}" class="show-edit-msg-form">Edit message</button>
            <button data-id="{{msg_id}}" class="delete-message delete-btn">Delete message</button>
        </div>
    </li>
    {% endwith %}
    {% endfor %}
</ul>

<div id="back">
    <a href="{% url 'channels' %}">All channels</a>
</div>
{% endblock content %}

{% block extra_js %}
<script>
    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
</script>
<script src="{% static 'webapp/js/messages.js' %}"></script>
{% endblock extra_js %}
