{% set thumb_width, thumb_height = 500, 350 %}

<div class="slider-wrap con" data-slick-autoplay-status="Y">
    <div class="slider main-slider con">
      {% for write in writes -%}
        <div class="slide-item">
            <div class="slide-con" data-dot-title="{{ write.subject }}" data-dot-content="{{ write.wr_content }}" data-dot-bo-table="{{ bo_table }}" data-dot-wr-id="{{ write.wr_id }}">
                <div class="slide-dummy"></div>
                <div class="slide-txt">
                    <h2 class="txt-tt"><a href="{{ url_for('read_post', bo_table=bo_table, wr_id=write.wr_id) }}">{{ write.subject }}</a></h2>
                    <p class="txt-desc">{{ write.wr_content|striptags }}</p>
                    <div class="txt-btn">
                        <a href="{{ url_for('read_post', bo_table=bo_table, wr_id=write.wr_id) }}">바로가기</a>
                    </div>
                </div>
                <picture class="img-box">
                    <a href="{{ url_for('read_post', bo_table=bo_table, wr_id=write.wr_id) }}" class="lt_img">
                        {% set thumbnail=get_list_thumbnail(request, board, write, thumb_width, thumb_height) %}
                        {% if thumbnail.src %}
                        <img src="/{{ thumbnail.src }}" alt="{{ thumbnail.alt }}">
                        {% if thumbnail.noimg %}
                        <span class="is_label is_noimage">No Image</span>
                        {% endif %}
                        {% else %}
                        <img src="{{ url_for('static', path='/img/dummy-donotremove.png?ver=1.0.0') }}" alt="" width="{{ thumb_width }}" height="{{ thumb_height }}">
                        <span class="is_label is_noimage">No Image</span>
                        {% endif %}
                    </a>
                </picture>
            </div>
        </div>   
        {% else -%}
        <div class="slide-item" style="line-height:145px;color:#666;text-align:center;padding:0">
          <div class="slide-con" data-dot-title="게시물이 없습니다.">
            <div class="slide-txt">
              <h2 class="txt-tt">게시물이 없습니다.</h2>
              <p class="txt-desc">게시물이 없습니다.</p>
          </div>
          <picture class="img-box">
            <a href="#" class="lt_img">
                <img src="{{ url_for('static', path='/img/dummy-donotremove.png?ver=1.0.0') }}" alt="" width="{{ thumb_width }}" height="{{ thumb_height }}">
                <span class="is_label is_noimage">No Image</span>
            </a>
          </picture>
          </div>
        </div>
        {%- endfor %}
    </div>
</div>

<script>
    // 상단 메인 배너 slick
    $('.main-slider').slick({
        dots:true,
        fade:true,
        customPaging: function(slider, i) { 
            const slideCon = $(slider.$slides[i]).find('.slide-con');
            return `
                <button class="tab">
                    <span class="s-line-fill"></span>
                    <div class="s-indicator only-pc">
                        <a href="/board/${slideCon.attr('data-dot-bo-table')}/${slideCon.attr('data-dot-wr-id')}" class="inner-txt">
                            ${$(slider.$slides[i]).find('.slide-con').attr('data-dot-title')}
                        </a>
                    </div>
                </button>
            `;
        },
    });

    // progressbar 다 차면 슬라이드 시키기
    setInterval(function() {
        $('.slider-wrap > .main-slider').each(function(index, node) {
            var $slider = $(node);
            
            if ( $slider.parent().attr('data-slick-autoplay-status') !== 'N' ) {
                var width = $slider.find('.slick-dots .slick-active > button > .s-line-fill').css('width');
                var buttonWidth = $slider.find('.slick-dots .slick-active > button').css('width');

                if ( width == buttonWidth ) {
                    $slider.slick('slickNext');
                }
            }
        });
    }, 500);

    // 최신글 없을 시 슬라이더 삭제
    if ($('.slide-con').length == 0) {
        $('.slick-dots').remove();
    }
</script>