<style>
    #wavesurfer-widget-{{ uuid }} {
        color: #1f2937;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        width: 100%;
    }
    #wavesurfer-widget-{{ uuid }} .ws-waveform {
        background: #050505;
        cursor: pointer;
        position: relative;
        width: 100%;
    }
    #wavesurfer-widget-{{ uuid }} .ws-time {
        background: rgba(0, 0, 0, 0.75);
        bottom: 0;
        color: #ddd;
        font-size: 11px;
        padding: 1px 4px;
        position: absolute;
        z-index: 11;
    }
    #wavesurfer-widget-{{ uuid }} .ws-time-start { left: 0; }
    #wavesurfer-widget-{{ uuid }} .ws-time-end { right: 0; }
    #wavesurfer-widget-{{ uuid }} .ws-actions {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        margin: 12px 0;
    }
    #wavesurfer-widget-{{ uuid }} .ws-actions-left {
        display: flex;
        gap: 10px;
    }
    #wavesurfer-widget-{{ uuid }} .ws-button,
    #wavesurfer-widget-{{ uuid }} .ws-support summary {
        border: 0;
        border-radius: 6px;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        line-height: 1.4;
        padding: 7px 12px;
    }
    #wavesurfer-widget-{{ uuid }} .ws-button:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }
    #wavesurfer-widget-{{ uuid }} .ws-play { background: #dc3545; }
    #wavesurfer-widget-{{ uuid }} .ws-download { background: #198754; }
    #wavesurfer-widget-{{ uuid }} .ws-support { position: relative; }
    #wavesurfer-widget-{{ uuid }} .ws-support summary {
        background: #d39e00;
        list-style: none;
        user-select: none;
    }
    #wavesurfer-widget-{{ uuid }} .ws-support summary::-webkit-details-marker { display: none; }
    #wavesurfer-widget-{{ uuid }} .ws-support-panel {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        bottom: calc(100% + 8px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        position: absolute;
        right: 0;
        width: 260px;
        z-index: 20;
    }
    #wavesurfer-widget-{{ uuid }} .ws-support-item {
        font-size: 12px;
        font-weight: 600;
        text-align: center;
    }
    #wavesurfer-widget-{{ uuid }} .ws-support-item img {
        display: block;
        height: auto;
        margin-bottom: 5px;
        max-width: 100%;
    }
</style>

<div id="wavesurfer-widget-{{ uuid }}">
    <div id="waveform-{{ uuid }}" class="ws-waveform">
        <div id="time-{{ uuid }}" class="ws-time ws-time-start">0:00</div>
        <div id="duration-{{ uuid }}" class="ws-time ws-time-end">0:00</div>
    </div>
    <div class="ws-actions">
        <div class="ws-actions-left">
            <button id="playButton-{{ uuid }}" class="ws-button ws-play" aria-label="Pause" hidden>⏸</button>
            <button id="downloadButton-{{ uuid }}" class="ws-button ws-download">
                {{ "下载" if language == "zh" else "Download" }} ↓
            </button>
        </div>
        <details class="ws-support">
            <summary>{{ "☕ 赞赏" if language == "zh" else "☕ Buy me a coffee" }}</summary>
            <div class="ws-support-panel">
                <div class="ws-support-item">
                    <img src="https://modelscope.cn/models/pengzhendong/pengzhendong/resolve/master/images/wechat-reward.jpg" alt="WeChat reward code">
                    {{ "微信" if language == "zh" else "WeChat" }}
                </div>
                <div class="ws-support-item">
                    <img src="https://modelscope.cn/models/pengzhendong/pengzhendong/resolve/master/images/alipay-reward.jpg" alt="AliPay reward code">
                    {{ "支付宝" if language == "zh" else "AliPay" }}
                </div>
            </div>
        </details>
    </div>
</div>

<script>
    if (typeof window.wavesurferScriptLoaded === 'undefined') {
        {{ script | safe }}
        window.wavesurferScriptLoaded = true
    }
    window.wavesurferPlayers = window.wavesurferPlayers || {}
    window.wavesurferPlayers['{{ uuid }}'] = new Player('{{ uuid }}', {{ config | tojson | safe }})
    document.getElementById('downloadButton-{{ uuid }}').addEventListener('click', function() {
        const player = window.wavesurferPlayers['{{ uuid }}']
        const url = player && player.url
        if (!url) return
        const link = document.createElement('a')
        link.href = url
        link.download = 'audio.wav'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    })
</script>
