<f:layout name="Default" />

<f:section name="Header"></f:section>
<f:section name="Main">
  <f:asset.css identifier="CBTextImage" href="{cb:assetPath()}/frontend.css" />

  <!-- Determine size class based on imagesize field -->
  <f:variable name="sizeClass" value="" />
  <f:if condition="{data.imagesize} == 1">
    <f:then><f:variable name="sizeClass" value="size-25" /></f:then>
  </f:if>
  <f:if condition="{data.imagesize} == 2">
    <f:then><f:variable name="sizeClass" value="size-50" /></f:then>
  </f:if>

  <div class="textimage-container image-pos-{data.imageorient} {sizeClass} fade-in-on-scroll">
    <div class="textimage-image-wrapper {sizeClass}">
      <f:if condition="{data.image}">
        <f:then>
          <figure class="textimage-picture">
            <!-- WEBP source -->
            <source
              type="image/webp"
              srcset="
                {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
                {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
                {f:uri.image(image:data.image.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
              sizes="(max-width: 320px) 90vw,
                     (max-width: 768px) 600px,
                     600px" />

            <!-- Fallback source -->
            <source
              srcset="
                {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
                {f:uri.image(image:data.image.0, width:'400c', cropVariant:'default')} 768w,
                {f:uri.image(image:data.image.0, width:'538c', cropVariant:'default')} 1024w"
              sizes="(max-width: 320px) 90vw,
                     (max-width: 768px) 600px,
                     600px" />

            <f:image
              image="{data.image.0}"
              treatIdAsReference="1"
              cropVariant="default"
              width="538c"
              alt="{data.image.0.alternative}"
              class="textimage-image"
            />
          </figure>
        </f:then>
        <f:else>
          <p>No image available</p>
        </f:else>
      </f:if>
    </div>
    <div class="textimage-wrapper {sizeClass}">
      <f:if condition="{data.header}">
        <h2 class="textimage-header">{data.header}</h2>
        <h3 class="textimage-subheader">{data.subheader}</h3>
      </f:if>
      <f:if condition="{data.bodytext}">
        <div class="textimage-text">
          <f:format.html>{data.bodytext}</f:format.html>
        </div>
      </f:if>
    </div>
  </div>
</f:section>
