{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 mission">
      <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 $banerMission as $bm}
              <div class="item">
                <div class="section-wrapper">
                  <div class="box box-1">
                    {if $breadcrumbsCount>1}
                        <a href="{$breadcrumbs[$breadcrumbsCount - 2].breadcrumbUrl}" class="back">{if $breadcrumbs[$breadcrumbsCount - 2].link_title}{$breadcrumbs[$breadcrumbsCount - 2].link_title}{else}{$breadcrumbs[$breadcrumbsCount - 2].name}{/if}</a>
                    {/if}
                    {if $bm.mainImageFilename}<img src="/{$bm.mainImageFilename}" alt="{$bm.mainImageAlt}" class="img object-fit">{/if}
                  </div>
                  
                  <div class="box box-2">
                    <div class="icon">
                      {if $bm.secondMainImageFilename}<img src="/{$bm.secondMainImageFilename}" alt="{$bm.secondMainImageAlt}" class="img-responsive">{/if}
                    </div>
                    <div class="box-content">
                      <div class="box-wrapper">
                        <div class="category">{$element.name}</div>
                        <h1 class="h1 heading">{$bm.name}</h1>
                        <div class="descr">
                          {$bm.content}
                        </div>
                      </div>                      
                      <div class="mission-dots"></div>
                      {if !$bm@first}<a class="btn btn--arrow mission-arrow-prev"></a>{/if}
                      {if !$bm@last}<a class="btn btn--arrow mission-arrow-next"></a>{/if}
                    </div>
                  </div>
                </div>  
              </div>
              {/foreach}
            </div>

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

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