<?php if ($file = $block->source()->toFile()): ?>
    <div class="audio-wrapper">
        <p class="h3 audio-title"><?= $block->title()->or($file->title()) ?></p>
        <p class="audio-subtitle"><?= $block->subtitle()->or($file->subtitle())  ?></p>
        <!-- Audio Player -->
        <audio class="audio-element" aria-describedby="audio-desc__<?= Str::slug($file->uuid()) ?>"
            <?= $block->controls()->isTrue() ? 'controls' : '' ?>
            <?= $block->autoplay()->isTrue() ? 'autoplay' : '' ?>>
            <source src="<?= $file->url() ?>" type="<?= $file->mime() ?>">
            <?= t('audio.noSupport') ?>
        </audio>

        <!-- Hidden Description for Screen Readers -->
        <p id="audio-desc__<?= Str::slug($file->uuid()) ?>" class="visually-hidden">
            <?= $block->description()->or($file->description()) ?>
        </p>

        <!-- Transcript Section -->
        <?php if ($block->transcript()->isNotEmpty() || $file->transcript()->isNotEmpty()): ?>
            <div>
                <button id="toggle-transcript__<?= Str::slug($file->uuid()) ?>"
                    aria-expanded="false"
                    class="btn transcript-btn"
                    aria-controls="transcript__<?= Str::slug($file->uuid()) ?>"
                    data-transcript="transcript__<?= Str::slug($file->uuid()) ?>"
                    data-hide_label="<?= t('audio.transcript.buttonLabel.hide') ?>"
                    data-show_label="<?= t('audio.transcript.buttonLabel.show') ?>">
                    <?= t('audio.transcript.buttonLabel.show') ?>
                </button>
            </div>

            <div id="transcript__<?= Str::slug($file->uuid()) ?>" class="transcript" hidden aria-live="polite">
                <strong><?= t('audio.transcript.label') ?>:</strong>
                <?= $block->transcript()->or($file->transcript()) ?>
            </div>
        <?php endif ?>

    </div>
<?php endif ?>