{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:variable name="blockID" value="{f:if(condition: data.anchor, then: data.anchor, else: data.uuid)}" />
<f:variable name="lightboxClass" value="{f:if(condition: '{data.opt_behavior} == \'lightbox\' and {data.opt_type_media} == \'media-image\'', then: ' lightbox')}" />

<section id="{blockID}" class="block-media-mixed block-media-mixed--{data.opt_layout}" data-block="media-mixed">
  <div class="grid-container">
    <f:if condition="{data.pretitle} or {data.title} or {data.info}">
    <div class="block-media-mixed__heading">
      <f:if condition="{data.pretitle}">
      <span>{data.pretitle}</span>
      </f:if>
      <f:if condition="{data.title}">
      <h2>{data.title}</h2>
      </f:if>
      <f:if condition="{data.info}">
      <p class="text-lg"> <f:format.nl2br>{data.info}</f:format.nl2br> </p>
      </f:if>
    </div>
    </f:if>
    <div class="block-media-mixed__content">
      <div class="block-media-mixed__content-text wysiwyg">
        <f:format.html>{data.text}</f:format.html>
      </div>
      <div class="block-media-mixed__content-media">
        <f:if condition="{data.image} and {data.opt_type_media} == 'media-image'">
        <div class="block-media-mixed__content-media-wrap{lightboxClass}"{f:if(condition: data.media_width, then: ' style="--width: {data.media_width}"')}>
          <f:link.typolink parameter="{data.img_link}" class="cta"> </f:link.typolink>
          <f:for each="{data.image}" as="image">
            <f:render partial="Image" arguments="{file: image}" />
          </f:for>
        </div>
        </f:if>

        <f:if condition="{data.media_url} and {data.opt_type_media} == 'media-video'">
          <figure class="media{lightboxClass}" >
            <f:variable name="isYoutube" value="{data.media_url -> v:format.pregReplace(pattern: '/^.*youtu.*$/', replacement: '1')}" />
            <f:if condition="{isYoutube} == 1">
              <f:variable name="ytId" value="{data.media_url -> v:format.pregReplace(pattern: '/^.*(?:[?&]v=|youtu\.be\/)([^&\s]+).*$/', replacement: '$1')}" />
              <v:media.youtube videoId="{ytId}" width="100%" height="100%" />
            </f:if>
            <f:variable name="isVimeo" value="{data.media_url -> v:format.pregReplace(pattern: '/^.*vimeo.*$/', replacement: '1')}" />
            <f:if condition="{isVimeo} == 1">
              <f:variable name="vimeoId" value="{data.media_url -> v:format.pregReplace(pattern: '/^.*vimeo\.com\/(\d+).*$/', replacement: '$1')}" />
              <v:media.vimeo videoId="{vimeoId}" width="100%" height="100%" />
            </f:if>
          </figure>
        </f:if>
      </div>
    </div>
  </div>
</section>