{{define "bg-photo-toggle"}}
{{if .BgPhotos}}
<!-- Background Photo — random on each load -->
<script>
(function() {
  var photos = [{{range $i, $p := .BgPhotos}}{{if $i}},{{end}}'{{$p}}'{{end}}];
  if (!photos.length) return;
  var url = photos[Math.floor(Math.random() * photos.length)];
  document.body.style.setProperty('--bg-photo-url', 'url("' + url + '")');
  document.body.classList.add('bg-photo');

  window.toggleBgPhoto = function() {
    var isOn = document.body.classList.contains('bg-photo');
    if (isOn) {
      document.body.classList.remove('bg-photo');
    } else {
      document.body.classList.add('bg-photo');
    }
    var btn = document.getElementById('bg-photo-toggle');
    if (btn) {
      var icon = btn.querySelector('iconify-icon');
      if (icon) icon.setAttribute('icon', isOn ? 'mdi:image-outline' : 'mdi:image');
    }
  };
})();
</script>

<!-- Background Photo Toggle -->
<button
    id="bg-photo-toggle"
    class="fixed-btn bg-photo-btn no-print has-tooltip"
    aria-label="Toggle background photo"
    data-tooltip="Toggle background photo"
    onclick="toggleBgPhoto()">
    <iconify-icon icon="mdi:image" width="24" height="24"></iconify-icon>
</button>
{{end}}
{{end}}