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

@php
    $selector = get_field( 'selector' );

    $imageDesktop = get_field( 'image_desktop' );
    $imageMobile = get_field( 'image_mobile' );

    $video = get_field( 'video' );

    $postID = get_the_id();

    $chooseCategory = get_field('cat_priority', $postID);
    // error_log(json_encode($chooseCategory));
    
    $category = get_the_category();
    $finalCategory = $category[0];
    if (!is_null($chooseCategory) && $chooseCategory !== 'no') {
        foreach ($category as $cat) {
            // error_log(json_encode($cat->slug));
            if (strpos($chooseCategory, $cat->slug) !== false){
                $finalCategory = $cat;
                break;
            }
        }
    }

    $category_name = $finalCategory->slug;

    //PEOPLE
    $peopleOrId = get_category_by_slug('people') -> term_id;
    $peopleId = apply_filters( 'wpml_object_id', $peopleOrId, 'category', true );
    $peopleCategory = get_category($peopleId);

    //PLANET
    $planetOrId = get_category_by_slug('planet') -> term_id;
    $planetId = apply_filters( 'wpml_object_id', $planetOrId, 'category', true );
    $planetCategory = get_category($planetId);

    //CHIME
    $chimeOrId = get_category_by_slug('chime') -> term_id;
    $chimeId = apply_filters( 'wpml_object_id', $chimeOrId, 'category', true );
    $chimeCategory = get_category($chimeId);

    //IMAGE LINK
    $imageUrl = get_field('image_post_link');
    $targetBlank = get_field('target_blank');

@endphp

<div class="block-post-hero">
    @if ($imageDesktop)
        @if ($imageUrl != "")
            @if ($targetBlank)
                <a href="{{ $imageUrl }}" target="_blank">   
            @else
                <a href="{{ $imageUrl }}"> 
            @endif
                    <picture>
                        <source srcset="{{ $imageDesktop['url'] }}" media="(min-width: 992px)">
                        <source srcset="{{ $imageMobile['url'] }}" media="(max-width: 991px)">
                        <img src="{{ $imageDesktop['url'] }}" alt="{{ $imageDesktop['alt'] }}">
                    </picture>
                </a>
        @else
            <picture>
                <source srcset="{{ $imageDesktop['url'] }}" media="(min-width: 992px)">
                <source srcset="{{ $imageMobile['url'] }}" media="(max-width: 991px)">
                <img src="{{ $imageDesktop['url'] }}" alt="{{ $imageDesktop['alt'] }}">
            </picture>
        @endif
        @if ($category_name == $chimeCategory->slug)
            <div class="block-post-hero__separator--chime-for-change"></div>
        @elseif ($category_name == $peopleCategory->slug)
            <div class="block-post-hero__separator--people"></div>
        @elseif ($category_name == $planetCategory->slug)
            <div class="block-post-hero__separator--planet"></div>
        @endif

    @elseif ($video)
        @include('partials.iframe-video-fullwidth', ['$video' => $video])
        @if ($category_name == $chimeCategory->slug)
            <div class="block-post-hero__separator--chime-for-change video-band-separator"></div>
        @elseif ($category_name == $peopleCategory->slug)
            <div class="block-post-hero__separator--people video-band-separator"></div>
        @elseif ($category_name == $planetCategory->slug)
            <div class="block-post-hero__separator--planet video-band-separator"></div>
        @endif
    @endif
</div>