{include file="includes/header.html"} 
{include file="includes/header-holder.html"}

<main class="main" id="main">
  {include file="includes/menu.html"}

  <!-- <div id="fullpagePrimary"> -->
    <section class="section page history">
      <div class="wrapper">
        <div class="content">
    
          <div class="content-wrapper">
            <div class="section-wrapper">
              {include file="includes/breadcrumbs.html"}
            </div>

            <div id="mission-dots-container"></div>

            <div class="carousel dots--dark" id="mission-carousel">
              {capture assign=breadcrumbsCount}{$breadcrumbs|count}{/capture}
              {foreach $banerHistory as $bh}
              <div class="item">  
                <div class="section-wrapper">
                  <div class="box box-1">
                    {if $breadcrumbsCount>1}
                        <a href="{$breadcrumbs[$breadcrumbsCount - 2].breadcrumbUrl}" class="btn btn--arrow back-custom"><span>{if $breadcrumbs[$breadcrumbsCount - 2].link_title}{$breadcrumbs[$breadcrumbsCount - 2].link_title}{else}{$breadcrumbs[$breadcrumbsCount - 2].name}{/if}</span></a>
                    {/if}
                    <div class="box-content">
                      <div class="box-wrapper">
                        <div class="category">{$element.name}</div>
                        <h1 class="h1 heading">{$bh.name}</h1>
                        <div class="descr">
                            {$bh.content}
                        </div>
                      </div>                      
                      <div class="mission-dots"></div>
                      {if !$bh@first}
                      <a class="btn btn--arrow mission-arrow-prev">
                        <span>{$banerHistory[$bh@index - 1].name}</span>
                      </a>
                      {/if}
                      {if !$bh@last}
                      <a class="btn btn--arrow mission-arrow-next">
                        <span>{$banerHistory[$bh@iteration].name}</span>
                      </a>
                      {/if}
                    </div>
                  </div>

                  <div class="box box-2">
                    <img src="/{$bh.mainImageFilename}" alt="{$bh.mainImageAlt}" class="img object-fit">
                    {if $breadcrumbsCount>1}
                        <a href="{$breadcrumbs[$breadcrumbsCount - 2].breadcrumbUrl}" class="back"><span>{if $breadcrumbs[$breadcrumbsCount - 2].link_title}{$breadcrumbs[$breadcrumbsCount - 2].link_title}{else}{$breadcrumbs[$breadcrumbsCount - 2].name}{/if}</span></a>
                    {/if}

                    {if $bh.mainImageContent}<div class="caption">{$bh.mainImageContent}</div>{/if}
                  </div>
                </div>  
              </div>
              {/foreach}              
            </div>

          </div>    
        </div>
      </div>
    </section>
  <!-- </div> -->
  <!-- /#fullpage -->
</main>

{include file="includes/footer-holder.html"} 
{include file="includes/footer.html"}