{extends file="index.tpl"}

{block 'content'}
   <style type="text/css">
      @import "/common/static/kss/kss.css";
   </style>

   <script src="/common/static/kss/kss.js"></script>

   <div class="container">
      <div class="row">
         <div class="col-xs-3">
            {foreach $ksses as $name => $listKss}
               <nav role="main">
                  {$name}
                  <ul>
                     {foreach $listKss->getTopLevelSections() as $topLevelSection}
                        <li>
                           <a href="/launch.php?s=kss&from={$name}&reference={$topLevelSection->getReference()}" title="{$topLevelSection->getDescription()}">
                              {$topLevelSection->getTitle()}
                           </a>
                        </li>
                     {/foreach}
                  </ul>
               </nav>
            {/foreach}

         </div>
         <div class="col-xs-9">
            {if $section}
               <h1>{$section->getTitle()}</h1>

               {foreach $kss->getSectionChildren($reference) as $block}
                  <div class="styleguide" id="r{$block->getReference()}">
                     <h3 class="styleguide__header">
                        <span class="styleguide__title">{$block->getTitle()}</span>
                        <span class="styleguide__filename">{$block->getFilename()}</span>
                     </h3>

                     <div class="styleguide__description">
                        <p>{$block->getDescription()|nl2br}</p>
                        {if count($block->getModifiers()) > 0}
                           <ul class="styleguide__modifiers">
                              {foreach $block->getModifiers() as $modifier}
                                 <li>
                           <span class="styleguide__modifier-name {if $modifier->isExtender()}styleguide__modifier-name--extender{/if}">
                              {$modifier->getName()}
                           </span>
                                    {if $modifier->isExtender()}
                                       @extend
                                       <span class="styleguide__modifier-name">{$modifier->getExtendedClass()}</span>
                                    {/if}
                                    {if $modifier->getDescription()}
                                       - {$modifier->getDescription()}
                                    {/if}
                                 </li>
                              {/foreach}
                           </ul>
                        {/if}

                        {if count($block->getParameters()) > 0}
                           <ul class="styleguide__parameters">
                              {foreach $block->getParameters() as $parameter}
                                 <li>
                           <span class="styleguide__parameter-name">
                              {$parameter->getName()}
                           </span>
                                    {if $parameter->getDescription()}
                                       - {$parameter->getDescription()}
                                    {/if}
                                 </li>
                              {/foreach}
                           </ul>
                        {/if}

                        {if $block->getCompatibility()}
                           <p class="styleguide__compatibility">{$block->getCompatibility()|nl2br}</p>
                        {/if}
                     </div>

                     {if $block->hasMarkup()}
                        <div class="styleguide__elements">
                           <div class="styleguide__element">
                              {$block->getMarkupNormal() nofilter}
                           </div>
                           {foreach $block->getModifiers() as $modifier}
                              <div class="styleguide__element styleguide__element--modifier {if $modifier->isExtender()}styleguide__element--extender{/if}">
                                 <span class="styleguide__element__modifier-label {if $modifier->isExtender()}styleguide__element__modifier-label--extender{/if}">{$modifier->getName()}</span>
                                 {$modifier->getExampleHtml() nofilter}
                              </div>
                           {/foreach}
                        </div>

                        <div class="styleguide__html">
                           <pre class="styleguide__code"><code>{$block->getMarkupNormal('{class}')}</code></pre>
                        </div>
                     {/if}
                  </div>
               {/foreach}
            {/if}

         </div>
      </div>
   </div>
{/block}