#if ($json) 
$json
#elseif (!$services.categories.isEmpty() || !$services.uncategorized.isEmpty())
<div id="searchAccordion" class="searchBox">
    <button class="af-selfservice-btn" tabindex="-1">
        <svg class="af-headerBtn__svg" width="22px" height="22px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="Page-11" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="Startsida-Copy-132" transform="translate(-1795.000000, -51.000000)" stroke="#595959" stroke-width="3">
                    <g id="Group-16" transform="translate(1776.000000, 32.000000)">
                        <g id="Group-15" transform="translate(21.000000, 21.000000)">
                            <path d="M14,14 L21.65625,21.65625" id="Line-3" stroke-linecap="square"></path>
                            <circle id="Oval" cx="8" cy="8" r="8"></circle>
                        </g>
                    </g>
                </g>
            </g>
        </svg>

    </button>


    <div class="selfservice__form">
        <label></label>
        <input id="searchAccordionInput" class="searchBox__input" type="search" placeholder="Sök i självservice" value="" autocomplete="off" aria-expanded="true">
    </div>
</div>
<ul class="af-eServices">
#if (!$services.categories.isEmpty())
    #foreach ($c in $services.categories)
    <li class="af-eServices__category">
        <div class="af-eServices__category__name env-collapse-header" data-env-collapse>$!{c.name}<span class="env-collapse-header--icons"></span></div>
        <ul class="af-eServices__items">
            #foreach ($s in $c.services)
            <li class="af-eServices__item">
                <div class="af-eServices__item__name">$!{s.name}</div>
                #if ($s.url)
                <a href="$!{s.url}" class="af-eServices__item__service">Till e-tjänsten</a>
                #end
                #if ($s.form)
                <a href="$!{s.form}" class="af-eServices__item__form">Blankett</a>
                #end
            </li>
            #end
        </ul>
    </li>
    #end
#end
#if (!$services.uncategorized.isEmpty())
    <li class="af-eServices__category">
        <div class="af-eServices__category__name">Övriga</div>
        <ul class="af-eServices__items">
            #foreach ($s in $services.uncategorized)
            <li class="af-eServices__item">
                <div class="af-eServices__item__name">$!{s.name}</div>
                #if ($s.url)
                <a href="$!{s.url}" class="af-eServices__item__service">Till e-tjänsten</a>
                #end
                #if ($s.form)
                <a href="$!{s.form}" class="af-eServices__item__form">Blankett</a>
                #end
            </li>
            #end
        </ul>
    </li>
#end
</ul>
<style>
   #searchAccordion.searchBox .af-headerBtn {
      margin-left: 0;
   }
   .selfservice__form {
          display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 54px;
    width: 100%;
    background-color: white;
    padding: 0;
    position: relative;
    margin: 0 auto;
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 14px;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
   }
   .af-selfservice-btn {
      display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 54px;
    height: 54px;
    border: 0;
    background-size: 24px;
    background-position: center 18px;
    background-repeat: no-repeat;
    font-size: .833rem;
    font-weight: 500;
    padding-bottom: 10px;
    color: #595959;
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 14px;
    text-decoration: none;
    background-color: white;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
   
   .af-selfservice-btn > svg {
          width: 54px;
    height: 18px;
    margin-bottom: 8px;
   }
button {
    outline: 0;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    cursor: pointer;
   }
   .af-eServices__items {
      transition: all 0.1s ease;
    	overflow: hidden;
      max-height: 0;
   }
   .af-eServices__category__name {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
   .af-eServices__item.highlight {
          border: 2px solid #005cbb;
          margin: 2px 0;
   }
   .af-eServices__item {
     scroll-margin-top: 85px;
     border-top: 2px solid transparent;
     line-height: initial;
   }
</style>

<script>
   var input = document.getElementById("searchAccordionInput");
	var acc = document.getElementsByClassName("af-eServices__category__name");
   var current = 0;

   
	window.addEventListener('DOMContentLoaded', (event) => {
      [].forEach.call(acc, function(item, index, a) {
         item.addEventListener("click", function() {
            var panel = this.nextElementSibling;
            this.classList.toggle("env-collapse--expanded");
            if (panel.style.maxHeight) {
               panel.style.maxHeight = null;
            } else {
               panel.style.maxHeight = panel.scrollHeight + "px";
            }
         });
      });
      
       function ScrollToTarget(index) {
         var highlightedListElement = document.querySelectorAll(".af-eServices__item.highlight")[index];
                      console.log(highlightedListElement)
         if(highlightedListElement){
            const offset = 85;
            const bodyRect = document.body.getBoundingClientRect().top;
            const elementRect = highlightedListElement.getBoundingClientRect().top;
            const elementPosition = elementRect - bodyRect;
            const offsetPosition = elementPosition - offset;
            window.scrollTo({
               top: offsetPosition,
               behavior: 'smooth'
            });
         }
      }
      
     
    function setPanelsHeight(searchText, searchTitle, acc, panels, input, filter) {
         for (var i = 0; i < panels.length; i++) {
            for (i = 0; i < acc.length; i++) {
               searchText = panels[i].textContent || panels[i].innerText;
               searchTitle = acc[i].textContent || acc[i].innerText;
               if (input.value !== "") {
                  if (searchText.toUpperCase().indexOf(filter) > -1 || searchTitle.toUpperCase().indexOf(filter) > -1) {
                     if (!acc[i].classList.contains("env-collapse--expanded")) {
                        acc[i].classList.add("env-collapse--expanded");
                     }
                     panels[i].style.maxHeight = panels[i].scrollHeight + 42 + "px";

                  } else {
                     if (acc[i].classList.contains("env-collapse--expanded")) {
                        acc[i].classList.remove("env-collapse--expanded");
                     }
                     panels[i].style.maxHeight = null;
                  }
               } else {
                  if (acc[i].classList.contains("env-collapse--expanded")) {
                     acc[i].classList.remove("env-collapse--expanded");
                  }
                  panels[i].style.maxHeight = null;
               }
            }

         }
   }
       function setHighlight(filter) {
         var listElements = document.querySelectorAll(".af-eServices__item");
         for (let i = 0; i < listElements.length; i++) {
            if (listElements[i].firstElementChild.textContent.toUpperCase().indexOf(filter) >= 0) {
               if(!listElements[i].classList.contains("highlight")) {
                   listElements[i].classList.add("highlight");
                  
               }
            }
         }
         
        ScrollToTarget(current++);

      }
      

      input.addEventListener("keyup", function(event) {
         if (event.which === 13 || event.keyCode === 13) {
            var input, filter, i, acc, panels, searchText, searchTitle, highlighted;
            input = document.getElementById("searchAccordionInput");
          
            filter = input.value.toUpperCase();
            acc = document.getElementsByClassName("af-eServices__category__name");
            panels = document.getElementsByClassName("af-eServices__items");
            highlighted = document.querySelectorAll(".af-eServices__item.highlight");
            current >= highlighted.length ? current = 0 : null
            if(input.hasAttribute('oldvalue') && input.getAttribute('oldvalue') != filter ) {
               for (var i = 0; i < highlighted.length; i++) {
               highlighted[i].classList.remove('highlight');
               current = 0;
            }
            }
            input.setAttribute("oldvalue",filter);
            
            setPanelsHeight(searchText, searchTitle, acc, panels, input, filter)

            setTimeout(function(){ setHighlight(filter); }, 150);

         }
      });
   });
</script>


#end