{{define "bg-photo-toggle"}}
{{if not .IsProduction}}
<!-- Background Photo Toggle (Dev Only) -->
<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-outline" width="24" height="24"></iconify-icon>
</button>
<script>
(function() {
  var photos = [{{range $i, $p := .BgPhotos}}{{if $i}},{{end}}'{{$p}}'{{end}}];
  var key = 'bg-photo-enabled';
  var keyIdx = 'bg-photo-index';

  function pickPhoto() {
    var idx = Math.floor(Math.random() * photos.length);
    localStorage.setItem(keyIdx, idx);
    return photos[idx];
  }

  function applyPhoto(enabled) {
    var btn = document.getElementById('bg-photo-toggle');
    var icon = btn ? btn.querySelector('iconify-icon') : null;
    if (enabled) {
      var idx = parseInt(localStorage.getItem(keyIdx), 10);
      var url = (isNaN(idx) || idx >= photos.length) ? pickPhoto() : photos[idx];
      document.body.style.setProperty('--bg-photo-url', 'url("' + url + '")');
      document.body.classList.add('bg-photo');
      if (icon) icon.setAttribute('icon', 'mdi:image');
    } else {
      document.body.classList.remove('bg-photo');
      if (icon) icon.setAttribute('icon', 'mdi:image-outline');
    }
  }

  // Init: pick a random photo each load, restore toggle state
  pickPhoto();
  var enabled = localStorage.getItem(key) !== 'false'; // default on
  applyPhoto(enabled);

  window.toggleBgPhoto = function() {
    var isOn = document.body.classList.contains('bg-photo');
    localStorage.setItem(key, !isOn);
    applyPhoto(!isOn);
  };
})();
</script>
{{end}}
{{end}}