{% extends 'layout.html.j2' %}
{% block content %}
<h1>{{ feed.name }}</h1>
<a href="/admin/{{ id }}/edit">Edit</a>
<h2>Info</h2>
<p><b>Description:</b> {{ feed.description }}</p>
<p>
    Subscribe at:
</p>
<pre><code>{{ feed_uri }}</code></pre>
<h2>Upload</h2>
<div>
    <label for="fileInput">Choose file to upload</label>
    <input type="file" id="fileInput" name="fileInput" onchange="reset()">
    <input type="button" id="submitButton" value="Upload" onclick="go()">
    <p id="response"></p>
</div>
<h2>Episodes</h2>
<table>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Published</th>
            <th scope="col">Length</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for episode in feed.episodes %}
        <tr>
            <th scope="row">{{ episode.name }}</th>
            <td>{{ episode.publish_date.strftime("%H:%M %d/%m/%Y") }}</td>
            <td>
                {% if episode.duration %}
                {{ (episode.duration / 60) | round | int }}min
                {% else %}
                ?
                {% endif %}
            </td>
            <td>
                <a href="/admin/{{ id }}/{{ episode.id }}/delete">Delete</a>
                <a href="/admin/{{ id }}/{{ episode.id }}/edit">Edit</a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<script>
    const resp = document.getElementById("response");
    const fileInput = document.getElementById("fileInput");
    const submitButton = document.getElementById("submitButton");

    function reset() {
        resp.innerHTML = "";
    }

    function setFormEnabled(enabled) {
        submitButton.disabled = !enabled;
        fileInput.disabled = !enabled;
    }

    function go() {
        const file = fileInput.files[0];
        if (!file) {
            return
        }

        setFormEnabled(false);

        const xhr = new XMLHttpRequest();

        xhr.upload.addEventListener("progress", (event) => {
            if (event.lengthComputable) {
                const percentComplete = Math.round((event.loaded / event.total) * 100);
                resp.innerHTML = "Uploading: " + percentComplete + "%";
            }
        });

        xhr.addEventListener("load", () => {
            if (xhr.status === 200) {
                resp.innerHTML = "Upload complete, check back in a few minutes after the episode has processed.";
                fileInput.value = "";
            } else {
                resp.innerHTML = "Upload failed";
            }
            setFormEnabled(true);
        });

        xhr.addEventListener("error", () => {
            resp.innerHTML = "Upload failed";
            setFormEnabled(true);
        });

        xhr.open("POST", "/admin/{{ id }}/upload", true);
        xhr.setRequestHeader("Content-Type", file.type);
        xhr.setRequestHeader("filename", encodeURI(file.name));
        xhr.send(file);
    }
</script>
{% endblock %}