{{ $branch := (getenv "BRANCH") }}
<script>
  document.querySelectorAll(".theme").forEach((theme) => {
    const themeName = theme.getAttribute('data-name');
    const buttons = theme.querySelector(".theme-buttons");
    let branch = {{ if $branch }}{{ $branch }}{{ else }}null{{ end }}
    let context = null
    if (theme.classList.contains("theme-detail")) { context = "detail" }
    if (theme.classList.contains("theme-card")) { context = "card" }

    if (buttons) {
        buttons.addEventListener('click', (e) => {
            let action = null;
            if (e.target.classList.contains("theme-button-demo")) {
                action = "demo"
            }
            if (e.target.classList.contains("theme-button-github")) {
                action = "github"
            }
            if (e.target.classList.contains("theme-button-stackbit")) {
                action = "stackbit"
            }

            if (action) {
                const event = {
                    theme: themeName,
                    action: action,
                    category: 'Themes',
                    label: themeName
                };

                if (context) {
                    event.context = context;
                }
                if (branch) {
                    event.branch = branch;
                }

                analytics.track("Theme Clicked", event);
            }
        });
    }
  });
</script>