{% extends "base.html" %}
{% block title %}Channels {% endblock %}
{% block content %}
    <script>
        function addChannel() {
            let name = document.getElementById("addChannelName").value;
            fetch("{{ basePath }}/api/channels", {
                method: "POST",
                body: JSON.stringify({
                    name: name,
                    url: document.getElementById("addChannelURL").value
                }),
                headers: {
                    "Content-Type": "application/json"
                }
            }).then(res => {
                if (res.ok) location.href = "{{ basePath }}/channels/" + name;
                else return res.json();
            }).then(body => alert("Failed to add channel: " + body.error));
        }
    </script>
    <div class="container text-left" style="margin-top: 20px">
        <div class="row row-cols-2">
            <div class="col col-auto me-auto"><h4>Channels</h4></div>
            <div class="col col-auto"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addChannelModal">+ Add</button></div>
        </div>
        <div class="row row-cols-1 row-cols-md-4 g-4 g-md-3">
            {% for name, channel in channels %}
                {% include 'channel_tile.html' %}
            {% endfor %}
        </div>
    </div>
    <div class="modal fade" id="addChannelModal" tabindex="-1" aria-labelledby="addChannelModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="addChannelModalLabel">Add a channel</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="addChannelName" class="form-label">Name</label>
                            <input type="text" class="form-control" id="addChannelName">
                        </div>
                        <div class="mb-3">
                            <label for="addChannelURL" class="form-label">URL</label>
                            <input type="url" class="form-control" id="addChannelURL">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="addChannel()">Add</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}