<header data-scroll-section class="pSection header header--withCover" data-section-color-force="dark">
    <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['intro_title']; ?></div>
                    <div class="sectionTitle_header_content_separator"></div>
                </div>
            </div>
            <div class="sectionTitle_content">
                <?php if ($pageData['highlightedNews']): ?>
                    <?php $news = $pageData['highlightedNews']; ?>
                    <?php require("inc/newsBlocHeader.php"); ?>
                <?php endif; ?>
            </div>
        </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 actus_list">
    <div class="pSection_target actus_list_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="show-xs">
            <nav class="actus_navMobile_categories">
                <a href="<?php echo getActualitesPermalink(null); ?>" class="<?php echo !isset($_GET['c']) ? 'active' : ''; ?>"><?php t('NEWS_FILTER_ALL'); ?></a>
                <?php foreach($pageData['categories'] as $category): ?>
                    <a href="<?php echo getActualitesPermalink($category); ?>" class="<?php echo isset($_GET['c']) && $_GET['c'] == $category->slug ? 'active' : ''; ?>">
                        <?php echo $category->name; ?>
                    </a>
                <?php endforeach;?>
            </nav>
            <div class="actus_navMobile">
                <div class="swiper-container actus_navMobile_carousel">
                    <div class="swiper-wrapper">
                    <?php foreach ($pageData['news_list'] as $year => $actus): ?>
                        <div class="swiper-slide" data-year="<?php echo $year; ?>">
                            <div><?php echo $year; ?></div>
                        </div>
                    <?php endforeach; ?>
                    </div>
                </div>
                <button type="button" class="actus_navMobile_next">
                    <?php svg('arrow-left') ?>
                </button>
            </div>
        </div>
        <div class="row">
            <div class="col-5 offset-1 col-md-6 offset-md-0 hide-xs">
                <div class="colYear" data-scroll data-scroll-sticky data-scroll-target=".actus_list_target">
                    <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['news_list'] as $year => $actus): ?>
                                    <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-6 col-xs-18">
                <div class="actus_list_content">
                    <?php foreach ($pageData['news_list'] as $year => $actus): ?>
                        <div class="actus_year" id="year-<?php echo $year; ?>" data-scroll data-scroll-call="detectYear" data-scroll-offset="90%, 10%" data-scroll-repeat data-year="<?php echo $year; ?>">
                            <?php foreach ($actus as $news): ?>
                                <?php require("inc/newsBlocList.php"); ?>
                            <?php endforeach; ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="col-5 col-md-6 hide-xs">
                <div class="colYear colYear--prev" data-scroll data-scroll-sticky data-scroll-target=".actus_list_target">
                    <div class="sectionTitle" data-scroll data-scroll-call="sectionTitle" data-scroll-offset="15%">
                        <div class="sectionTitle_header">
                            <div class="sectionTitle_header_content actus_list_filters">
                                <div class="sectionTitle_header_content_title">
                                    <a href="<?php echo getActualitesPermalink(null); ?>" class="<?php echo !isset($_GET['c']) ? 'active' : ''; ?>"><?php t('NEWS_FILTER_ALL'); ?></a>
                                    <?php foreach($pageData['categories'] as $category): ?>
                                        <a href="<?php echo getActualitesPermalink($category); ?>" class="<?php echo isset($_GET['c']) && $_GET['c'] == $category->slug ? 'active' : ''; ?>">
                                            <?php echo $category->name; ?>
                                        </a>
                                    <?php endforeach;?>
                                </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['news_list'] as $year => $actus): ?>
                                    <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>
</section>