{| extend("base.html") |}

{| block content |}
<p class="updated">
    <span>最近更新</span>
    <span>最近更新：{= count_vod(86400000) =} &nbsp; 全部：{= count_vod(0) =}</span>
</p>
<div class="vod-list">
    {[ for _, vod in ipairs(ctx.vod_lists.last_updated) do ]}
    <div class="vod-item">
        <a href="/vod/detail/?id={= vod.id =}" title="{{ vod.title }}">
            <div class="vod-poster">
                <img loading="lazy" src="{= vod.poster =}">
                {[ if vod.douban.score ~= '0.0' then ]}
                <div class="vod-badge">{{ vod.douban.score }}</div>
                {[ end ]}
                <div class="vod-memo">{{ vod.memo }}</div>
            </div>
            <div class="vod-title">{{ vod.title }}</div>
        </a>
    </div>
    {[ end ]}
    {[ for _=0, 10, 1 do ]}
    <div class="vod-item"></div>
    {[ end ]}
</div>
{| end block content |}

{| block style |}
<style>
    .updated {
        display: flex;
        justify-content: space-between;
    }

    .vod-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
        justify-content: space-between;
    }

    .vod-item {
        width: 120px;
        overflow: hidden;
        cursor: pointer;
    }

    @media screen and (max-width: 400px) {
        .vod-item {
            width: calc(50% - 1em);
        }
    }

    .vod-item a {
        color: #000;
        text-decoration: none;
    }

    .vod-poster {
        position: relative;
        width: 120px;
        height: 180px;
        background-position: center;
    }

    .vod-poster .vod-badge {
        position: absolute;
        background: #fff;
        color: #000;
        top: 0;
        right: 0;
        padding: 0 4px;
        border-radius: 0 0 0 8px;
    }

    .vod-poster>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .vod-poster .vod-memo {
        position: absolute;
        background: #fff;
        bottom: 0;
        right: 0;
        padding: 0 4px;
        border-radius: 6px 0 0 6px;
        font-size: 0.6em;
    }

    .vod-title {
        overflow: hidden;
    }
</style>
{| end block style |}
