struct SingleFilePlayer: HtmlProducer {

    func populate(_ result: inout String) {
        result += "<div class='song-container'>"
        result += "<div class='song-player'>"
        result += "<div class='song-cover-container amplitude-play-pause amplitude-paused'>"
        result += "<div class='song-player-button'>"
        result += "<svg class='play-icon'>\(Icon.AudioPlayer.Play.usageString)"
        result += "<svg class='pause-icon'>\(Icon.AudioPlayer.Pause.usageString)"
        result += "</div>"
        result += "<img data-amplitude-song-info='cover_art_url' class='article-thumbnail-image' width='78' height='78'></img>"
        result += "</div>"
        result += "<div class='song-info'>"
        result += "<div class='song-timeline'>"
        result += "<span class='amplitude-current-time song-current-time'></span>"
        result += "<span class='amplitude-duration-time song-duration-time'></span>"
        result += "</div>"
        result += "<div class='song-progress'>"
        result += "<input type='range' class='amplitude-song-slider song-slider'>"
        result += "<progress id='song-played-progress' class=' amplitude-song-played-progress song-progress-bar'></progress>"
        result += "</div>"
        result += "<span data-amplitude-song-info='name'></span>"
        result += "<span data-amplitude-song-info='album' style='font-weight: 500;'></span>"
        result += "</div></div></div>"
    }

    static func footer(name: String, artist: String, album: String, url: String, cover: String) -> String {
        """
        <script>
        window.onload = () => {
            Amplitude.init({
                "songs": [{
                    "name": "\(name)",
                    "artist": "\(artist)",
                    "album": "\(album)",
                    "url": "\(url)",
                    "cover_art_url": "\(cover)"
                }]
            });
        };
        </script>
        """
    }
}