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

{% block title %} Channels {% endblock title %}

{% block header %}
  <h2>Channels</h2>
{% endblock header %}

{% block form %}
<form id="new-channel-form">
    {% csrf_token %}
    <div>
      <input type="text" id="channel_name" name="channel_name" autofocus required>
    </div>
    <div>
      <button type="submit">New Channel</button>
    </div>
</form>
{% endblock form %}

{% block content %}
<ul>
  {% for channel in channels %}
    {% with channel.channel_name as channel_name %}
      <li data-id="{{ channel_name }}">

        <div>
          <a href="{% url 'channel_detail' channel_name %}">{{ channel }}</a>
          <span class="date">{{ channel.created }}</span>
        </div>

        <div class="btn-group channel-btn">
          <a href="{% url 'channel_detail' channel_name %}">
            <button class="enter-btn">Go to channel</button>
          </a>
          <button class="delete-btn" data-channel="{{channel_name}}">Delete</button>
        </div>

      </li>
    {% endwith %}
  {% endfor %}
</ul>
{% endblock content %}


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