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

<div class="sei_list">
    <h2 class="lat_title"><a href="{{ url_for('list_post', bo_table=bo_table) }}">{{ board.subject }}</a></h2>
    <ul>
    {% for write in writes -%}
        <li>
            <span class="list_number">{{ loop.index }}</span>
            <a href="{{ url_for('read_post', bo_table=bo_table, wr_id=write.wr_id) }}">
                {% 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 %}
            </a>
            <div class="lt_desc">
                <p>
                    <!-- 이름도 나오게 하고 싶다면 아래 <span> 태그 주석을 해제 해주세요 -->
                    <!-- <span class="{% if write.mb_id %}member{% else %}guest{% endif %}">
                        {{ write.name }}
                    </span> -->
                    <span class="lt_date">{{ write.datetime }}</span>
                </p>
            </div>
        </li>
    {% else -%}
        <li class="empty_li">게시물이 없습니다.</li>
    {%- endfor %}
    </ul>
    <a href="{{ url_for('list_post', bo_table=bo_table) }}" class="lt_more">
        <span class="blind">{{ board.subject }}</span>더보기 +
    </a>
</div>
<link rel="stylesheet" href="{{ theme_asset(request, '/js/swiper/swiper.min.css?ver=1.1.1') }}">
<link rel="stylesheet" href="{{ theme_asset(request, '/js/swiper/swiper.min.js?ver=1.1.1') }}">
<style>
    .sei_latest{
        display: flex;
        justify-content: space-between;
        column-gap: 20px;
    }
    @media screen and (max-width: 640px){
        .sei_latest{
            flex-direction: column;
        }
    }
    .sei_list{
        position: relative;
        flex: 1 auto;
    }
    .sei_list ul{
        display: flex;
        flex-direction: column;
    }
    .sei_list ul li{
        display: flex;
        align-items: center;
        margin-bottom: 12px;
    }
    .sei_list ul li > a{
        flex: 1 1 auto;
    }
    .sei_list ul li:last-child{
        margin-bottom: 0;
    }
    .sei_list .list_number{
        margin-right: 10px;
        font-weight: bold;
        background-color: var(--primaryColor);
        color: white;
        padding: 2px 6px;
        border-radius: 3px;
    }
    .sei_list .lt_more{
        position: absolute;
        top: 11px;
        right: 0;
        display: block;
        width: 50px;
        line-height: 25px;
        color: var(--primaryColor);
        border-radius: 3px;
        text-align: center;
    }
    .sei_list .lt_desc{
        font-size: 14px;
        margin-left: 10px;
        line-height: 1.5rem;
    }
    .sei_list .lt_desc .member, .sei_list .lt_desc .guest {
        font-size: 12px;
    }
    .sei_list .lt_desc .lt_date {
        font-size: 12px;
    }
</style>