{extends "focus/focus.base.tpl"}

{*
// js
require('@static/bootstrap-v4/js/tab.js');
require('@assets[shared]/js/simplebar.js');

wpj.domUtils.initOpeners(); // responsive

// scss
@import "@css[shared]/components/_simplebar";
*}

{block "focus-title"}
    {t}Parametry{/t}
{/block}

{block "focus-content"}
    <div class="filter-focus-content">
        <div class="tab-content">
            {$filterFocusTabIsActive = false scope="global"}
            {include "filter/block.filter.variations.tpl" focus=true filter_openers=true}

            {include "filter/block.filter.params.tpl" focus=true filter_openers=true}

            {include "filter/block.filter.producers.tpl" focus=true filter_openers=true}
        </div>

       <div class="nav-tabs-outer" data-simplebar data-simplebar-auto-hide="true">
          <ul class="nav nav-tabs" role="tablist">
              {$hasActive = false}
              {foreach $body.dynamic_filter.variations as $id_label => $label}
                  {if $label.values}
                     <li class="nav-item">
                        <a href="#variation-{$id_label}" class="nav-link{if !$hasActive} active{/if}" role="tab" data-toggle="tab">
                            {$label.name}
                        </a>
                     </li>
                      {$hasActive = true}
                  {/if}
              {/foreach}

              {foreach $body.dynamic_filter.parameters as $parameter}
                  {if $parameter.values}
                     <li class="nav-item">
                        <a href="#parameter-{$parameter.id}" class="nav-link{if !$hasActive} active{/if}" role="tab" data-toggle="tab">
                            {$parameter.name}
                        </a>
                     </li>
                      {$hasActive = true}
                  {/if}
              {/foreach}

              {if $body.dynamic_filter.producers.values}
                 <li class="nav-item">
                    <a href="#znacky" class="nav-link{if !$hasActive} active{/if}" role="tab" data-toggle="tab">
                        {t}Značky{/t}
                    </a>
                 </li>
                  {$hasActive = true}
              {/if}
          </ul>
       </div>
    </div>

    <div class="filter-focus-footer">
        <div data-filter-reset="wrap">
            <a href="" class="reset" data-filter-reset="reset">{t}Zrušit vybrané parametry{/t}</a>
        </div>
        <a href="#" class="btn {$submit_btn_class|default:"btn-primary"}" data-focus="close"> {* todo classu přes vars ? *}
            <span data-reload="pagerTotal-focus">{t}Zobrazit{/t}&nbsp;{$body.pager.total}&nbsp;{t plural="produkty" plural5="produktů" count=$body.pager.total}produkt{/t}</span>
        </a>
    </div>
{/block}
