<div class="vod-detail-box">
    <div class="vod-poster">
        <img loading="lazy" class="poster-{= ctx.vod.id =}" src="{= ctx.vod.poster =}">
    </div>
    <div class="vod-details">
        <div>片名：</div>
        <div>{{ ctx.vod.title }}</div>
        <div>更新时间：</div>
        <div>{= to_datetime(ctx.vod.updated):sub(1, 10) =}</div>
        <div>状态：</div>
        <div>{{ ctx.vod.memo }}</div>
        <div>类型：</div>
        <div>{{ ctx.vod.kind }}</div>
        <div>导演：</div>
        <div>{{ ctx.vod.director }}</div>
        <div>编剧：</div>
        <div>{{ ctx.vod.writer }}</div>
        <div>演员：</div>
        <div>{{ ctx.vod.actor }}</div>
        <div>地区：</div>
        <div>{{ ctx.vod.location }}</div>
        <div>语言：</div>
        <div>{{ ctx.vod.language }}</div>
        <div>豆瓣：</div>
        <div>
            {[ if ctx.vod.douban.id == '' then ]}
            {{ ctx.vod.douban.score }}
            {[ else ]}
            <a href="https://www.douban.com/subject/{= ctx.vod.douban.id =}/"
                target="_blank">{{ ctx.vod.douban.score }}</a>
            {[ end ]}
        </div>
        <div>上映时间：</div>
        <div>
            {[ if ctx.vod.published ~= 0 then ]}
            {= to_datetime(ctx.vod.published):sub(1, 4) =}
            {[ end ]}
        </div>
        <div>简介：</div>
        <div>{= ctx.vod.summary_html =}</div>
    </div>
</div>
<style>
    .vod-detail-box {
        display: flex;
        flex-wrap: wrap;
        color: #000;
    }

    .vod-detail-box .vod-poster img {
        max-height: 300px;
    }

    @media screen and (min-width: 600px) {
        .vod-detail-box {
            flex-wrap: nowrap;
        }

        .vod-detail-box .vod-poster img {
            max-width: 300px;
        }
    }

    .vod-detail-box .vod-details {
        display: grid;
        grid-template-columns: 6em 1fr;
    }

    .vod-detail-box .vod-details>div:nth-of-type(2n-1) {
        text-align: right;
    }
</style>
{[ local posters = string.format('["%s"]', table.concat(ctx.vod.posters, '","')) ]}
<script>
    const posters = JSON.parse('{= posters =}');
    const check_img = (cls, srcs) => {
        let src = srcs.pop()
        while (src === '') {
            src = srcs.pop()
        }
        if (src !== undefined) {
            let img = new Image()
            img.onload = () => {
                for (const tag of document.getElementsByClassName(cls)) {
                    if (tag.src != src) {
                        tag.src = src
                    }
                }
            }
            img.onerror = () => check_img(cls, srcs)
            img.src = src
        }
    }
    check_img('poster-{= ctx.vod.id =}', posters)
</script>
