{% extends 'layout.html.j2' %}
{% block content %}
{% if feed.image_filename %}
<img src="/{{ id }}/{{ feed.image_filename }}" width="256px" />
<br><br>
{% endif %}
<h1>{{ feed.name }}</h1>
<p>
    <b>Actions:</b>
    <a href="/admin/{{ id }}/edit">Edit</a>
</p>
<p>
    <b>Description:</b>
    {{ feed.description }}
</p>
<p>
    <b>Subscribe:</b>
<pre><code>{{ feed_uri }}</code></pre>
<small><i>For Apple Podcasts, open the app and click on the Library tab along the bottom. Select the ellipsis in the top
        right and hit "Follow a Show by URL...". For other apps, look for an option allowing you to add a show by
        URL.</i></small>
</p>


<h2>Upload Episode</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 type="module">
    import HugeUploader from "https://cdn.skypack.dev/huge-uploader";

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

    window.reset = () => {
        resp.innerHTML = "";
    }

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

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

        setFormEnabled(false);

        const uploader = new HugeUploader({
            endpoint: "/admin/{{ id }}/upload",
            file: file,
            headers: {
                "name": encodeURI(file.name)
            }
        });

        uploader.on("error", (err) => {
            console.error("Upload error", err);
            resp.innerHTML = "Something has gone wrong!";
            setFormEnabled(true);
        });

        uploader.on("progress", (progress) => {
            if (progress.detail == 100) return;
            resp.innerHTML = `Uploading ${progress.detail}%...`;
        });

        uploader.on("finish", (body) => {
            console.log("Upload complete", body);
            resp.innerHTML = "Upload complete! The episode will be processed in the background. This may take a few minutes but it's safe to navigate away.";
            setFormEnabled(true);
            fileInput.value = "";
        });
    }
</script>
{% endblock %}