@import com.gu.contentatom.renderer.utils.Implicits._
@(atom: com.gu.contentatom.thrift.Atom
, data: com.gu.contentatom.thrift.atom.audio.AudioAtom
)(implicit conf: com.gu.contentatom.renderer.ArticleConfiguration)

@defining(data.trackUrl) { srcUrl: String =>
    @fragments.atoms.html.audio(
        atom.id,
        className = "podcast",
        label = data.kicker,
        headline = atom.title.getOrElse("")
    ){
        <audio
            class="atom--audio__player-element"
            data-duration="@data.duration"
            src="@srcUrl"
            preload="none"
            data-media-id="@data.contentId"
            data-title="@data.kicker"
            data-component="inarticle audio"
            >
                <p>
                    Sorry your browser does not support audio - but you can download here
                    and listen @data.trackUrl
                </p>
        </audio>

        <div class="atom--audio__controls">
            <button class="atom--audio__button-playaudio atom__button atom--audio__button--rounded atom--audio__handle">
                @fragments.icons.html.playaudio()
                @fragments.icons.html.pauseaudio()
            </button>
        </div>

        <div class="atom--audio__time">
            <div class="atom--audio__time-played">
                <span>00:00:00</span>
            </div>
            <div class="atom--audio__progress-bar">
                <input type="range" min="0" max="100" step="1" value="0">
            </div>
            <div class="atom--audio__time-duration">
                <span>@data.durationStr</span>
            </div>
        </div>

    }
}