<?php
/**
 * Template Name: Om Oss Template
 *
 * Template for displaying about page.
 *
 * @package UnderStrap
 */

// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;

$pageTitle = get_the_title();

$heroSection = get_field('about_cover_section');
$firstSection = get_field('about_first_section');
$secondSection = get_field('about_second_section');
$thirdSection = get_field('about_third_section');

get_header();

?>

<main>
    <section class="hero">
        <?php
        $heroArgs = array(
        'image'     => $heroSection,
        'pageTitle' => $pageTitle,
        ); 
        get_template_part('global-templates/cover', null, $heroArgs); ?>
    </section>

    <section class="p-t-10 S01">
        <div class="container__left">
            <div class="cover__wrapper">
                <div class="cover__fixer">
                    <img alt="<?php echo esc_attr($firstSection['corresponding_image']['alt']); ?>" class="lazy"
                        src="<?php echo esc_attr($firstSection['corresponding_image']['sizes']['thumbnail']); ?>"
                        data-src="<?php echo esc_attr($firstSection['corresponding_image']['sizes']['large']); ?>"
                        data-srcset="<?php echo esc_attr($firstSection['corresponding_image']['sizes']['medium']); ?> 300w,
                        <?php echo esc_attr($firstSection['corresponding_image']['sizes']['large']); ?> 768w,
                        <?php echo esc_attr($firstSection['corresponding_image']['sizes']['1536x1536']); ?> 1024w"
                        data-sizes="100w" />
                </div>
            </div>
            <div class="content__wrapper">
                <div class="content__wrapperCentred">
                    <h1 class="heading__md"><?php echo esc_html($firstSection['main_title']); ?></h1>
                    <p class="paragraph"><?php echo esc_html($firstSection['main_paragraph']); ?></p>

                    <?php if( $firstSection['subfield_n1']['small_title'] && $firstSection['subfield_n1']['paragraph'] ): ?>
                    <h2 class="btnText__lg"><?php echo esc_html($firstSection['subfield_n1']['small_title']); ?></h2>
                    <p class="paragraph"><?php echo esc_html($firstSection['subfield_n1']['paragraph']); ?></p>
                    <?php endif; ?>

                    <?php if( $firstSection['subfield_n2']['small_title'] && $firstSection['subfield_n2']['paragraph'] ): ?>
                    <h3 class="btnText__lg"><?php echo esc_html($firstSection['subfield_n2']['small_title']); ?></h3>
                    <p class="paragraph --no-mb"><?php echo esc_html($firstSection['subfield_n2']['paragraph']); ?></p>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </section>

    <section class="p-t-10 S02">
        <div class="container__right">
            <div class="content__wrapper">
                <h1 class="heading__md"><?php echo esc_html($secondSection['main_title']); ?></h1>
                <p class="paragraph"><?php echo esc_html($secondSection['main_paragraph']); ?></p>

                <?php if( $secondSection['subfield_n1']['small_title'] && $secondSection['subfield_n1']['paragraph'] ): ?>
                <h2 class="btnText__lg"><?php echo esc_html($secondSection['subfield_n1']['small_title']); ?></h2>
                <p class="paragraph"><?php echo esc_html($secondSection['subfield_n1']['paragraph']); ?></p>
                <?php endif; ?>
                <img src="<?php echo esc_attr($secondSection['signature']['sizes']['large']); ?>" alt="signature" />
            </div>
            <div class="cover__wrapper">
                <img alt="<?php echo esc_attr($secondSection['corresponding_image']['alt']); ?>" class="lazy"
                    src="<?php echo esc_attr($secondSection['corresponding_image']['sizes']['thumbnail']); ?>"
                    data-src="<?php echo esc_attr($secondSection['corresponding_image']['sizes']['large']); ?>"
                    data-srcset="<?php echo esc_attr($secondSection['corresponding_image']['sizes']['medium']); ?> 300w,
                <?php echo esc_attr($secondSection['corresponding_image']['sizes']['large']); ?> 768w,
                <?php echo esc_attr($secondSection['corresponding_image']['sizes']['1536x1536']); ?> 1024w"
                    data-sizes="100w" />
            </div>
        </div>
    </section>

    <section class="p-t-10 S03">
        <div class="covers__wrapper">
            <div class="covers__container">
                <?php foreach($thirdSection['covers_holder'] as $imagesList):?>
                    <div class="covers__list">
                        <?php foreach($imagesList as $img): ?>
                          <div class="covers__image">
                              <img alt="<?php echo esc_attr($img['alt']); ?>" class="lazy"
                                src="<?php echo esc_attr($img['sizes']['thumbnail']); ?>"
                                data-src="<?php echo esc_attr($img['sizes']['large']); ?>" 
                                data-srcset="<?php echo esc_attr($img['sizes']['medium']); ?> 300w,
                                <?php echo esc_attr($img['sizes']['large']); ?> 768w,
                                <?php echo esc_attr($img['sizes']['1536x1536']); ?> 1024w" 
                                data-sizes="100w" />
                          </div>                            
                        <?php endforeach; ?>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        <div class="block__wrapper">
            <div class="container">
                <h1 class="heading__md"><?php echo esc_html($thirdSection['main_title']); ?></h1>
                <p class="paragraph"><?php echo esc_html($thirdSection['main_paragraph']); ?></p>
                <div class="block__cardsWrapper">
                    <div class="block__wpgive">
                    <?php echo do_shortcode($thirdSection['wpgive_shortcode']) ?>
                    </div>
                    <div class="block__extras">
                        <div class="block__support">
                            <div class="block__cardContent">
                                <span class="btnText__alt"><?php echo esc_html($thirdSection['support_card']['card_title']); ?></span>
                                <p class="paragraph"><?php echo esc_html($thirdSection['support_card']['card_paragraph']) ?></p>
                            </div>
                            <a href="<?php echo esc_attr($thirdSection['support_card']['button_link']) ?>" 
                            target="_blank" rel="noopener noreferrer">
                            <?php echo esc_html($thirdSection['support_card']['button_text']) ?>
                            </a>
                        </div>
                        <div class="block__sponsor">
                            <div class="block__cardContent">
                                <span class="btnText__alt"><?php echo esc_html($thirdSection['sponsoring_card']['card_title']); ?></span>
                                <p class="paragraph"><?php echo esc_html($thirdSection['sponsoring_card']['card_paragraph']) ?></p>
                            </div>
                            <a href="<?php echo esc_attr($thirdSection['sponsoring_card']['button_link']) ?>" 
                            target="_blank" rel="noopener noreferrer">
                            <?php echo esc_html($thirdSection['sponsoring_card']['button_text']) ?>
                            </a>
                        </div>
                    </div>                    
                </div>
            </div>
        </div>
    </section>

    
    <section class="p-t-5 S04">
        <?php get_template_part( 'loop-templates/sponsors' ); ?>
    </section>
</main>

<?php
get_footer();