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

<div class="g-post-image-wrapper">
  <div class="group g-img-frame">
    <div class="g-img-wrap" 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">
            {{#ifCond wset.layout.label.type '==' 'ko'}}
              {{> widget_post_label_ko}}
            {{else}}
              {{> widget_post_label}}
            {{/ifCond}}
          </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}}

      {{!EBGIN: 오버레이}}
      {{#ifCond wset.use.overlay "==" "on"}}
        {{! 오버레이를 사용하는 경우}}
        {{#ifCond wset.overlay.type '==' 'bgcolor'}}
          {{! 오버레이 타입이 배경 색상인 경우}}
          <div class="g-img-overlay 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">
            <a href="{{href}}" class="block w-full h-full"></a>
          </div>
        {{/ifCond}}
      {{/ifCond}}
      {{!END: 오버레이}}

      {{!BEGIN: 이미지}}
      <a{{#ifCond wset.thumbnail.preview '==' 'on'}} href="{{img.org}}" data-fancybox{{else}} href="{{href}}"{{/ifCond}}{{is_link_target}}>
        <div class="g-img-item{{#ifCond wset.use.overlay "==" "on"}}{{#ifCond wset.overlay.type '==' 'zoom'}} transition duration-500 ease-in-out transform hover:scale-110{{/ifCond}}{{/ifCond}}" style="background-image: url({{img.src}});" alt="{{img.alt}}"></div>
      </a>
      {{!END: 이미지}}

      {{#ifCond img.type "==" "video"}}
        {{! 이미지 타입이 비디오인 경우}}
        <div class="absolute right-5 bottom-5">
          <svg xmlns="http://www.w3.org/2000/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>