{assign var=showLicenceAlert value={$portlet->showLicenceAlert()}}

<div id="effect-box-{$instance->getUid()}"
  class="{if !$isPreview}{$instance->getStyleClasses()}{/if} {if $showLicenceAlert} alert alert-danger"
  role="alert{/if}" style="{$instance->getStyleString()}">
  <style class="opc-exu-effect-box-style">
    .panel-image {
      background-position: center center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      background-size: cover;
      position: relative;
      background-attachment: fixed;
    }

    @media screen and (min-width: 48em) {}

    .panel-image {
      height: 100vh;
      max-height: 1200px;
    }
  </style>
  <style>
    @media screen and (max-width: 767px) {
      #effect-box-{$instance->getUid()} .panel-image {
      height: {$instance->getProperty('imageheight')}vh;
      width: 100%;
    }
    }
  </style>
  {if $isPreview && $showLicenceAlert}
    <p>{$portlet->showLicenceInfo()}</p>
    {assign var=dHintLink value="<a href='{$portlet->cinUrl()}'>{$portlet->cinUrlText()}</a>"}
    {assign var=hintText value=__("po_visit_cin")}
    {$dHint = sprintf($hintText, $dHintLink)}
    <p>{$dHint}</p>
  {/if}
  {foreach $instance->getProperty('effectbox') as $idx => $item}
    <article class="lm-animation-panel">
      {$areaTitleId = 'lm_animation_title-'|cat:$idx}
      {$areaContentId = 'lm_animation_content-'|cat:$idx}
      {$areaOverlayId = 'lm_animation_overlay-'|cat:$idx}
      <div class="panel-image" style="background-image: url(media/image/storage/opc/{$item['url']});">
        {* <div class="panel-image-prop" style="padding-top: 60.833333333333%"></div> *}
        <div class='{if $isPreview}opc-area{/if}' {if $isPreview} data-area-id='{$areaOverlayId}' {/if}
          style="position: relative;">
          {if $isPreview}
            {$instance->getSubareaPreviewHtml({$areaOverlayId})}
          {else}
            {$instance->getSubareaFinalHtml({$areaOverlayId})}
          {/if}
        </div>
      </div>
      <div class='{if $isPreview}opc-area{/if}' {if $isPreview} data-area-id='{$areaContentId}' {/if}
        style="position: relative;">
        {if $isPreview}

          {$instance->getSubareaPreviewHtml({$areaContentId})}
        {else}
          {$instance->getSubareaFinalHtml({$areaContentId})}
        {/if}
      </div>
    </article>
  {/foreach}
</div>
