#if ($showFilter)
<div class="sv-showtags-portlet">
   #foreach ($tag in $pages.tags)
   #if($tag == 'alla')
   	#set($badgeType = 'info')
   	#set($tagText = 'visa alla')
   #else
   	#set($badgeType = 'capitalize')
   	#set($tagText = $tag)
   #end
   <span class="env-badge env-badge--$badgeType" style="background:#005bbb">
      <button onclick="setTagFilter(this, '$tag')" class="env-text--capitalize" style="color:#fff;text-decoration:none;font-size:1rem;padding:.25em .5em;line-height:20px;appearance:none;background:transparent;border:none">
      	$tagText
      </button>
   </span>
   #end
</div>
#end

#if (!$pages.teasers.isEmpty())
<ul class="af-navPageList" #if($showFilter) style="margin-top: 1rem" #end>
    #foreach ($teaser in $pages.teasers)
    <li class="af-navPageList__item" #if($showFilter) #foreach ($tag of $teaser.tags) $tag #end #end>
        <a class="af-navPagePuff" href="$teaser.url">
            <div class="af-navPagePuff__image" style="background-image: url('$teaser.img')"></div>
            <div class="af-navPagePuff__textWrapper">
                <div class="af-navPagePuff__title">
                    $teaser.title
                </div>
                <div class="af-navPagePuff__description">
                    $!{teaser.description}
                </div>
            </div>
        </a>
    </li>
    #end
</ul>
#end

#if (!$pages.plain.isEmpty())
<ul class="af-navPageList">
    #foreach ($page in $pages.plain)
    <li class="af-navPageList__item" #if($showFilter) #foreach ($tag of $page.tags) $tag #end #end>
        <a class="af-btn af-navPageList__btn" href="$page.url">
            <div class="af-navPageList__title">
                $page.title
            </div>
            <svg fill="#292e33" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                <path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/>
            </svg>
        </a>
    </li>
    #end
</ul>
#end

#if ($showFilter)
<script>

	svDocReady(function() {
      //$svjq('.af-navPageList__item:not([vandrarhem])').hide();
   });
   
   function setTagFilter(element, tag) {
      $svjq('.env-badge--info').removeClass('env-badge--info').addClass('env-badge--capitalize');
      $svjq(element).parent().removeClass('env-badge--capitalize').addClass('env-badge--info');
      
      $svjq('.af-navPageList__item').show();
      
      if(tag != 'alla') {
      	$svjq('.af-navPageList__item:not([' + tag + '])').hide();
      }
   }

</script>
#end