<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>录播节目关联视频位置查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
</head>
<body>
@include("common.header")
<div class="block my-2">
    <a class="px-6 py-2 inline-block rounded-full bg-cyan-600 text-white"
       href="{{ route("program.construct.video.add", ["program"=>$program->id]) }}">添加</a>
</div>
<table class="table-auto border-collapse w-full lg:border lg:border-black">
    <thead>
    <tr class="border border-black sticky bg-white lg:static top-0 left-0 right-0">
        <td>BVID</td>
        <td>节目开始时间</td>
        <td>节目开始时的画面</td>
        <td>节目结束时的画面</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    @foreach($videos as $video_pivot)
        <tr>
            <td>
                <a class="underline" target="_blank"
                   href="https://www.bilibili.com/video/{{$video_pivot->video_bvid}}?p={{$video_pivot->start_part}}&t={{$video_pivot->start_sec}}"
                   title="P{{$video_pivot->start_part}}#{{$video_pivot->start_time}}"
                >{{$video_pivot->video_bvid}}</a>
            </td>
            <td>{{$video_pivot->created_at}}</td>
            <td>
                <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->start_part" :time="$video_pivot->start_time">
                    <div>{{$video_pivot->created_at}} P{{$video_pivot->start_part}}#{{$video_pivot->start_time}}</div>
                    @if($video_pivot->start_image)
                        <img width="300" src="{{$video_pivot->start_image}}" alt="开始时的画面">
                    @else
                        节目开始位置
                    @endif
                </x-links.video_link>
            </td>
            <td>
                <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->stop_part" :time="$video_pivot->stop_time">
                    <div>P{{$video_pivot->stop_part}}#{{$video_pivot->stop_time}}</div>
                    @if($video_pivot->start_image)
                        <img width="300" src="{{$video_pivot->stop_image}}" alt="结束时的画面">
                    @else
                        节目结束位置
                    @endif
                </x-links.video_link>
            </td>
            <td>
                <a class="text-blue-600 underline"
                   href="{{route("program.construct.video.edit", ["program_video" => $video_pivot->id])}}">编辑</a>
            </td>
        </tr>
    @endforeach
    </tbody>
</table>
@include("common.footer")
</body>
</html>