{{! 
  // widget_post_image_tmpl.html
  // - 이미지 썸네일
  // @update date: 2024.01.09
  // @author: GTGF, DANU
}}

<div class="g-post-image-wrapper">
  <div class="g-img-frame{{#ifCond wset.thumbnail.shape '==' 'round'}} overflow-hidden rounded-2xl{{/ifCond}}{{#ifCond border '==' 'on'}} border border-gray-200{{/ifCond}}">
    <div class="g-img-wrap group" data-img-ratio="{{wset.thumbnail.ratio}}">

      {{!BEGIN: 라벨}}
      {{#ifCond wset.layout.label.display '==' 'image'}}
        {{#ifCond wset.use.label '==' 'on'}}
          <div class="absolute {{wset.layout.label.position}}-0 inset-x-0 z-10">
            {{> widget_post_label}}
          </div>
        {{/ifCond}}
      {{/ifCond}}
      {{!END: 라벨}}

      {{#if ../is_checkbox}}
        {{! 체크박스를 사용하는 경우}}
        <div class="absolute top-5 right-5 z-10">
          <input type="checkbox" id="chk_wr_id_{{@index}}" class="w-6 h-6" name="chk_wr_id[]" value="{{wr_id}}">
        </div>
      {{/if}}

      {{!BEGIN: Image Thumbnail}}
      {{#ifCond image_type "==" "image"}}
        <div>

          {{#ifCond wset.thumbnail.ratio '==' 'org'}}
            {{! 이미지}}
            <div class="{{#ifCond wset.use.hover '==' 'on'}}{{#ifCond wset.hover.image.type '==' 'zoom-in'}}transition duration-300 ease-in-out transform hover:scale-105{{/ifCond}}{{/ifCond}}">
              <img src="{{img.org}}" alt="{{img.alt}}">
            </div>
          {{else}}
            {{! 이미지}}
            <div class="g-img-item{{#ifCond wset.use.hover '==' 'on'}}{{#ifCond wset.hover.image.type '==' 'zoom-in'}} transition duration-300 ease-in-out transform hover:scale-105{{/ifCond}}{{/ifCond}}" 
              style="background-image: url({{#if as_thumbnail}}{{img.src}}{{else}}{{img.org}}{{/if}});" 
              alt="{{img.alt}}">
            </div>

            {{!BEGIN: Hover}}
            {{#ifCond wset.use.hover "==" "on"}}
              {{#ifCond wset.hover.image.type '==' 'img-transition'}}
                {{#if as_thumbnail_overlay}}
                  <div class="g-img-item opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out transform" 
                    style="background-image: url({{as_thumbnail_overlay}})" 
                    alt="thumbnail overlay">
                  </div>
                {{/if}}
              {{else ifCond wset.hover.image.type '==' 'bg-overlay'}}
                <div class="absolute inset-0 z-10 bg-gradient-to-t from-gray-900 via-gray-900/40 opacity-0 transition duration-300 ease-in-out group-hover:opacity-30"></div>
              {{/ifCond}}
            {{/ifCond}}
            {{!END: Hover}}
          {{/ifCond}}

        </div>
      {{else}}
        <a href="{{#ifCond wset.thumbnail.preview '==' 'on'}}{{img.org}}{{else}}{{href}}{{/ifCond}}" 
          {{#ifCond wset.thumbnail.preview "==" "on"}}data-fancybox{{/ifCond}}
          {{{is_link_target}}}>

          {{#ifCond wset.thumbnail.ratio '==' 'org'}}
            {{! 이미지}}
            <div class="{{#ifCond wset.use.hover '==' 'on'}}{{#ifCond wset.hover.image.type '==' 'zoom-in'}}transition duration-300 ease-in-out transform hover:scale-105{{/ifCond}}{{/ifCond}}">
              <img src="{{img.org}}" alt="{{img.alt}}">
            </div>
          {{else}}
            {{! 이미지}}
            <div class="g-img-item{{#ifCond wset.use.hover '==' 'on'}}{{#ifCond wset.hover.image.type '==' 'zoom-in'}} transition duration-500 ease-in-out transform hover:scale-105{{/ifCond}}{{/ifCond}}" 
              style="background-image: url({{#if as_thumbnail}}{{img.src}}{{else}}{{img.org}}{{/if}});" 
              alt="{{img.alt}}">
            </div>
          {{/ifCond}}

          {{!BEGIN: Hover}}
          {{#ifCond wset.use.hover "==" "on"}}
            {{#ifCond wset.hover.image.type '==' 'img-transition'}}
              {{#if as_thumbnail_overlay}}
                <div class="g-img-item opacity-0 group-hover:opacity-100 transition duration-500 ease-in-out transform" 
                  style="background-image: url({{as_thumbnail_overlay}})" 
                  alt="thumbnail overlay">
                </div>
              {{/if}}
            {{else ifCond wset.hover.image.type '==' 'bg-overlay'}}
              <div class="absolute inset-0 z-10 bg-gradient-to-t from-gray-900 via-gray-900/40 opacity-0 transition duration-500 ease-in-out group-hover:opacity-30"></div>
            {{/ifCond}}
          {{/ifCond}}
          {{!END: Hover}}

        </a>
      {{/ifCond}}
      {{!END: Image Thumbnail}}

      {{#ifCond img.type "==" "video"}}
        {{! 이미지 타입이 비디오인 경우}}
        <div class="absolute right-5 bottom-5">
          <svg class="fill-current text-white opacity-90" width="30" height="30" viewBox="0 0 30 30">
            <g transform="translate(-43.037 468.854)">
              <path d="M56.1-468.758a15.107,15.107,0,0,0-10.738,6.831,15.738,15.738,0,0,0-2.253,6.409,19.5,19.5,0,0,0,.007,3.331,15.019,15.019,0,0,0,8.337,11.81,14.984,14.984,0,0,0,11.266.775,15.087,15.087,0,0,0,9.548-9.472,15.154,15.154,0,0,0-.007-9.592,15.125,15.125,0,0,0-7.872-8.8,15.7,15.7,0,0,0-4.7-1.324A21.108,21.108,0,0,0,56.1-468.758Zm.9,9.578a15.213,15.213,0,0,1,3.288,1.7c2.274,1.317,2.647,1.578,3.077,2.155a2.507,2.507,0,0,1-.7,3.627c-.373.282-4,2.4-4.816,2.817-1.831.923-3.429.352-3.992-1.43-.148-.479-.155-.592-.155-3.557s.007-3.078.155-3.563a2.937,2.937,0,0,1,.88-1.387A2.654,2.654,0,0,1,57-459.18Z" transform="translate(0 0)"/>
            </g>
          </svg>
        </div>
      {{/ifCond}}

    </div>
  </div>
</div>