{{!----------------------------------------------------------------------------
  // widgetskin_tmpl.html
  // - post gallery template
  // @update date: 2023.10.06
  // @author: GTGF, DANU
-----------------------------------------------------------------------------}}

{{!BEGIN: Post gallery wrapper}}
<div class="g-post-gallery-wrapper">

  {{#if list}}
    {{! 리스트가 있는 경우}}
    <div class="grid grid-cols-{{wset.item_mobile_h}} md:grid-cols-{{wset.item_h}} grid-rows-{{wset.item_mobile_v}} md:grid-rows-{{wset.item_v}} gap-4 lg:gap-10">

      {{#each list}}
        {{!--------------------------------------------------------------------
          // Single Item List
          // SelectN Single 게시판을 사용할 때, 아이템에 해당하는 element에 반드시 .g-baord-item class를 추가한다.
          // - .g-board-item class는 모든 스킨의 게시판에 공통으로 사용되는 class 명이다.
          // - data-target={{wr_id}} attribute와 {{wr_id}} 값을 반드시 포함한다.
          // @update date: 2018.05.21 by JB
        ---------------------------------------------------------------------}}
        <div class="bg-white{{#ifCond ../wset.rounded "==" "round"}} overflow-hidden rounded-2xl{{/ifCond}} drop-shadow hover:drop-shadow-xl transition duration-500 ease-in-out transform md:hover:scale-105{{#if ../wset.single}} g-board-item" data-target="{{wr_id}}{{/if}}">

          {{!BEGIN: Header}}
          <div class="g-img-frame">
            <div class="g-img-wrap" data-img-ratio="{{../wset.thumb_ratio}}">

              {{#if wr_lable}}
                {{! 라벨을 사용하는 경우}}
                {{{wr_label}}}
              {{/if}}

              {{#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: 이미지}}
              <a href="{{href}}"{{is_link_target}}>
                <div class="g-img-item" 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>
          {{!END: Header}}

          {{!BEGIN: Body}}
          <div class="p-6 md:p-8">

            {{#ifCond ../wset.info_line "==" "on"}}
              {{! 부가정보를 출력 설정한 경우}}
              <div class="flex flex-row gap-6 text-gray-600 text-sm mb-4">

                {{#if ../is_category}}
                  {{#if ca_name}}
                    <span>{{ca_name}}</span>
                  {{/if}}
                {{/if}}

                {{#ifCond ../wset.info_comment "==" "on"}}
                  {{! 댓글수를 사용하는 경우}}
                  {{#ifCond comment '>' 0}}
                    <span>댓글 {{comment}}</span>
                  {{/ifCond}}
                {{/ifCond}}

                {{#ifCond ../wset.info_hit "==" "on"}}
                  {{! 조회수를 사용하는 경우}}
                  {{#ifCond hit '>' '0'}}
        						<span>조회 {{hit}}</span>
                  {{/ifCond}}
                {{/ifCond}}

                {{#ifCond ../wset.info_good "==" "on"}}
                  {{! 추천을 사용하는 경우}}
                  {{#ifCond good '>' '0'}}
        						<span>추천 {{good}}</span>
                  {{/ifCond}}
    						{{/ifCond}}

                {{#ifCond ../wset.info_nogood "==" "on"}}
                  {{! 비추천을 사용하는 경우}}
                  {{#ifCond nogood '>' '0'}}
        						<span>비추천 {{nogood}}</span>
                  {{/ifCond}}
    						{{/ifCond}}

              </div>
            {{else ifCond ../wset.info_line "==" "admin_only"}}
              {{#ifCond ../is_admin "==" 'super'}}
                {{! 부가정보 출력이 관리자만 보기인 경우}}
                <div class="flex flex-row gap-6 text-gray-600 text-sm mb-4">

                  {{#if ../is_category}}
                    {{#if ca_name}}
        						  <span>{{ca_name}}</span>
                    {{/if}}
                  {{/if}}

                  {{#ifCond ../wset.info_comment "==" "on"}}
                    {{! 댓글수를 사용하는 경우}}
                    {{#ifCond comment '>' 0}}
                      <span>댓글 {{comment}}</span>
                    {{/ifCond}}
                  {{/ifCond}}

                  {{#ifCond ../wset.info_hit "==" "on"}}
                    {{! 조회수를 사용하는 경우}}
                    {{#ifCond hit '>' '0'}}
          						<span>조회 {{hit}}</span>
                    {{/ifCond}}
                  {{/ifCond}}

                  {{#ifCond ../wset.info_good "==" "on"}}
                    {{! 추천을 사용하는 경우}}
                    {{#ifCond good '>' '0'}}
          						<span>추천 {{good}}</span>
                    {{/ifCond}}
      						{{/ifCond}}

                  {{#ifCond ../wset.info_nogood "==" "on"}}
                    {{! 비추천을 사용하는 경우}}
                    {{#ifCond nogood '>' '0'}}
          						<span>비추천 {{nogood}}</span>
                    {{/ifCond}}
      						{{/ifCond}}

                </div>
              {{/ifCond}}
            {{/ifCond}}

            <div class="flex gap-3">

              {{#if as_label}}
                {{! 카테고리 라벨을 사용하는 경우}}
                <div class="g-list-category">
                  <span class="g-list-category-label">
                    {{as_label}}
                  </span>
                </div>
              {{/if}}

              {{!BEGIN: 포스트 제목}}
              {{!--------------------------------------------------------------
                // .g-single-load Class
                // - Ajax 기반으로 Single View Page에 로드할 컨텐츠의 주소를 가지고 있는 A Tag element에 .g-single-load class를 추가한다.(MUST)
                // NOTICE: Single list 스킨 별로, .g-board-item element 내에 다수의 A Tag element가 포함될 수 있다.
                // ==> 따라서, 로드할 컨텐츠의 주소 값을 포함하고 있는 A Tag element에 .g-single-load class를 포함하여 구분한다.
                // @update date: 2018.05.21 by JB
              ---------------------------------------------------------------}}
              <a href="{{href}}"{{is_link_target}}{{#if ../wset.single}} class="g-single-load"{{/if}}>
                <div class="text-lg leading-normal font-bold g-ellipsis-line-{{../wset.subject_line}}">{{{subject}}}</div>
              </a>
              {{!END: 포스트 제목}}

            </div>

            {{!----------------------------------------------------------------
              // Single view content loader
              // SelectN-Single 게시판을 사용할 때, content loader를 추가한다.
              // NOTICE: laoder는, 게시판의 style별로 서로 다른 디자인을 갖는다.
              // - CSS Naming: g-list-item-loader, g-gallery-item-loadeer, g-{skin_name}-item-loader
              // @update date: 2018.04.17 by JB
            -----------------------------------------------------------------}}
            {{#unless ../wset.single}}
              <div class="loader g-list-item-loader"></div>
            {{/unless}}

            {{!BEGIN: 포스트 설명}}
            <p class="text-gray-600 text-sm leading-relaxed g-ellipsis-line-{{../wset.desc_line}} mt-5">
              {{! 요약 글이 있는 경우, 요약 글을 우선하여 출력함}}
              {{#if content_desc}}{{content_desc}}{{else}}{{content}}{{/if}}
            </p>
            {{!END: 포스트 설명}}

            {{#ifCond ../wset.info_writer "==" "on"}}
              {{! 작성자를 사용하는 경우}}
              <div class="flex flex-row items-center gap-5 mt-8">
                <img src="{{photo}}" class="w-12 h-12 overflow-hidden rounded-full" alt="{{name}}">
                <div class="leading-lg">
                  <p class="text-sm font-bold">{{name}}</p>
                  {{#ifCond ../wset.info_date "==" "on"}}
                    {{! 작성일을 사용하는 경우}}
                    <p class="text-sm text-gray-600">{{date}}</p>
                  {{/ifCond}}
                </div>
              </div>
            {{/ifCond}}

          </div>
          {{!END: Body}}

        </div>

        {{#if end_row}}
          <div class="clearfix"></div>
        {{/if}}

      {{/each}}
    </div>

  {{else}}
    {{! 리스트가 없는 경우}}
    {{> widget_post_empty}}

  {{/if}}

</div>
{{!BEGIN: Post gallery wrapper}}