@php
global $post;
$muy_events_teaser_taxonomy_toggle = get_theme_mod('muy_events_teaser_taxonomy_toggle');
$muy_events_teaser_image_toggle = get_theme_mod('muy_events_teaser_image_toggle', true);
$muy_events_teaser_image_placeholder = get_theme_mod('muy_events_teaser_image_placeholder');
$muy_events_teaser_image_height = get_theme_mod('muy_events_teaser_image_height');
$muy_events_teaser_category_toggle = get_theme_mod('muy_events_teaser_category_toggle', true);
$muy_events_teaser_showmore = get_theme_mod('muy_events_teaser_showmore');
$muy_events_teaser_excerpt_toggle = get_theme_mod('muy_events_teaser_excerpt_toggle', true);
$muy_events_teaser_date_toggle = get_theme_mod('muy_events_teaser_date_toggle');

$start_date = tribe_get_start_date($event, false, 'U');
$end_date = tribe_get_end_date($event, false, 'U');

@endphp
<style>
  .teaser-event .entry-summary p {
    color: {!! $excerpt_color !!};
  }
</style>
<article {!! post_class('teaser-event') !!}>
  @if ($muy_events_teaser_image_toggle)
    <div class="figure-wrapper">
      <figure style="aspect-ratio: 16 / 9;">
        <a href="{{ get_permalink($event->ID) }}" title="{!! get_the_title($event->ID) !!}">
          @if (has_post_thumbnail($event->ID))
            <img data-mh="teaser-post" class="lazy @if ($muy_events_teaser_image_height) {!! $muy_events_teaser_image_height !!} @endif"
              src="{!! get_the_post_thumbnail_url($event->ID, 'large') !!}" data-src="{!! get_the_post_thumbnail_url($event->ID, 'large') !!}" />
          @elseif($muy_events_teaser_image_placeholder)
            <img data-mh="teaser-post" class="lazy @if ($muy_events_teaser_image_height) {!! $muy_events_teaser_image_height !!} @endif"
              src="{!! wp_get_attachment_url($muy_events_teaser_image_placeholder, 'large') !!}" data-src="{!! wp_get_attachment_url($muy_events_teaser_image_placeholder, 'large') !!}" />
          @endif

        </a>
      </figure>
    </div>
  @endif

  <div class="teaser-content">
    <header>
      
      @if ($muy_events_teaser_date_toggle)
      <time 
          class="updated" 
          datetime="{{ get_post_time('c', true) }}" 
          style="
              {{ $date_style == 'outline' ? 'border-color:' . $date_bkg_color . ';' : 'background-color:' . $date_bkg_color . ';' }}
              border-color: {{ $date_bkg_color }};
              border-radius: {{ $date_radius }};
          "
      >

      {{-- @dd($date_radius); --}}
          <span style="color: {{ $date_text_color }} !important;">
              {{ tribe_get_start_date($event, false, 'd F Y') }}
              @if (tribe_get_start_date($event, false, 'd F Y') != tribe_get_end_date($event, false, 'd F Y'))
                - {{ tribe_get_end_date($event, false, 'd F Y') }}
              @endif
          </span>
      </time>
  
    
      @endif
      <a href="{{ get_permalink($event->ID) }}" title="{!! get_the_title($event->ID) !!}">
        <h3 class="teaser-title" style="color: {!! $titleColor !!}">
          {{$event->post_title}}
        </h3>
      </a>
    </header>

    <div class="entry-summary" style="color: {{ $excerpt_color }}">
      @if ($muy_events_teaser_excerpt_toggle)
        {{ $event->post_excerpt }}
      @endif
    </div>

    <div class="teaser-info">
      @if ($muy_events_teaser_category_toggle)
        @php $categories = get_the_terms($event->ID, Tribe__Events__Main::TAXONOMY);
         @endphp
        @if($categories)
          @foreach($categories as $category)
            <p class="event-category">{{ esc_html($category->name) }}</p>
          @endforeach
        @endif
      @endif
    </div>
    <div>
      <a class="@if ($muy_events_teaser_showmore) {!! $muy_events_teaser_showmore !!} @endif mt-6 text-sm"
        href="{!! esc_url(get_permalink($event->ID)) !!}" style="color: {!! $cta_color !!}!important;
        border-radius: {!! $btn_radius !!}!important; border-style: solid; border-width:1px;
        {{ $cta_style == 'outline' ? 'border-color:' . $cta_bkg_color . ';' . 'background-color:transparent;' : 'background-color:' . $cta_bkg_color . ';' . 'border-color:' . $cta_bkg_color . ';'}}">
        {!! __('Leggi di più', 'muy-lindo') !!}
      </a>
    </div>
  </div>
</article>
