{extends file="includes/layout.html"}

{block name="styles"}
<link href="{$templates_dir}css/page-home.min.css?{$global_version}" rel="stylesheet">
{/block}

{block name="main"}
<div role="main" class="main home-page" id="main">


    <div class="section-banner">
        <div class="section-banner__left">
        {if count($fields.homepage_carouser)>0}
            <div class="swiper swipper-banner" id="bannerCarousel">
                <div class="swiper-wrapper">
                    {foreach $fields.homepage_carouser as $c}
                    <div class="swiper-slide">
                        <div class="box-banner">
                            <img src="{image f=$c.filename w=950 h=700 m=cr r=path}" alt=""
                                class="img-cover">
                            <a href="#offers" class="btn btn--secondary scroll-link">{$fields.homepage_button_text}</a>
                        </div>
                    </div>
                    {/foreach}
                </div>
                <div class="swiper-pagination"></div>
            </div>
        {/if}
        </div>
        <div class="section-banner__right">
        {if count($fields.homepage_image)>0}
            <div class="section-banner__right-top">
            {foreach $fields.homepage_image as $i}
                <div>
                    {*<span>Fabryka <br> w Bydgoszczy</span>*}
                    <img src="{image f=$i.filename w=475 h=350 m=cr r=path}" alt="" class="img-cover">
                </div>
            {/foreach}
            </div>
        {/if}
            <div class="section-banner__right-bottom">
                <h2 class="heading">{$element.name}</h2>
                <p>
                    {$fields.homepage_main_short|nl2br}
                </p>
            </div>
        </div>
    </div>

    <div class="container">

        <section class="section-our-story" id="our-story">
            <h2 class="section-our-story__heading heading">{$fields.homepage_numbers_title}</h2>
            <div class="swiper" id="ourStoryCarousel">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="box-our-story">
                            <div class="box-our-story__square">
                                <div>
                                    <img src="{$uriPrefix}{$fields.homepage_numbers_1_image[0].filename}" alt="">
                                </div>
                                <span data-count-value="{$fields.homepage_numbers_1_number[0]}">{$fields.homepage_numbers_1_number[0]}</span>{$fields.homepage_numbers_1_number[1]}
                            </div>
                            <h4>{$fields.homepage_numbers_1_title}</h4>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="box-our-story">
                            <div class="box-our-story__square">
                                <div>
                                    <img src="{$uriPrefix}{$fields.homepage_numbers_2_image[0].filename}" alt="">
                                </div>
                                <span data-count-value="{$fields.homepage_numbers_2_number[0]}">{$fields.homepage_numbers_2_number[0]}</span>{$fields.homepage_numbers_2_number[2]}
                            </div>
                            <h4>{$fields.homepage_numbers_2_title}</h4>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="box-our-story">
                            <div class="box-our-story__square">
                                <div>
                                    <img src="{$uriPrefix}{$fields.homepage_numbers_3_image[0].filename}" alt="">
                                </div>
                                <span data-count-value="{$fields.homepage_numbers_3_number[0]}">{$fields.homepage_numbers_3_number[0]}</span>{$fields.homepage_numbers_3_number[3]}
                            </div>
                            <h4>{$fields.homepage_numbers_3_title}</h4>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="box-our-story">
                            <div class="box-our-story__square">
                                <div>
                                    <img src="{$uriPrefix}{$fields.homepage_numbers_4_image[0].filename}" alt="">
                                </div>
                                <span data-count-value="{$fields.homepage_numbers_4_number[0]}">{$fields.homepage_numbers_4_number[0]}</span>{$fields.homepage_numbers_4_number[4]}
                            </div>
                            <h4>{$fields.homepage_numbers_4_title}</h4>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </section>

        <section class="section-infoCanpack" id="info-canpack">
            <div class="section-infoCanpack__left">
                <img src="{image f=$fields.homepage_about_image[0].filename w=636 h=540 m=cr r=path}" alt="Grupa Canpack" class="img-cover">
                <div>
                    <h2 class="heading">{$fields.homepage_about_title|nl2br}</h2>
                    <p>{$fields.homepage_about_content|nl2br}</p>
                </div>
            </div>
            <div class="section-infoCanpack__right">
                {$fields.homepage_about_content_big}
                <a href="{$fields.homepage_about_link}" class="btn btn--primary" target="_blank">{$fields.homepage_about_button}</a>
            </div>
        </section>


        <section class="section-factoryCanpack" id="factory-canpack">
            <h2 class="heading">{$fields.homepage_factory_title}</h2>
            <p>{$fields.homepage_factory_content|nl2br}</p>
            <div>
                {if count($fields.homepage_factory_image)>0}<img src="{image f=$fields.homepage_factory_image[0].filename w=1270 h=625 m=cr r=path}" alt="" class="img-cover" style="display: none">{/if}
                {if count($fields.homepage_factory_movie_file)>0}
                <div class="video">
                    {*$fields.homepage_factory_movie|stripslashes*}
                    <video controls>
                        <source src="{$fields.homepage_factory_movie_file[0].filename}" type="video/mp4">
                    </video>
                    {if count($fields.homepage_factory_image)>0}<img src="{image f=$fields.homepage_factory_image[0].filename w=1270 h=625 m=cr r=path}" alt="" class="mask">{/if}
                    <button class="btn btn--secondary play-video">{'label_movie_play'|translate}
                        <svg xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="11px">
                            <text kerning="auto" font-family="Myriad Pro" fill="rgb(0, 0, 0)"
                                transform="matrix( 1.03707331295725, 0, 0, 1.03707331295725,0.04577012084883, 12.8798136950045)"
                                font-size="21.214px">
                                <tspan font-size="21.214px" font-family="FranklinGothic URW" fill="#001432">&#9656;
                                </tspan>
                                <tspan font-size="15.428px" font-family="FranklinGothic URW" fill="#001432">&#32;
                                </tspan>
                            </text>
                        </svg>
                    </button>
                </div>
                {/if}
            </div>
        </section>

        {*
        <section class="section-locationCanpack" id="location-canpack">
            <div class="section-locationCanpack__left">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2392.8464810603587!2d17.89306761583099!3d53.148849679938095!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47030deafeb11b1d%3A0x32fd5ba6f3ee8788!2sCANPACK%20S.%20A.%20Oddzia%C5%82%20Fabryka%20Puszek%20Napojowych%20w%20Bydgoszczy!5e0!3m2!1spl!2spl!4v1655198836190!5m2!1spl!2spl"
                    style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
            <div class="section-locationCanpack__right">
                <h3>Lokace závodu a kontakty</h3>
                <p>Náš nový závod ležící ve Stříbře je vzdálen pouhých 15 minut chůze (1 km) od autobusového nádraží ve
                    Stříbře a cca 35 minut jízdy autem z Plzně (35 km).</p>
                <address>
                    CANPACK Czech s.r.o. <br>
                    Forstova 1596 <br>
                    349 01 Stříbro <br>
                    Česká republika <br>
                    IČ 07693745
                </address>
                <h3>Důležitá telefonní čísla</h3>
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <td>Recepce</td>
                            <td>+420 373 704 500</td>
                        </tr>
                        <tr>
                            <td>Vrátnice</td>
                            <td>+420 373 704 599</td>
                        </tr>
                        <tr>
                            <td>HR oddělení</td>
                            <td>+420 373 704 510/511/512/513</td>
                        </tr>
                        <tr>
                            <td>Výroba</td>
                            <td>+420 373 704 532/533</td>
                        </tr>
                        <tr>
                            <td>Sklad</td>
                            <td>+420 373 704 546</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
        *}
        <section class="section-contributionCanpack" id="contribution-canpack">
            <div class="box-contribution box-contribution--text">
                <h2 class="heading">{$fields.homepage_community_title|nl2br}</h2>
                {$fields.homepage_community_content}
            </div>
            {foreach $fields.homepage_community_galery as $g}
            <div class="box-contribution">
                <img src="{image f=$g.filename w=423 h=435 m=cr r=path}" alt="" class="img-cover">
            </div>
            {/foreach}
        </section>


        <section class="section-valuesCanpack" id="values-canpack">
            <h2 class="heading">{$fields.homepage_values_title}</h2>
            <div class="swiper" id="valuesCanpackCarousel">
                <div class="swiper-wrapper">
                {foreach $benefits2List as $bl}
                    <div class="swiper-slide">
                        <div class="box-values">
                            <div class="box-values__image">
                                <img src="{image f=$bl.mainImageFilename w=125 h=125 m=cr r=path}" alt="">
                            </div>
                            <h3>{$bl.name}</h3>
                            {$bl.content}
                        </div>
                    </div>
                {/foreach}
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </section>

        <section class="section-joinCanpack">
            <h2 class="heading">{$fields.homepage_join_title}</h2>
            <div class="section-joinCanpack__top">
                <div class="section-joinCanpack__top-left">
                   {if $fields.homepage_join_subtitle!=''}<h3 class="heading">{$fields.homepage_join_subtitle|nl2br}</h3>{/if}
                    {$fields.homepage_join_content}
                    <a href="#offers" class="btn btn--secondary scroll-link">{$fields.homepage_join_button}</a>
                </div>
                <div class="section-joinCanpack__top-right">
                    <img src="{image f=$fields.homepage_join_image_1[0].filename w=635 h=435 m=cr r=path}" alt="" class="img-cover">
                </div>
            </div>
            {if count($fields.homepage_join_image_2)>0}
            <div class="section-joinCanpack__center">
                <h4 class="heading">{$fields.homepage_join_text|nl2br}</h4>
                <img src="{image f=$fields.homepage_join_image_2[0].filename w=1270 h=625 m=cr r=path}" alt="" class="img-cover">
            </div>
            {/if}
            <div class="section-joinCanpack__bottom">
                <div class="section-joinCanpack__bottom-left">
                    {$fields.homepage_career_content_1}
                </div>
                <div class="section-joinCanpack__bottom-right">
                    <img src="{image f=$fields.homepage_career_image[0].filename w=635 h=810 m=cr r=path}" alt="" class="img-cover">
                </div>
            </div>
        </section>


        <section class="section-offersCanpack" id="offers">
            <h2 class="heading">{$fields.homepage_career_title}</h2>
            <div class="section-offersCanpack__top">
                <h5> {$fields.homepage_career_content_2}</h5>
                <p>{$fields.homepage_career_content_3}</p>

            </div>
            <div class="section-offersCanpack__center">
            {foreach $careerList as $cl}
                <div class="job-offer">
                    <h3>{$cl.name}</h3>
                    <div>
                        <span class="job">{$cl.category}</span>
                        {if $cl.location_city!=''}<span class="location">{$cl.location_city}</span>{/if}
                        {if $cl.working_time!=''}<span class="time">{$cl.working_time}</span>{/if}
                        <a href="{seoLink id_element=$cl.id parentLink=$careerParent}" class="btn btn--primary">{'label_more'|translate}</a>
                    </div>
                </div>
            {/foreach}
                <a href="{$careerParent}" class="btn btn--primary btn-all">{'label_all'|translate}</a>
            </div>
            <div class="section-offersCanpack__bottom">
                <div class="section-offersCanpack__bottom-left">
                    <h4 class="heading">{$fields.homepage_no_career_title}</h4>
                    <p>
                        {$fields.homepage_no_career_content|nl2br}</p>
                </div>
                <div class="section-offersCanpack__bottom-right">
                    <a href="#contactForm" class="btn btn--secondary scroll-form scroll-link">{$fields.homepage_no_career_button}</a>
                </div>
            </div>
        </section>

        <section class="section-missionCanpack">
            <div class="section-missionCanpack__top">
                <h2 class="heading">{$fields.homepage_feel_title}</h2>
                <p>{$fields.homepage_feel_content|nl2br}</p>
            </div>

            <div class="section-missionCanpack__center">
                <div class="section-missionCanpack__center-left">
                    <img src="{image f=$fields.homepage_feel_image[0].filename w=635 h=725 m=cr r=path}" alt="" class="img-cover">
                </div>
                <div class="section-missionCanpack__center-right">
                    <div>
                        <h4 class="heading">{$fields.homepage_vision_title}</h4>
                        {$fields.homepage_vision_content}
                    </div>
                    <div>
                        <h4 class="heading">{$fields.homepage_mission_title}</h4>
                        {$fields.homepage_mission_content}
                    </div>
                </div>
            </div>
        </section>


        <section class="section-boxesCanpack">
            <div class="swiper" id="boxesCarousel">
                <div class="swiper-wrapper">
                {foreach $productList as $pl}
                    <div class="swiper-slide">
                        <div class="box-info">
                            <div class="box-info__img">
                                <img src="{image f=$pl.mainImageFilename w=297 h=198 m=cr r=path}" alt="" class="img-cover">
                            </div>
                            <div>
                                <h3>{$pl.name}</h3>
                                {$pl.content}
                            </div>
                        </div>
                    </div>
                {/foreach}
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </section>

        <section class="section-sustainabilityCanpack">
            <div class="section-sustainabilityCanpack__left">
                <img src="{image f=$fields.homepage_progress_image[0].filename w=635 h=435 m=cr r=path}" alt="" class="img-cover">
            </div>
            <div class="section-sustainabilityCanpack__right">
                <h2 class="heading">{$fields.homepage_progress_title} </h2>
                <p>{$fields.homepage_progress_content|nl2br}</p>
            </div>
        </section>

{include file="includes/sections/section-formApplication.html" fields=$fields apply='label_apply'}

    </div>




</div>
{/block}

{block name="scripts"}
<script src="{$templates_dir}js/page-home.min.js?{$global_version}"></script>
{/block}