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

<main class="main page-main" id="main">
  <div class="row">
    {include file="includes/header-holder.html"}

    <div class="col-md-11 col-xl-10 main-page">
      <div class="row">
        {include file="includes/section-search-main.html"}

        <section class="section section-banner section-banner--md-absolute">
        {if $banerHomepageTop.redirect!=""}<a href="{$banerHomepageTop.redirect}"{if $banerHomepageTop.link_follow!="1"} rel="nofollow"{/if} title="{$banerHomepageTop.name}"{if $banerHomepageTop.target} target="{$banerHomepageTop.target}"{/if}>{/if}
          <div class="bg section-banner__bg d-md-none banner--position" style="background-image: url({image f=$banerHomepageTop.secondMainImageFilename  return='path'})"></div>
          <div class="bg section-banner__bg d-none d-md-block banner--position" style="background-image: url({image f=$banerHomepageTop.mainImageFilename return='path'})"></div>
          <h2 class="section-banner__heading">{$banerHomepageTop.name}</h2>
	{if $banerHomepageTop.redirect!=""}</a>{/if}

        </section>

        <div class="grid--col-md-7 grid--offset-md-4 grid--col-xl-4 grid--offset-xl-5 order-xl-1 width-xs">
          <section class="section section-box section-box--dark section-box--md-m-top section-box--cols d-md-flex width-xs">
            <div class="section-box__col section-box__col--content position-relative">
              <div class="section-box__container">
                {*<a href="#">*}<div class="section-box__subheading">{'label_our_services'|translate}</div>{*</a>*}
                <a href="{seoLink id_element=$services[0].id withParents=1}"><h2 class="section-box__heading">{$services[0].name}</h2></a>
                <div class="section-box__content">
                  <p>
                   {$services[0].short_content_main}
                  </p>
                </div>
                <div class="section-box__btn-wrapper btn--position"> 
                  <a href="{seoLink id_element=$services[0].id withParents=1}" class="btn btn--primary">{'label_more'|translate}</a>
                </div>
              </div>
            </div>
            <div class="section-box__col">
              {if $services[0].mainImageFilename}
              <picture>
                <source media="(min-width: 768px)" srcset="{image f=$services[0].mainImageFilename m='cr' return='path' w=320 h=320}">
                <source media="(min-width: 0px)" srcset="{image f=$services[0].mainImageFilename m='cr' return='path' w=320 h=320}">
                <img src="{image f=$services[0].mainImageFilename m='cr' return='path' w=320 h=320}" alt="" class="x100">
              </picture>
              {/if}
            </div>
          </section>
        </div>
        <!-- /grid--col -->


        <div class="row grid--col-xs-12 grid--col-xl-6 order-xl-2 align-content-start">
          <div class="grid--col-xs-12 grid-inside--col-md-4 grid-inside--col-xl-2 row align-items-md-end">
            <section class="section section-box section-box--color section-box--min-height-1">
              <div class="section-box__container h-100">
                <div class="section-box__carousel section-box__carousel--default slick-dots-white h-100 carosusel__dots--modification">
                  {foreach from=$brands key=key item=item}
                  <div class="item">
                    {if $item.mainImageFilename}
                    <img src="{image f=$item.secondMainImageFilename return='path'}" alt="" class="section-box__img grayscale-white">
                    {/if}  

                    <div class="section-box__content text-md-center">
                      <p>{$item.short_content}</p>
                    </div>
                  </div>
                  {/foreach}
                </div>
              </div>
            </section>
          </div>
          <!-- /grid--col -->

          <div class="grid-inside--col-xs-11 grid-inside--col-md-7 grid-inside--col-xl-4  position-relative">
            <section class="section section-box text-md-right section-box--min-height-3">
              <div class="section-box__container">
                <div class="section-box__subheading mt-lg-4">compass group Poland</div>
                <a href="{seoLink id_element=11600 withParents=1}"><h2 class="section-box__heading mb-lg-5">{$element.name}</h2></a>
                <div class="section-box__content mb-lg-5">
                  {$element.short_content}
                </div>

              </div>
              <div class="section-box__btn-wrapper btn--position px-xs-special"> 
                <a href="{seoLink id_element=11600 withParents=1}" class="btn btn--default">{'label_read_more'|translate}</a>
              </div>
            </section>

            <section class="section section-box section-box--divider">
              <div class="section-box__container p-0">
                <div class="section-box__carousel section-box__carousel--primary">

                 {$element.content}

                </div>
              </div>
            </section>
          </div>
          <!-- /grid--col -->

 
          <div class="grid-inside--col-xs-11 grid-inside--col-xl-6 d-none d-md-block mb-0">
            <div class="carousel home-carousel" id="home-carousel">
			  <div class="position-relative item" id="home-carousel-item-1">
                <video controls controlsList="nofullscreen nodownload" muted disablepictureinpicture class="img-fluid index-video" poster="{$templates_dir}img/video-poster.jpg">
                  <source src="{$templates_dir}img/culinary-cup-2023.mp4" type="video/mp4">
                  Twoja przeglądarka nie obsługuje tagu wideo.
                </video>
              </div>
			  <div class="position-relative item" id="home-carousel-item-1">
                <video controls controlsList="nofullscreen nodownload" muted disablepictureinpicture class="img-fluid index-video" poster="{$templates_dir}img/video-poster.jpg">
                  <source src="{$templates_dir}img/2022-06-21-culinary-cup-the-tides-v4.mp4" type="video/mp4">
                  Twoja przeglądarka nie obsługuje tagu wideo.
                </video>
              </div>
			  {*<!--
              <div class="position-relative item" id="home-carousel-item-2">
                <video controls controlsList="nofullscreen nodownload" muted disablepictureinpicture class="img-fluid index-video" poster="{$templates_dir}img/video-poster.jpg">
                  <source src="{$templates_dir}img/film.mp4" type="video/mp4">
                  Twoja przeglądarka nie obsługuje tagu wideo.
                </video>
              </div>
              <div class="position-relative item" id="home-carousel-item-3">
                <video controls controlsList="nofullscreen nodownload"  muted disablepictureinpicture class="img-fluid index-video" poster="{$templates_dir}img/video-poster.jpg">
                  <source src="{$templates_dir}img/film2.mp4" type="video/mp4">
                  Twoja przeglądarka nie obsługuje tagu wideo.
                </video>
              </div>
			  -->*}
            </div>
          </div>
          
          {*
          <div class="grid-inside--col-xs-11 grid-inside--col-xl-6 d-none d-md-block mb-0">
            <!-- <div class="embed-responsive embed-responsive-16by9 mb-0">
              <div class="video-iframe" id="home-iframe-1" data-video-id="{if $element.link}{$element.link}{else}b8LFzVEqKNI{/if}"></div>
            </div> -->
            <!-- zmiana dodanie id -->
            <video controls disablepictureinpicture controlsList="nofullscreen nodownload noremoteplayback" class="video" poster="{$templates_dir}img/video-poster.jpg" id="index-video">
              <source src="{$templates_dir}img/film.mp4" type="video/mp4">
              Twoja przeglądarka nie obsługuje tagu wideo.
            </video>
            <!-- zmiana dodanie custom controls -->
            <div class="index-video-play-middle">
              <button id="index-video-play-main" class="play--x4" title="play"></button>
            </div>
            <div id="index-video-controls" class="index-video-controls">
              <div class="button-container">
                <button id="index-video-playpause" class="play" title="play"></button>
              </div>
              <div id="index-video-progressBar"><span id="index-video-progress"></span></div>
            </div>
          </div>
          *}

          <div class="grid-inside--col-xl-6 d-none d-xl-block pt-5">
            {include file="includes/clients-header.html"}
          </div>
        </div>

        <div class="grid--col-md-4 grid--col-xl-4 d-xl-none width-xs">
          {include file="includes/box-services.html"}
        </div>
        <!-- /grid--col -->

        <div class="grid--col-md-7 grid--col-xl-4 order-xl-3">
          <div class="d-none d-xl-block">
            {include file="includes/box-services.html"}
          </div>
          <section class="section section-box section-box--map">
            <div class="section-box__container">
              <div class="section-box__content">
                <div class="section-box__map-wrapper">
                  <div class="section-box__map">
                    <picture>
                      <source media="(min-width: 768px)" srcset="{$templates_dir}gfx/map.png">
                      <source media="(min-width: 0px)" srcset="{$templates_dir}gfx/map.png">
                      <img src="{$templates_dir}gfx/map.png" alt="" class="x100">
                    </picture>
                  </div>

                  <div class="section-box__points" id="map-points">
                   {foreach from=$realizations key=key item=item}
                    <div class="section-box__point" style="top: {$item.height}%; left: {$item.width}%;">
                      <div class="section-box__point-container">
                        <div class="section-box__point-dot"></div>
                        <div class="section-box__point-descr">
                          <div class="section-box__point-descr-container">
                            <div class="section-box__point-descr-header">
                              {$item.name}
                            </div>
                            <div class="section-box__point-descr-content">
                              <div class="section-box__point-descr-text">
                                {$item.intro}
                              </div>

                              {*<a href="{seoLink id_element=$item.id withParents=1}" class="btn btn--default">
                                {'label_view_case'|translate}
                              </a>*}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    {/foreach}
                  </div>
                </div>
              </div>
              <div class="section-box__btn-wrapper section-box__btn-wrapper--horizontal">
                <div class="section-box__btn-wrapper-col">
                  <div>
                    <div class="section-box__subheading">{'label_cases'|translate}</div>
                    <h2 class="section-box__heading section-box__map-heading">{'label_example'|translate}<br> {'label_stats'|translate}</h2>
                  </div>
                </div>
                <div class="section-box__btn-wrapper-col">
                    <a href="{seoLink id_element=11643 withParents=1}" class="btn btn--default">{'label_check'|translate}</a>
                </div>
              </div>
            </div>
          </section>

          {*<section class="section section-box section-box--dark">
            <div class="section-box__container">
              <div class="section-box__subheading">{'label_newsletter'|translate}</div>
              <h2 class="section-box__heading">{'label_newsletter_sign_in'|translate}</h2>
              <div class="section-box__content">
                <form action="" class="form form--dark-bg" id="newsletterForm">
                  <div class="row mb-3 mb-xl-0">
                    <div class="col-6 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
                      <div class="form-group">
                        <input id="name" type="text" class="form-control" name="name">
                        <label for="name">{'label_newsletter_name'|translate}</label>
                      </div>
                    </div>
                    <div class="col-6 col-md-3 col-lg-3 col-xl-3 col-xxl-3">
                      <div class="form-group">
                        <input id="lastname" type="text" class="form-control" name="surname">
                        <label for="lastname">{'label_newsletter_second_name'|translate}</label>
                      </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4 col-xl-6 col-xxl-4">
                      <div class="form-group">
                        <input id="email" type="email" class="form-control" name="email">
                        <label for="email">{'label_newsletter_email'|translate}</label>
                      </div>
                    </div>
                    <div class="col-12 col-lg-2 col-xl-12 col-xxl-1 text-right btn-container">
                      <button class="btn btn--default form__btn"  onclick="xajax_exe('NewsletterModule-xajaxSignup', xajax.getFormValues('newsletterForm')); return false;">{'label_newsletter_send'|translate}</button>
                    </div>
                  </div>


                  <div class="checkbox">
                    <input id="regulations" type="checkbox" name="request_1" value="1">
                    <label for="regulations" class="regulations">
                      <div class="regulations__row">
                        {'label_newsletter_accept'|translate}
                        <a href="{seoLink id_element=11905 withParents=1}">{'label_newsletter_conditions'|translate}</a>
                      </div>
                      <div class="regulations__row regulatios-row-modification">
                        <a href="{seoLink id_element=11778 withParents=1}">{'label_newsletter_info'|translate}</a>
                      </div>
                    </label>
                  </div>
                </form>
              </div>
            </div>
          </section>*}

          <section class="section section-box section-box--dark">
            <div class="section-box__container">
              <div class="section-box__subheading">{'label_more_than75'|translate}</div>
              <a href="https://www.compass-group.com/en/index.html" target="_blank" ><h2 class="section-box__heading">{$compass_info.name}</h2></a>
              <div class="section-box__content rte">
                {$compass_info.short_content}
                <br>
                <a href="https://www.compass-group.com/en/index.html" target="_blank" class="special-link">WWW.COMPASS-GROUP.COM</a>
                <br>
                <br>
              </div>
            </div>
          </section>


          <div class="grid-inside--col-lg-7 grid-inside--col-xl-6 d-none d-lg-block d-xl-none pt-4">
            {include file="includes/clients-header.html"}
          </div>
        </div>
        <!-- /grid--col -->

        <section class="section section-box order-xl-4 pb-0 d-lg-none">
          {include file="includes/clients-header.html"}
        </section>

        <section class="section section-box order-xl-4 pt-0 section-main-partners">
          <div class="section-box__container px-5">
            <div class="section-box__carousel section-box__carousel--cooperation section-box__carousel--dividers m-auto">
              {foreach from=$clientsCorp key=key item=item}
              <div class="item">                
               <a href="{seoLink id_element=$item.id withParents=1}"> <img src="{image f=$item.mainImageFilename w=160 h=90 return='path'}" alt="" class="img-fluid mx-auto px-3 grayscale"></a>           
              </div>
              {/foreach}
            </div>
          </div>
        </section>

      </div>
      <!-- /.row -->
      {include file="includes/footer-holder.html"}
    </div>
  </div>
</main>

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