{% extends "base.html" %}
{% block style %}
<link rel="stylesheet" href="/post/page.css"/>
<link rel="stylesheet" href="/song.css"/>
{% endblock style %}
{% block title %}
{{ page.title }}
{% endblock title %}
{% block content %}
<div id="player">
    {% if page.extra.cover_src %}
    <img id="cover" src="{{ page.extra.cover_src }}"/>
    {% endif %}
    {% if page.extra.cover %}
        <img id="cover" src="{{ page.extra.cover }}"/>
    {% endif %}
    <h1 id="title">
        {{ page.title }}
    </h1>
    <div id="controls">
        <button id="playbutton" class="material-symbols-sharp">play_arrow</button>
        <input type="range" class="seek" id="seek" max="1" value="0" step="0.001">
    </div>
    <audio id="audio" controls src="{{ page.extra.src }}" style="display:none" preload="metadata">
</div>
<div id="page_content">
{{ page.content | safe }}
</div>
<script>
    const audio = document.getElementById("audio");
    const playbutton = document.getElementById("playbutton");
    const seek = document.getElementById("seek");
    let playing = false;
    seek.value = 0.0;

    playbutton.addEventListener("click", () => {
        if (playing) {
            audio.pause();
            playbutton.textContent = "play_arrow";
        } else {
            audio.play();
            playbutton.textContent = "pause";
        }
        playing = !playing;
    });
    audio.addEventListener("timeupdate", () => {
        const progress = (audio.currentTime / audio.duration);
        seek.value = progress;
    });

    seek.addEventListener("change", () => {
        audio.currentTime = audio.duration * seek.value;
        const progress = (audio.currentTime / audio.duration);
        seek.value = progress;
    });

    
</script>
{% endblock content %}