<div id="player-audio-controls" data-source-selector="#image-clip video">
    <a href="{{env::request|urlattr}}" class="audio-mute" aria-label="Ton stummschalten" data-label="Ton stummschalten">{{svg_inline::f6824c1a-7d6c-11ed-9054-d8cb8a1a4c4f}}</a>
    <a href="{{env::request|urlattr}}" class="audio-unmute" aria-label="Ton einschalten" data-label="Ton einschalten">{{svg_inline::9b19cf0a-7d6d-11ed-9054-d8cb8a1a4c4f}}</a>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function() {

    var controls = document.getElementById('player-audio-controls');
    var video = controls !== undefined && controls.dataset.sourceSelector !== undefined ? document.querySelector(controls.dataset.sourceSelector) : undefined;

    if (video !== undefined)
    {
      let mute = controls.querySelector('.audio-mute'),
        unmute = controls.querySelector('.audio-unmute');

      if (mute !== undefined && unmute !== undefined)
      {
        if (video.muted)
        {
          unmute.classList.add('-show');
          mute.classList.remove('-show');
        } else {
          mute.classList.add('-show');
          unmute.classList.remove('-show');
        }

        unmute.addEventListener('click', (event) => {
          event.preventDefault();
          if (video.muted) {
            video.muted = false;
            mute.classList.add('-show');
            unmute.classList.remove('-show');
          }
        });
        mute.addEventListener('click', (event) => {
          event.preventDefault();
          if (!video.muted) {
            video.muted = true;
            unmute.classList.add('-show');
            mute.classList.remove('-show');
          }
        });
      }
    }

  });
</script>