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

@php

    $image = get_field('image');
    $color_style = get_field('color_style');
    $title = get_field('title');
    $subtitle = get_field('subtitle');
    $subtitle_formatted = strip_tags($subtitle);
    $link_text_1 = get_field('link_text_1');
    $url_1 = get_field('url_1');
    $link_text_2 = get_field('link_text_2');
    $url_2 = get_field('url_2');

@endphp

<div class="block-chime-hero">
    <div class="block-chime-hero__body">
        <div class="block-chime-hero__image block-chime-hero__image--top">
            <img src="{{ $image['url'] }}" alt="{{ $image['alt'] }}">
        </div>
        @if ($title)
            <div class="block-chime-hero__title">
                <h2 class="title-2"><span style="background-color: @php echo $color_style; @endphp;">{!! $title !!}</span></h2>
            </div>
        @endif

        @if ($subtitle_formatted)
            <div class="block-chime-hero__subtitle">
                <div class="p">{{ $subtitle_formatted }}</div>
            </div>
        @endif

        @if ($url_1 && $url_2)
            <div class="block-chime-hero__link-wrap">
                <a class="cta" href="{{ $url_1 }}" target="_blank" rel="link"><span style="background-color: @php echo $color_style; @endphp;">{{ $link_text_1 }}</span></a>
                <a class="cta" href="{{ $url_2 }}" target="_blank" rel="link"><span style="background-color: @php echo $color_style; @endphp;">{{ $link_text_2 }}</span></a>
            </div>
        @endif
    </div>
</div>