{% if board.bo_use_sideview %}
    {% import "/sideview/macros.html" as sideview %}
{% endif %}

{% set thumb_width, thumb_height = 210, 150 %}

<div class="sei_card_list">
    <h2 class="lat_title"><a href="{{ url_for('list_post', bo_table=bo_table) }}">{{ board.subject }}</a></h2>
    <div class="card_container">
    {% for write in writes -%}
    
        {% set thumbnail=get_list_thumbnail(request, board, write, thumb_width, thumb_height) %}
        <div class="card">
            <a href="{{ url_for('read_post', bo_table=bo_table, wr_id=write.wr_id) }}" class="card_img">
                    {% 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>
            {% if write.icon_secret -%}
                <i class="fa fa-lock" aria-hidden="true"></i>
                <span class="blind">비밀글</span>
            {%- endif -%}
            <div class="card_desc">
                <p>
                    {% if board.bo_use_sideview %}
                        {{ sideview.get(request, write.mb_id, write.name, write.wr_email, write.wr_homepage)|safe }}
                    {% else %}
                        {% if write.is_notice %}<strong>{{ write.subject }}</strong>{% else %}{{ write.subject }}{% endif %}
                    {% endif %}
                </p>
                <p>
                    <span class="{% if write.mb_id %}member{% else %}guest{% endif %}">
                       {{ write.name }}
                    </span>
                    <span class="card_date">{{ write.datetime }}</span>
                </p>
            </div>
        </div>
    {% else -%}
        <div class="empty_card">게시물이 없습니다.</div>
    {%- endfor %}
    </div>
    <a href="{{ url_for('list_post', bo_table=bo_table) }}" class="card_more">
        <span class="blind">{{ board.subject }}</span>더보기
    </a>
</div>

<style>
    .sei_card_list{
        position: relative;
    }
    .sei_card_list .card_container{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        column-gap: 20px;
    }
    .sei_card_list .card{
        flex: 1 1 calc(100% / 3 - 20px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
        border-radius: 8px; 
        overflow: hidden; 
        margin-bottom: 20px;
    }
    .sei_card_list .card:hover .card_img img{
        transform: scale(1.05);
    }
    .sei_card_list .card_img img{
        width: 100%;
        transition: transform 0.3s ease-in-out;
        height: auto;
    }
    .sei_card_list .card_desc{
        padding: 12px;
        font-size: 14px;
        line-height: 1.5rem;
    }
    .sei_card_list .card_desc p:nth-child(1){
        margin-bottom: 12px;
    }
    .sei_card_list .card_more{
        position: absolute;
        top: 11px;
        right: 0;
        display: block;
        width: 40px;
        line-height: 25px;
        color: var(--primaryColor);
        border-radius: 3px;
        text-align: center;
    }
</style>