<main class="main" data-scroll-section>
    <?php if ($pageData['offices']): ?>
        <button class="officesCarousel_next">
            <?php svg('arrow-left') ?>
        </button>
        <div class="officesCarousel" data-scroll data-scroll-call="sectionTitle" data-scroll-offset="0%" data-delay="2000">
            <div class="office">
                <div class="office_content">
                    <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">
                            <div class="office_titlesWrapper">
                                <?php $cpt = 1; foreach ($pageData['offices'] as $office): ?>
                                <div class="office_title" data-office="<?php echo $cpt; ?>"><?php echo $office['city']; ?></div>
                                <?php $cpt++; endforeach; ?>
                            </div>
                            <div class="office_nextTitlesWrapper">
                                <?php $cpt = 1; foreach ($pageData['offices'] as $office): ?>
                                <div class="office_nextTitle" data-office="<?php echo $cpt; ?>"><?php echo $office['city']; ?></div>
                                <?php $cpt++; endforeach; ?>
                            </div>
                        </div>
                        <div class="sectionTitle_footer">
                            <div class="sectionTitle_footer_separator hide-xs"></div>
                        </div>
                    </div>
                    <div class="office_detailsWrapper">
                        <?php svg('quote', 'office_details_iconMobile') ?>
                        <?php $cpt = 1; foreach ($pageData['offices'] as $office): ?>
                        <div class="office_details" data-office="<?php echo $cpt; ?>">
                            <?php svg('quote', 'office_details_icon') ?>
                            <div class="row">
                                <div class="col-9 col-xs-18">
                                    <?php echo $office['address']; ?>
                                </div>
                                <div class="col-9 col-xs-18">
                                    <?php echo $office['phone']; ?>
                                </div>
                                <div class="col-9 col-xs-18">
                                    <a href="mailto:<?php echo $office['email']; ?>" class="button button--primary"><span><?php t('CONTACT_EMAIL'); ?></span></a>
                                </div>
                            </div>
                        </div>
                        <?php $cpt++; endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
        <div class="officesCovers">
            <?php $cpt = 1; foreach ($pageData['offices'] as $office): ?>
                <div class="officeCover imageRender" data-office="<?php echo $cpt; ?>" style="<?php /*background-image: url(<?php echo getImageUrl($office['cover']); ?>); */ ?>">
                    <img src="<?php echo getImageUrl($office['cover'], 'lazy'); ?>"
                        <?php echo getImageSrcSetSizes($office['cover']); ?>
                        alt="Office cover" class="__vhidden">
                </div>
            <?php $cpt++; endforeach; ?>
        </div>
    <?php endif; ?>
</main>