<header data-scroll-section class="pSection header header--withCover">
    <div class="pSection_target header_target"></div>
    <div class="header_action" data-scroll data-scroll-call="pageHeader"></div>
    <div class="container" id="top" is-anchor data-scroll data-scroll-call="detectSection" data-ui="light" data-scroll-repeat data-scroll-offset="90%, 10%">
        <div class="sectionTitle sectionTitle--light">
            <div class="sectionTitle_header">
                <div class="sectionTitle_header_content">
                    <div class="sectionTitle_header_content_title"><?php echo $pageData['title']; ?></div>
                    <div class="sectionTitle_header_content_separator"></div>
                </div>
            </div>
            <div class="sectionTitle_content"><?php echo $pageData['intro_title']; ?></div>
            <?php if ($pageData['intro_quote']): ?>
            <div class="sectionQuoteWrap">
                <div class="sectionQuote">
                    <?php svg('quote', 'sectionQuote_icon') ?>
                    <div class="sectionQuote_content"><?php echo $pageData['intro_quote']; ?></div>
                </div>
            </div>
            <?php endif; ?>
            <button type="button" class="mobileHeaderButton">
                <?php svg('arrow-bottom') ?>
            </button>
        </div>
    </div>
    <div class="header_cover">
        <?php svg('logo-p', 'header_cover_logo', 'data-scroll data-scroll-speed="3.5" data-scroll-target=".header_target"') ?>
        <div class="header_cover_background imageRender" style="<?php /*background-image: url(<?php echo $pageData['intro_cover']; ?>); */ ?>">
            <img src="<?php echo getImageUrl($pageData['intro_cover_object'], 'lazy'); ?>"
                <?php echo getImageSrcSetSizes($pageData['intro_cover_object']); ?>
                alt="<?php echo pradel_format_attr($pageData['intro_title']); ?>" class="__vhidden">
        </div>
    </div>
    <div class="header_behind imageRender" style="<?php /*background-image: url(<?php echo $pageData['intro_cover']; ?>); */ ?>">
        <img src="<?php echo getImageUrl($pageData['intro_cover_object'], 'lazy'); ?>"
                <?php echo getImageSrcSetSizes($pageData['intro_cover_object']); ?>
                alt="<?php echo pradel_format_attr($pageData['intro_title']); ?>" class="__vhidden">
    </div>
</header>

<section data-scroll-section class="pSection publications_intro">
    <div class="pSection_target publications_intro_target"></div>
    <div is-anchor data-scroll data-scroll-call="detectSection" data-ui="dark" data-scroll-repeat data-scroll-offset="90%, 10%">
        <div data-scroll data-scroll-sticky data-scroll-target=".publications_intro_target">
            <div class="publications_introContainer">
                <div class="container">
                    <div class="row">
                        <div class="col-10 offset-5 col-md-12 offset-md-4 col-xs-18 offset-xs-0">
                            <div class="publications_quote splitQuote" data-scroll data-scroll-call="splitQuote" data-scroll-offset="40%">
                                <?php svg('quote', 'hp_cabinet_quote_icon') ?>
                                <div data-splitting="words"><?php echo $pageData['quote']; ?></div>
                            </div>
                            <?php if ($pageData['quote_link']): ?>
                            <div class="publications_quote_link">
                                <a href="<?php echo $pageData['quote_link']['url']; ?>" target="<?php echo $pageData['quote_link']['target']; ?>" class="button">
                                    <span><?php echo $pageData['quote_link']['title']; ?></span>
                                </a>
                            </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="publications_intro_covers">
        <?php $cpt = 1; foreach ($pageData['gallery'] as $item): ?>
            <div class="imageRender publications_intro_cover publications_intro_cover--<?php echo $cpt; ?>"
                style="<?php /*background-image: url(<?php echo getImageUrl($item); ?>); */ ?>"
                data-scroll data-scroll-speed="<?php echo rand(5, 10); ?>" data-scroll-delay="<?php echo rand(0, 20)/10; ?>" data-scroll-target=".publications_intro_target">
                <img src="<?php echo getImageUrl($item, 'lazy'); ?>"
                    <?php echo getImageSrcSetSizes($item); ?>
                    alt="<?php echo pradel_format_attr($pageData['title']); ?>" class="__vhidden">
            </div>
        <?php $cpt++; endforeach; ?>
        </div>

        <div class="show-xs">
            <div class="swiper-container publications_introCarouselMobile">
                <div class="swiper-wrapper">
                <?php foreach ($pageData['gallery'] as $item): ?>
                    <div class="swiper-slide">
                        <div class="publications_introCarouselMobile_slide imageRender"
                            style="<?php /*background-image: url(<?php echo getImageUrl($item); ?>); */ ?>">
                            <img src="<?php echo getImageUrl($item, 'lazy'); ?>"
                                <?php echo getImageSrcSetSizes($item); ?>
                                alt="<?php echo pradel_format_attr($pageData['title']); ?>" class="__vhidden">
                        </div>
                    </div>
                <?php endforeach; ?>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>

    </div>
</section>

<section data-scroll-section class="pSection publications_container">
    <div class="pSection_target publications_container_target"></div>
    <div class="container" is-anchor data-scroll data-scroll-call="detectSection" data-ui="dark" data-scroll-repeat data-scroll-offset="90%, 10%">
        <div class="publications">
            <div class="publications_yearContainer" data-scroll data-scroll-sticky data-scroll-target=".publications_container_target">
                <div class="row row--noGutter">
                    <div class="col-3 col-xs-18">
                        <div class="colYear">
                            <div class="sectionTitle" data-scroll data-scroll-call="sectionTitle" data-scroll-offset="15%">
                                <div class="sectionTitle_header">
                                    <div class="sectionTitle_header_content">
                                        <div class="sectionTitle_header_content_title"><?php echo $pageData['title']; ?></div>
                                        <div class="sectionTitle_header_content_separator"></div>
                                    </div>
                                </div>
                                <div class="sectionTitle_content">
                                    <div class="yearsList_container">
                                        <ul class="yearsList yearsList--current">
                                            <?php foreach ($pageData['years'] as $year): ?>
                                            <li data-year="<?php echo $year; ?>">
                                                <a href="#year-<?php echo $year; ?>" data-scroll-to><?php echo $year; ?></a>
                                            </li>
                                            <?php endforeach; ?>
                                        </ul>
                                    </div>
                                </div>
                                <div class="sectionTitle_footer">
                                    <div class="sectionTitle_footer_separator"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-3 offset-12 hide-xs">
                        <div class="colYear colYear--prev">
                            <div class="sectionTitle" data-scroll data-scroll-call="sectionTitle" data-scroll-offset="15%">
                                <div class="sectionTitle_header">
                                    <div class="sectionTitle_header_content">
                                        <div class="sectionTitle_header_content_title">&nbsp;</div>
                                        <div class="sectionTitle_header_content_separator"></div>
                                    </div>
                                </div>
                                <div class="sectionTitle_content">
                                    <div class="yearsList_container">
                                        <ul class="yearsList yearsList--prev">
                                            <?php foreach ($pageData['years'] as $year): ?>
                                            <li data-year="<?php echo $year; ?>">
                                                <a href="#year-<?php echo $year; ?>" data-scroll-to><?php echo $year; ?></a>
                                            </li>
                                            <?php endforeach; ?>
                                        </ul>
                                    </div>
                                </div>
                                <div class="sectionTitle_footer">
                                    <div class="sectionTitle_footer_separator"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="publications_navMobile">
                <div class="swiper-container publications_navMobile_carousel">
                    <div class="swiper-wrapper">
                    <?php foreach ($pageData['years'] as $year): ?>
                        <div class="swiper-slide" data-year="<?php echo $year; ?>">
                            <div><?php echo $year; ?></div>
                        </div>
                    <?php endforeach; ?>
                    </div>
                </div>
                <button type="button" class="publications_navMobile_next">
                    <?php svg('arrow-left') ?>
                </button>
            </div>
            <div class="publications_list">
                <div class="row">
                <?php
                    $cssClass = [];
                    $cssClass['publi-1'] = 'col-7 offset-8 col-sm-8 offset-sm-5 col-xs-18 offset-xs-0';
                    $cssClass['publi-2'] = 'col-6 offset-2 col-sm-8 offset-sm-5 col-xs-18 offset-xs-0';
                    $cssClass['publi-3'] = 'col-6 offset-10 col-sm-8 offset-sm-5 col-xs-18 offset-xs-0';
                    $cssClass['publi-4'] = 'col-7 offset-3 col-sm-8 offset-sm-5 col-xs-18 offset-xs-0';
                    $cpt = 1;
                    $prevYear = null;
                ?>
                <?php foreach ($pageData['publications'] as $publi): ?>
                    <?php $publiYear = getYearFromDate(get_field('publishDate', $publi->ID)); ?>
                    <div class="publicationWrap <?php echo $cssClass['publi-' . $cpt]; ?>" data-year="<?php echo $publiYear; ?>">
                        <div class="publication <?php echo 'publication-' . $cpt; ?>">
                            <?php if ($prevYear != $publiYear): ?>
                                <?php $prevYear = $publiYear; ?>
                                <div class="publication_year" id="year-<?php echo $prevYear; ?>" data-year="<?php echo $prevYear; ?>"
                                        data-scroll data-scroll-call="detectYear" data-scroll-offset="90%, 10%" data-scroll-repeat></div>
                            <?php endif; ?>
                            <?php require("inc/publiBloc.php"); ?>
                        </div>
                    </div>
                    <?php
                        $cpt++;
                        if ($cpt > 4) { $cpt = 1; }
                    ?>
                <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</section>