<link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/font-awesome/css/font-awesome.min.css">

<style>
    a { text-decoration: none }
    .jp-RenderedHTMLCommon {
        padding-right: 0 !important;
    }
    .jp-RenderedHTMLCommon th, .jp-RenderedHTMLCommon td {
        text-align: left !important;
    }
    .waveform {
        background-color: black;
        cursor: pointer;
        position: relative;
        width: 100%;
    }
    .waveform ::part(region-content) {
        color: #016780;
        margin-top: 42px !important;
    }
    .duration, .time {
        background: rgba(0, 0, 0, 0.75);
        color: #DDDD;
        font-size: 11px;
        position: absolute;
        bottom: 0;
        z-index: 11;
    }
    .duration { right: 0 }
    .time { left: 0 }
</style>
<div id="waveform-{{ uuid }}" class="waveform">
    <div id="time-{{ uuid }}" class="time">0:00</div>
    <div id="duration-{{ uuid }}" class="duration">0:00</div>
</div>
<button id="playButton-{{ uuid }}" class="btn btn-danger me-3 my-3" style="box-shadow: none" hidden>
    <i class="fa fa-pause"></i>
</button>
{%- set label = "下载" if language == "zh" else "Download" %}
<button id="downloadButton-{{ uuid }}" class="btn btn-success my-3">
    {{ label }} <i class="fa fa-download"></i>
</button>
<div class="dropup my-3 float-end text-end">
    <a href="https://github.com/pengzhendong/wavesurfer" target="_blank">
        <img class="img-fluid me-3" src="https://img.shields.io/github/stars/pengzhendong/wavesurfer.svg">
    </a>
    <button class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" data-bs-target="#dropdownMenu-{{ uuid }}" aria-expanded="false">
        <i class="fa {{ "fa-thumbs-o-up" if lang == "zh" else "fa-coffee"}}"></i> {{ "赞赏" if lang == "zh" else "Buy me a coffee"}}
    </button>
    <ul id="dropdownMenu-{{ uuid }}" class="dropdown-menu p-2" style="width: 280px;">
        <table class="table table-bordered mb-0">
            <tbody>
                <tr>
                    <td class="text-center p-2" style="width: 50%;">
                        <img class="img-fluid d-block mx-auto" src="https://modelscope.cn/models/pengzhendong/pengzhendong/resolve/master/images/wechat-reward.jpg">
                        {%- set label = "微信" if language == "zh" else "WeChat" %}
                        <div class="text-center mt-2 fw-bold">{{ label }}</div>
                    </td>
                    <td class="text-center p-2" style="width: 50%;">
                        <img class="img-fluid d-block mx-auto" src="https://modelscope.cn/models/pengzhendong/pengzhendong/resolve/master/images/alipay-reward.jpg">
                        {%- set label = "支付宝" if language == "zh" else "AliPay" %}
                        <div class="text-center mt-2 fw-bold">{{ label }}</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </ul>
</div>

<script>
    if (typeof window.scriptLoaded === 'undefined') {
        {{ script }}
        window.scriptLoaded = true
    }
    player_{{ uuid }} = new Player('{{ uuid }}', {{ config | tojson | safe }})
    downloadButton_{{ uuid }} = document.getElementById('downloadButton-{{ uuid }}')
    downloadButton_{{ uuid }}.addEventListener('click', function() {
        const link = document.createElement('a')
        link.href = player_{{ uuid }}.url
        link.download = 'audio.wav'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    })
</script>
