{{--
  Title: Hero
  Description: Hero block
  Category: formatting
  Icon: columns
  Keywords: hero
  Mode: edit
  Align: left
  PostTypes: page
  SupportsAlign: full
  SupportsMode: true
  SupportsMultiple: true
  EnqueueStyle:
  EnqueueScript:
  EnqueueAssets:
--}}

@php
    global $post;

    // TRACKING
    $engPostID = apply_filters( 'wpml_object_id', $post -> ID, 'post', true, 'en-gb' );
    $engPost = get_post($engPostID);
    $blocks = parse_blocks( $engPost -> post_content );

    foreach ( $blocks as $block ) {
        if ( $block['blockName'] === 'acf/hero' ) {
            $engTitle = $block['attrs']['data']['hero_title'];
            $engTitle = strip_tags($engTitle);
        }
    }

    // CONTENT
    $title = get_field('hero_title');
    $subtitle = get_field('hero_subtitle');
    $image = get_field('hero_image');
    $description_title = strip_tags($title); // workaround to remove p & br from wysiwyg editor for this field
    $formatted_title = strip_tags($title, '<a>'); // workaround to remove p & br from wysiwyg editor for this field

    $ctaText = get_field('hero_cta_text');
    $titleStripped = strip_tags($title);
    $customClassName = $ctaText ? "no-underline" : "";
    $formatted_title = str_replace('<a', '<a class="'.$customClassName.'" data-layer="Articoli;;' . $engTitle . ';;Homepage"', $formatted_title);
    $ctaText = str_replace('<a', '<a class="cta hover-cta" rel="link" data-layer="Articoli;;' . $engTitle . ';;Homepage"', $ctaText);

    $imageAtTop = get_field('is_image_first_element');

    $hasRelatedPosts = get_field('has_related_posts');
    $ctaUrl = get_field('hero_url');
    $video = get_field('video');
@endphp

<div class="block-hero">
    <div class="block-hero__body">
        @if( $imageAtTop )
            @if ($video)
                @include('partials.iframe-video-fullwidth', ['$video' => $video, 'marginTop' => true])
            @else
                <div class="block-hero__image block-hero__image--top">
                    <img src="{{ $image['url'] }}" alt="{{ $image['alt'] }}">
                </div>
            @endif
        @endif

        <div class="block-hero__title" aria-label="{{ $description_title }}">
            <span class="title-2">{!! $formatted_title !!}</span>
        </div>

        <div class="block-hero__subtitle">
            <div class="p @if($ctaText) paragraph-margin-bottom @endif">{!! $subtitle !!}</div>
            @if ($ctaText)
                <div class="p">{!! $ctaText !!}</div>
            @endif
        </div>

        @if( !$imageAtTop )
            @if ($video)
                @include('partials.iframe-video-fullwidth', ['$video' => $video, 'marginTop' => true])
            @else
                <div class="block-hero__image">
                    <img src="{{ $image['url'] }}" alt="{{ $image['alt'] }}">
                </div>
            @endif
        @endif
    </div>


    @if( $hasRelatedPosts )
        @php
            $posts = get_field('related_posts');
            $count = count($posts);
            $postAmount = str_pad($count, 2, '0', STR_PAD_LEFT);
        @endphp

        <div class="block-hero__tiles-container">
            <div class="block-hero__tiles" data-js="hero-tiles">
                <div class="block-hero__tiles-body">
                    <ul class="block-hero__tiles-wrapper">
                        @foreach($posts as $tile)
                            @php
                                $post = $tile['post'];
                                setup_postdata( $post );
                            @endphp

                            <li class="block-hero__tile">
                                @include('partials.tile', ['bodyClassModifier' => 'partial-tile__body--reduced-margin partial-tile__body--no-image-up-lg partial-tile__body--image-top-down-md', 'dataLayerLabel' => 'Homepage'])
                            </li>
                        @endforeach

                        @php
                            wp_reset_postdata();
                        @endphp
                    </ul>
                </div>
            </div>

            <div class="block-hero__tiles-controls">
                <a href="#" class="block-hero__tiles-arrow block-hero__tiles-arrow--prev" data-js="hero-tiles-prev-button">previous slide</a>

                <div class="block-hero__tiles-counter">
                    <span class="p" data-js="hero-tiles-counter">01</span>
                    <span class="p"> / </span>
                    <span class="p"> {{ $postAmount }} </span>
                </div>

                <a href="#" class="block-hero__tiles-arrow block-hero__tiles-arrow--next" data-js="hero-tiles-next-button">next slide</a>
            </div>
        </div>
    @endif
    <script>
        var ctaEvent = document.querySelectorAll('.hover-cta');
        for (let i = 0; i < ctaEvent.length; i++) {
            if (ctaEvent[i].getAttribute('data-title-label')) {
                ctaEvent[i].setAttribute('data-layer', 'Articoli;;' + ctaEvent[i].getAttribute('data-title-label') + ';;Homepage')
            }
        }
    </script>
</div>