{{ if $.Param "enableThemeChange" }}
<div class="footer__theme">
  <label class="label p2">{{ i18n "footer-theme" }}</label>
  <div class="dropdown">
    <button class="dropdown-trigger">
      <span class="select-theme__label caption">
        {{ if .Site.Params.themeOptions }}
          {{ index .Site.Params.themeOptions 0 }}
        {{ end }}
      </span>
      {{ partial "svgs/arrow/keyboard-arrow-up.svg" (dict "width" 20 "height" 20) }}
    </button>
    <div class="dropdown-content select-theme">
      {{ if .Site.Params.themeOptions }}
        {{ range $index, $value := .Site.Params.themeOptions }}
        <a href="#" class="dropdown-item select-theme__item {{ if (eq $index 0) }}is-active{{ end }}">
          {{ . }}
        </a>
        {{ end }}
      {{ end }}
    </div>
  </div>
</div>            
{{ end }}
<script>
  // theme change
  var localTheme = localStorage.getItem('theme');
  if (localTheme) {
    $('.select-theme__label').text(localTheme);
    $('.select-theme__item').each(function() {
      $(this).removeClass('is-active');
    });
    $(`.select-theme a:contains("${localTheme}")`).addClass('is-active');
  }

  $('.select-theme__item').click(function (e) {
    var selectedThemeVariant = $(e.target).text().trim();
    var currentThemeVariant = $('.select-theme__label').text().trim();    
    localStorage.setItem('theme', selectedThemeVariant);

    $('.select-theme__label').text(selectedThemeVariant);
    $('#root').removeClass(`theme__${currentThemeVariant}`).addClass(`theme__${selectedThemeVariant}`);
    var nodes = $('.select-theme').children('.dropdown-item');

    nodes.each(function () {
      if ($(this).text().trim() === selectedThemeVariant) {
        if (!$(this).hasClass('is-active')) {
          $(this).addClass('is-active');          
        }
      } else {
        if ($(this).hasClass('is-active')) {
          $(this).removeClass('is-active');
        }
      }
    });

    if (window.mermaid) {
      if (selectedThemeVariant === "dark" || selectedThemeVariant === "hacker") {
        mermaid.initialize({ theme: 'dark' });
        location.reload();
      } else {
        mermaid.initialize({ theme: 'default' });
        location.reload();
      }      
    }
  });
</script>