{extends "index.tpl"}

{block "content"}
   <div class="html-page html-page-years">
      {$pageBlocks = $body.page.blocks}

      <h1>{$pageBlocks[0].name nofilter}</h1>

      {$pageBlocks[0].content nofilter}

      <div id="years">
         {foreach $pageBlocks as $block}
            {if $block@first}{continue}{/if}
            <a href="#{$block.name}">{$block.name}</a>
         {/foreach}
      </div>

      <div id="awards">
         {foreach $pageBlocks as $block}
            {if $block@first}{continue}{/if}
            <div class="year" id="{$block.name}">
               <div class="yearDate">{$block.name}</div>
               {$block.content nofilter}
            </div>
         {/foreach}
      </div>

      {get_photos assign="photos" type="pages" id=$body.page.id}
      {if $photos|count}
         <div class="row">
            {foreach $photos as $key => $photo}
               <div class="col-md-3">
                  <a href="{get_photo photo=$photo.img size=0}" class="thumbnail" rel="gallery">
                     <img src="{get_photo photo=$photo.img size=4}" alt="{$photo.img.descr}" class="img-responsive">
                  </a>
               </div>
            {/foreach}
         </div>
      {/if}
   </div>
{/block}

<script>
   {block onready append}
   $('#years').on('click', 'a', function() {
      var el = $(this).attr('href');
      $('html, body').animate({
         scrollTop: $(el).offset().top,
      }, 500);
      return false;
   });

   {/block}
</script>
