<progress id="progress" value="0" max="100"></progress>

<div id="putme"></div>
<noscript>
    <a href="/video?v={{v}}&res={{res}}" class="button">Download Here (refresh if times out)</a>
</noscript>
<script>
    const putme = document.getElementById('putme');
    const progress = document.getElementById('progress');

    const sse = new EventSource('./init_download_event?v={{v}}&res={{res}}');
    
    sse.onmessage = (e)=>{
        var data=JSON.parse(e.data);
        if(data.type === 'progress')
        {
            progress.value = data.progress*100;
        }
        else if(data.type === "error")
        {
            const h1 = document.createElement('h1');
            h1.innerText = "Error";
            const p = document.createElement('p');
            p.innerText = data.error;
            putme.appendChild(h1);
            putme.appendChild(p);
            sse.close();
        }
        else if(data.type === "done")
        {
            const a = document.createElement('a');
            const i = document.createElement('i');
            const span = document.createElement('span');
            const rotext = document.createElement('div');
            rotext.classList.add('field');
            rotext.classList.add('label');
            rotext.classList.add('border');
            rotext.classList.add('round');
            const input = document.createElement('input');
            input.type = "text";
            input.readOnly=true;
            input.value = new URL(data.url,window.location.href).toString();
            rotext.appendChild(input);
            const lbl = document.createElement('label');
            lbl.innerText = "Url";
            rotext.appendChild(lbl);

            /*<div class="field label border">
  <input type="text">
  <label>Label</label>
</div>*/
            span.innerText = "Download";
            i.innerText="download";
            a.classList.add('button');
            a.href = data.url;

            a.appendChild(i);
            a.appendChild(span);
            putme.appendChild(a);
            putme.appendChild(document.createElement('br'));
            putme.appendChild(rotext);
            sse.close();
        }
        
    };
</script>