{{!
  // tmpl:  gtgf-full-wide-video-carousel > widget_tmpl.html
  // @update date: 2020.08.01
  // @author GTGF, JB
}}


<div class="g-carousel-full-wide-video-wrapper">
  <div id="gtgf-carousel-container" {{{wset.slider_width}}}>

    {{!BEGIN: VIDEO OVERLAY}}
    {{#ifCond wset.video_overlay '==' 'on'}}
      <div class="gtgf-carousel-overlay g-carousel-overlay" style="background-color:{{wset.video_overlay_color}};"></div>
    {{/ifCond}}
    {{!END: VIDEO OVERLAY}}

    <div id="gtgf-carousel-{{rand_id}}" class="gtgf-carousel-video"
      data-id="{{rand_id}}"
      data-theme="{{THEMA}}"
      data-slider="{{wset.slider}}"
      data-carousel='{{wset.slider_data}}'
      data-items='{{wset.items_data}}'>


      {{!BEGIN: 이미지 아이템}}
      <div id="gtgf-carousel-full-wide-video-{{rand_id}}" class="g-item-wrap owl-carousel owl-theme owl-small-space">
        {{#ifCond wset.cache ">" 0}}
          {{!TODO: 현재는, do nothing
            // - 향후, 빠른 위젯 로드를 위해서, localstorage 및 local session storage에서 로드하는 방안 고려 (by JB)
          }}

        {{else}}

          {{#each slider}}
            {{#ifCond media_type "==" "img"}}
              {{! 미디어 타입: image}}
              {{#if media_link}}
                <a href="{{media_link}}"{{#ifCond media_new "==" "on"}} target="_black"{{/ifCond}}>
              {{/if}}
                <div class="g-item" style="background-image: url({{img}});"></div>
              {{#if media_link}}
                </a>
              {{/if}}

            {{else}}
              {{! 미디어 타입: video}}
              <div class="item-video embed-responsive embed-responsive-16by9">
                {{#if video_url}}
                  <a class="owl-video" href="{{video_url}}"></a>
                  {{!BEGIN: VIDEO THUMBMAIL}}
                  {{#ifCond ../wset.video_thumbnail_auto '==' 'off'}}
                    {{#if video_thumb.is_video_thumb}}
                      <div class="g-video-thumbnail" style="background-image: url({{video_thumb.thumb.src}})"></div>
                    {{else if video_thumb.video_thumbnail}}
                      <div class="g-video-thumbnail" style="background-image: url({{video_thumb.video_thumbnail}})"></div>
                    {{else}}
                      <div class="g-no-video-item"></div>
                    {{/if}}
                  {{/ifCond}}
                  {{!END: VIDEO THUMBMAIL}}
                  {{!--
                    <div class="gtgf-video-play-btn"></div>
                    <div class="gtgf-video-overlay"></div>
                  --}}

                {{else}}
                  <div class="g-no-video-item"></div>

                {{/if}}
              </div>

            {{/ifCond}}
          {{/each}}

          {{#unless slider}}
            <div class="item-none text-muted text-center">
              {{자료가없습니다}}
            </div>
          {{/unless}}

        {{/ifCond}}

      </div>
      {{!END: 이미지 아이템}}

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

{{!BEGIN: Widget Setup}}
{{> widget_setup}}
{{!END: Widget Setup}}


<script src="{{skin_url}}/assets/base/js/widget.min.js"></script>
<script>
  $(document).ready(function() {
    gtgfFullWideVideoCrouselWidget.init({widgetRandId: "{{rand_id}}"});
  });
</script>