#set ($tabButtonContainerId = "sol_tab_$contentNodeId")

<div id="$tabButtonContainerId" class="sol-tab-button-container">
   <ul>
   #foreach($tab in $layoutNames)
      <li class="sol-tab-button" data-tab-index="$velocityCount">$tab</li>
   #end
   </ul>
</div>

<script nonce="$!nonce">
   svDocReady(function() {
      var clicks = 0;

      ## Den container som innehåller alla tabbar
      var tabsContainer = $svjq(`#${tabButtonContainerId}`).closest(".sol-js-tabs-container");

      ## Alla tabbar
      var tabsContent = tabsContainer
         .find(".sv-decoration-content")
         .first()
         .find(" > div");

      tabsContainer
         .find(".sv-decoration-content")
         .first()
         .addClass("sol-tabs-decoration-content");

      ## Tabknappar
      var tabButtons = tabsContainer.find(".sol-tab-button");
      var width = 100/tabButtons.length;

      $svjq(tabButtons).each(function(index, tabButton) {
         $svjq(tabButton).css("width", width + "%");

         ## Skapar rubrik till dragspel
         var title = $svjq(tabButton).text();
         $svjq(tabsContent[index]).prepend("<h3 class='sol-accordion-heading' data-tab-index='" + (index + 1) + "'>" + title + "</h3>");

         var onTabClick = function() {
            ## Ta bort sol-tab-active på alla
            tabButtons.removeClass("sol-tab-active");

            ## Sätter sol-tab-active på den klickade fliken
            $svjq(this).addClass("sol-tab-active");

            tabsContent.hide();
            var tabIndex = $svjq(this).attr("data-tab-index");
            var clickedTabContent = tabsContainer.find(".sv-decoration-content > div:nth-child(" + tabIndex + ")");
            clickedTabContent.addClass("sol-tab-active");
            clickedTabContent.show();
         };

         $svjq(tabButton).on('click', onTabClick);
      });

      ## Skapa lyssnare till dragspelet
      tabsContainer.find(".sol-accordion-heading").each(function(index, heading) {
         var onAccordionClick = function() {
            tabsContainer.find(".sol-accordion-heading").removeClass("sol-tab-active");

            $svjq(this).addClass("sol-tab-active");
            
            var headings = $svjq(this).parent().siblings().find(".sol-accordion-heading");

            $svjq(headings).each(function(index, heading) {
               $svjq(heading).siblings().hide();
            });

            $svjq(this).siblings().show();

            if (clicks > 0) {
               $svjq('html, body').animate({
                  scrollTop: ($svjq(this).offset().top-70)
               }, 1000);
               console.log("test");
            }
            ++clicks;
         }

         $svjq(heading).on('click', onAccordionClick);
      });

      if (window.matchMedia('screen and (max-width: 550px)').matches) {
         tabsContainer.find('.sol-accordion-heading[data-tab-index="1"]').trigger('click');
      } else {
         tabsContainer.find('.sol-tab-button[data-tab-index="1"]').trigger('click');
      }
   });
</script>